無料の画像カラー抽出ツール
カラーパレット抽出ツール
カラーパレット抽出ツールは、画像に含まれる正確な色を取り出し、HEX、RGB、HSL、OKLCH、CMYKのコード付きのカラーパレットとして返します。各色には画像内の割合が表示され、画像がブラウザの外に出ることはありません。
- 無料・登録不要
- 画像は端末の外に出ません
- ピクセル単位の正確な色
ここに画像をドロップ
またはCtrl+Vで貼り付け. JPG、PNG、WebP、GIF、AVIF、SVG。最大20枚。
カラーパレット抽出ツールはどのように動作しますか?
カラーパレット抽出ツールは、ブラウザ内で画像のピクセルを読み取り、似た色をグループにまとめ、画像を最もよく表す色を返します。
画像を追加
JPG、PNG、WebP、GIF、AVIF、SVG形式の画像を最大20枚、ドロップ、貼り付け、またはファイル選択で追加します。貼り付けたスクリーンショットも使えます。
色をグループ化
抽出ツールは、人間の色の知覚に合わせて設計された色空間OKLabでピクセルをクラスタリングし、同じに見える色を統合します。
パレットを調整
色数を2から20の間で設定し、モードを選びます。画像をクリックすると、任意の実ピクセルを追加できます。ピンをドラッグすると色を選び直せます。
コピーまたはエクスポート
HEXコードのコピー、コントラストの確認、CSS、Tailwind、Adobe、Procreate、GIMPなどへのパレットのエクスポートができます。
抽出ツールは各色について何を返しますか?
抽出ツールは各色について、7種類のカラーコード、最も近い色名、画像内の割合、白と黒に対するコントラスト、50から950の濃淡スケール(ティントとシェード)を返します。
| コード | 例 | 用途 |
|---|---|---|
| HEX | #2A9D8F | Webデザイン、CSS、ほとんどのデザインアプリ |
| RGB | rgb(42 157 143) | 画面表示、CSS、画像編集ソフト |
| HSL | hsl(173 58% 39%) | CSSでの明度と彩度の調整 |
| HSB | hsb(173, 73%, 62%) | Photoshop、Figma、Procreateのカラーピッカー |
| OKLCH | oklch(63% 0.101 183) | 最新のCSSでの知覚に基づく色編集 |
| CIE Lab | lab(58.4 -35.2 -2.3) | 色差の測定と印刷ワークフロー |
| CMYK | 73, 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.js | Tailwind CSSプロジェクト |
| SCSS | .scss | Sassプロジェクト |
| デザイントークン | .tokens.json | W3C Design Tokens対応ツールとFigmaプラグイン |
| Adobe Swatch Exchange | .ase | Photoshop、Illustrator、InDesign |
| Procreate | .swatches | iPad版Procreate |
| GIMPパレット | .gpl | GIMP、Inkscape、Krita |
| SVG | .svg | Figma、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のコピーが必要です。