Repolode
投稿する
lokesh

lokesh/color-thief

ブラウザーとNode.jsの両方で画像から代表色やカラーパレットを抽出するJavaScriptライブラリ。

GitHub で見る公式サイト
スター
13,658
フォーク
1,310
未解決の Issue
0
最終コミット
3 か月前

これは何？

Color Thiefは、画像（img、canvas、動画フレーム、またはNode.jsのファイルパスやBuffer）を受け取り、代表色や複数色のパレット、Vibrant、Muted、DarkVibrant、LightMutedなどの意味的なスウォッチを返します。各結果はColorオブジェクトで、hex、RGB、HSL、OKLCH、CSS形式への変換ヘルパーに加え、テキスト色の推奨値とWCAGコントラスト比も利用できます。

ブラウザーとNode.jsで同じAPIを使えます。ブラウザー向けの同期関数と、両環境で使える非同期関数を備えています。また、段階的なパレット抽出、observe()による動画やcanvasからのリアルタイム抽出、座標を小数で指定する領域サンプリング、広色域画像向けのDisplay P3出力にも対応しています。AbortSignalで抽出をキャンセルでき、ランタイム依存関係はありません。TypeScriptの型定義も含まれています。

付属のCLI、colorthief-cliでは、色をANSIスウォッチ、JSON、またはCSSカスタムプロパティとして出力できます。Node.jsでは、画像のデコードにsharpを使用します。

主な機能

  • 01画像から代表色、複数色のパレット、または意味的なスウォッチを抽出します。
  • 02ブラウザーとNode.jsで同じAPIを使え、同期版と非同期版があります。
  • 03observe()を使い、video、canvas、img要素からパレットをリアルタイムに更新します。
  • 04解像度に依存しない小数座標で、画像の一部領域をサンプリングします。
  • 05hex、RGB、HSL、OKLCH、CSS形式への出力に対応したColorオブジェクトを返し、WCAGコントラスト比も提供します。
  • 06ANSIスウォッチ、JSON、またはCSS変数を出力するCLIが含まれています。

ユースケース

  • Webページの商品写真やアルバム写真に合う背景色やアクセントカラーを選ぶ。
  • 再生中の動画に合わせて変化するアンビエント照明やグラデーションを作る。
  • アクセシビリティのため、画像の代表色に対するテキストのコントラストを確認する。
  • ビルドスクリプトで、画像からCSSカラー変数を一括生成する。

トピック

#color#image-processing#palette#javascript#typescript#nodejs#browser

よくある質問

color-thief とは？
ブラウザーとNode.jsの両方で画像から代表色やカラーパレットを抽出するJavaScriptライブラリ。 Color Thiefは、画像（img、canvas、動画フレーム、またはNode.jsのファイルパスやBuffer）を受け取り、代表色や複数色のパレット、Vibrant、Muted、DarkVibrant、LightMutedなどの意味的なスウォッチを返します。各結果はColorオブジェクトで、hex、RGB、HSL、OKLCH、CSS形式への変換ヘルパーに加え、テキスト色の推奨値とWCAGコントラスト比も利用できます。
color-thief は無料で使えますか？ライセンスは？
color-thief は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
color-thief は今もメンテナンスされていますか？
半年以内に更新あり。color-thief の最終コミットは 2026年8月3日 です。
color-thief は何に使えますか？
Webページの商品写真やアルバム写真に合う背景色やアクセントカラーを選ぶ。 再生中の動画に合わせて変化するアンビエント照明やグラデーションを作る。 アクセシビリティのため、画像の代表色に対するテキストのコントラストを確認する。 ビルドスクリプトで、画像からCSSカラー変数を一括生成する。
color-thief はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/lokesh/color-thief

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト