本文へスキップ
Color Palette Extractor

無料の画像カラー抽出ツール

カラーパレット抽出ツール

カラーパレット抽出ツールは、画像に含まれる正確な色を取り出し、HEX、RGB、HSL、OKLCH、CMYKのコード付きのカラーパレットとして返します。各色には画像内の割合が表示され、画像がブラウザの外に出ることはありません。

  • 無料・登録不要
  • 画像は端末の外に出ません
  • ピクセル単位の正確な色
抽出元

ここに画像をドロップ

JPG、PNG、WebP、GIF、AVIF、SVG。最大20枚。

カラーパレット抽出ツールはどのように動作しますか?

カラーパレット抽出ツールは、ブラウザ内で画像のピクセルを読み取り、似た色をグループにまとめ、画像を最もよく表す色を返します。

  1. 画像を追加

    JPG、PNG、WebP、GIF、AVIF、SVG形式の画像を最大20枚、ドロップ、貼り付け、またはファイル選択で追加します。貼り付けたスクリーンショットも使えます。

  2. 色をグループ化

    抽出ツールは、人間の色の知覚に合わせて設計された色空間OKLabでピクセルをクラスタリングし、同じに見える色を統合します。

  3. パレットを調整

    色数を2から20の間で設定し、モードを選びます。画像をクリックすると、任意の実ピクセルを追加できます。ピンをドラッグすると色を選び直せます。

  4. コピーまたはエクスポート

    HEXコードのコピー、コントラストの確認、CSS、Tailwind、Adobe、Procreate、GIMPなどへのパレットのエクスポートができます。

抽出ツールは各色について何を返しますか?

抽出ツールは各色について、7種類のカラーコード、最も近い色名、画像内の割合、白と黒に対するコントラスト、50から950の濃淡スケール(ティントとシェード)を返します。

例:#2A9D8F のカラーコード
コード用途
HEX#2A9D8FWebデザイン、CSS、ほとんどのデザインアプリ
RGBrgb(42 157 143)画面表示、CSS、画像編集ソフト
HSLhsl(173 58% 39%)CSSでの明度と彩度の調整
HSBhsb(173, 73%, 62%)Photoshop、Figma、Procreateのカラーピッカー
OKLCHoklch(63% 0.101 183)最新のCSSでの知覚に基づく色編集
CIE Lablab(58.4 -35.2 -2.3)色差の測定と印刷ワークフロー
CMYK73, 0, 9, 38プリンタープロファイルを使わない印刷用の推定値

画像に合う抽出モードはどれですか?

抽出モードは、画像に含まれる色の数がパレットの色数より多いときに、どの色をパレットに入れるかを決めます。

モード選ばれる色適した用途
バランス(初期設定)広い色面と目立つアクセント色。ピクセルの割合と、選択済みの色からの距離でスコアを付けます写真、イラスト、ブランド画像
主要色最も多くのピクセルを占める色画像を占める色の測定
鮮やかバランスのスコアをクロマで重み付けするため、彩度の高いアクセント色が上位になりますムードボード、商品写真、アートワーク

実ピクセル設定は、画像内に実在する色を返します。平均設定は、各グループの平均色を返します。近い色を統合スライダーは、2つの色を1色とみなす近さをΔE_OK距離(初期値0.03)で設定します。

抽出した色はどのくらい正確ですか?

抽出した色は実際のピクセル値です。抽出ツールは実在するピクセルを混ぜずにサンプリングするため、実ピクセルのパレットに含まれるHEXコードはすべて画像内に存在します。

  • 知覚に基づくグループ化。 色はOKLabで比較されます。OKLabでは、等しい距離が等しい色の差として見えます。RGBの距離は、一部の色の差を過大に、別の色の差を過小に評価します。
  • 安定した結果。 クラスタリングは固定シードを使うため、同じ画像と設定からは常に同じパレットが得られます。
  • 正確な比率。 すべてのピクセルが最も近いパレット色に割り当てられるため、割合の合計は100%になります。
  • 透明度に対応。 不透明度50%未満のピクセルは数えないため、透過PNGでは見えている色だけが表示されます。

ガイド色抽出の仕組み(英語)では、この方法をメディアンカット、オクツリー量子化、単純なk-meansと比較しています。

どのソースから色を抽出できますか?

カラーパレット抽出ツールは4種類のソースを読み取り、ソースごとに専用のツールと設定があります。

  • 画像

    写真、イラスト、スクリーンショット、アートワーク。複数の画像からは、各画像を同じ重みで扱う1つの統合パレットが作られます。

  • ロゴ

    ロゴカラー抽出ツールは、ロゴの正確な色を返し、背景を除去し、輪郭に沿って混ざったピクセルを無視します。

  • Webサイト

    Webサイト配色抽出ツールは、URLからサイトのCSSを読み取り、ブランドカラー、文字色、背景色、枠線の色を返します。

  • 単一のピクセル

    画像カラーピッカーは、クリックした任意のピクセルの正確なHEXコードを返します。ルーペで精密に狙えます。

どのエクスポート形式でダウンロードできますか?

抽出ツールはパレットを11形式でエクスポートでき、すべてブラウザ内で生成されます。

形式ファイル対応アプリ
CSS変数.cssあらゆるWebサイトのスタイルシート
Tailwind v4とv3@theme ブロック、tailwind.config.jsTailwind CSSプロジェクト
SCSS.scssSassプロジェクト
デザイントークン.tokens.jsonW3C Design Tokens対応ツールとFigmaプラグイン
Adobe Swatch Exchange.asePhotoshop、Illustrator、InDesign
Procreate.swatchesiPad版Procreate
GIMPパレット.gplGIMP、Inkscape、Krita
SVG.svgFigma、Sketch、Illustrator
PNGパレットカード.pngプレゼンテーション、ムードボード、SNS投稿
HEXリスト.txtあらゆるアプリ

コード形式には、抽出した値を基準にOKLCHで作成した、各色の50から950の濃淡スケールを含めることができます。

カラーパレット抽出ツールを使うのはどんな人ですか?

  • デザイナー

    ムードボードの写真や参考画像からパレットを取り出し、スウォッチとしてFigma、Adobeアプリ、Procreateに送ります。

  • 開発者

    デザインのスクリーンショットを、濃淡スケール付きのCSS変数やTailwindテーマに変換します。

  • 事業者

    ロゴや商品写真の正確なHEXコードを調べ、Webサイト、オンラインストア、SNS投稿の色を統一します。

  • アーティスト・イラストレーター

    新しい作品に取りかかる前に、絵画や写真の色の比率を研究します。

  • 印刷発注担当者

    校正の前に、正確な画面用の値とCMYK推定値を集めて印刷会社に伝えます。

  • アクセシビリティ担当者

    パレット内のすべての色の組み合わせをWCAG 2の基準値で確認します。ルールはガイドパレットのWCAGコントラスト(英語)で解説しています。

画像はアップロードされますか?

いいえ。画像はブラウザ内でデコードと解析が行われ、ファイルがサーバーに届くことはありません。サイトは画像もパレットも保存しません。

サーバーと通信する機能は2つあります。URLからの画像の読み込みと、Webサイトのコードの読み取りです。どちらも公開ファイルを代わりに取得するだけで、コピーは保持しません。サイトが扱うすべてのデータはプライバシーポリシー(英語)に記載しています。

カラーパレット抽出ツールのよくある質問

カラーパレット抽出ツールは無料ですか?

はい。すべての機能とすべてのエクスポート形式が無料で、アカウント登録、透かし、利用回数の制限はありません。

パレットには何色まで入れられますか?

パレットには2色から20色まで入り、「色数」スライダーで設定します。初期設定のパレットは6色です。

ほかのツールと色が違うのはなぜですか?

ツールによって、色空間、クラスタリングのアルゴリズム、サンプリング方法、スウォッチの値が異なります。このツールは初期設定でOKLabを使って色をグループ化し、実際のピクセル値を返します。多くのツールはRGBで色を平均化します。

複数の画像から1つのパレットを抽出できますか?

はい。最大20枚の画像を追加すると、各画像を同じ重みで扱う1つの統合パレットと、画像ごとの小さなパレットが作られます。

スマートフォンでも使えますか?

はい。抽出ツールはモバイルブラウザで動作し、カメラロールの写真を読み込めます。色はタップで選択できます。

対応している画像形式は何ですか?

JPG、PNG、WebP、GIF、AVIF、BMP、SVGファイルは、現行のすべてのブラウザで使えます。HEIC写真はSafariでしか開けないため、ほかのブラウザではJPGかPNGのコピーが必要です。