画像からカラーパレット抽出
写真の主要な色を HEX、RGB、HSL で抽出します。 処理はすべて端末内で完結し、アップロードは一切ありません。
- 入力
- PNG · JPEG · WebP · GIF · SVG
- 出力
- HEX · RGB · HSL · CSS · JSON
画像をドロップ
写真、スクリーンショット、ロゴ：PNG、JPEG、WebP、GIF、SVG に対応。画像の貼り付けもできます。
どんな画像からでもカラーパレットを作成
写真、スクリーンショット、ロゴをドロップすると、このカラーパレット作成ツールが主要な色を取り出し、画像に占める割合の大きい順に並べます。色の数は 3 〜 12 から選べ、各色を HEX、RGB、HSL でコピーでき、画像の任意の場所をクリックすれば正確なピクセルの色を取得できます。パレットは CSS 変数、SCSS、Tailwind の設定、JSON、PNG の帯画像として書き出せます。画像はお使いの端末で解析され、アップロードされることはありません。
画像から色を抽出する方法
- 画像をページにドロップするか、ファイルから選ぶか、クリップボードから直接貼り付けます。PNG、JPEG、WebP、GIF、SVG に対応しています。
- 色の数を必要なスウォッチ数に設定します。リストの上の帯には、各色が画像に占める割合で表示されます。
- 値をクリックすると HEX、RGB、HSL としてコピーされます。
- スクリーンショット内のボタンの色など、特定の場所の色が必要な場合は、画像のその点をクリックして色を取得し、プラスボタンでパレットに追加します。
- 書き出し形式を選んでコードをコピーするか、パレットを PNG の帯画像としてダウンロードします。
主要な色の見つけ方
1 枚の写真には 10 万色もの異なる色が含まれることも珍しくなく、そのほとんどは互いにわずかに違うだけの色です。重要な数色を見つけるため、画像を縮小し、k-means クラスタリングという手法で各ピクセルを最も似た色のピクセルとグループにまとめます。各グループが 1 つのスウォッチとなり、その色はグループ内のピクセルの平均で、含まれるピクセル数の多い順に並びます。
単純なカラーピッカーより良い結果を得るための工夫が 2 つあります。まず、色の比較は OKLab で行います。これは、等しい距離が目に等しい差として見えるように設計された色空間です。単純な RGB でクラスタリングすると、緑はほぼ同じ色合いに細かく分かれ、異なる青はひとまとめにされがちです。次に、初期点は決定的に選ばれ、よく使われていて、かつすでに選ばれた色から遠い色が優先されます。そのため同じ画像からは常に同じパレットが得られ、灰色の壁の上の赤いロゴのような小さくても鮮やかなアクセントが背景に埋もれることもありません。
透明なピクセルは無視されるので、透過 PNG のロゴからは黒のスウォッチではなく、ロゴ自体の色が得られます。
HEX・RGB・HSL：どれをコピーすべきか
OKLCH、CMYK、HSV が必要な場合や、スウォッチの明るい色合いがほしい場合は、HEX 値をカラーコード変換に貼り付けてください。すべての表記に加え、明るい色・暗い色や配色パターンも表示されます。
- HEX
- #2a9d8f。赤、緑、青を表す 6 桁の 16 進数です。最も簡潔な形式で、あらゆるデザインツールと CSS で使えます。
- RGB
- rgb(42, 157, 143)。同じ 3 つのチャンネルを 0 〜 255 の数値で表します。色を計算で扱うコードや、値を個別に求めるツールで便利です。
- HSL
- hsl(173 58% 39%)。色相、彩度、明度です。手作業で最も調整しやすい表記で、ホバー時は明度を上げ、落ち着いたバリエーションには彩度を下げるといった使い方ができます。
書き出し形式
- CSS 変数：
--palette-1、--palette-2などを含む:rootブロック。どのスタイルシートにもそのまま使えます。 - SCSS：Sass プロジェクト向けの
$palette-1形式の変数。 - Tailwind v3 の設定：
tailwind.config.js用のtheme.extend.colorsオブジェクト。bg-palette-1のようなクラスが使えるようになります。 - Tailwind v4 の @theme：Tailwind 4 の CSS ファーストな設定向けの
--color-palette-1カスタムプロパティ。 - JSON：各色の HEX、RGB、HSL を含む配列。スクリプトやデザイントークンに。
- PNG の帯画像：スウォッチを横に並べた画像。ムードボード、制作指示書、チャットのメッセージに。
使えるパレットにするコツ
- ブランド用途なら少なめ、イラストなら多め。写真の雰囲気は通常 5 〜 6 色で捉えられます。補助的な色調も必要な場合は 10 〜 12 色に増やしてください。
- 先に切り抜く。広い空や白いページの余白は結果を支配してしまいます。必要な部分だけに切り抜くと、その部分を反映したパレットになります。
- 文字色として使う前に確認する。写真から取り出した色は、文字に十分なコントラストがないことがほとんどです。文字を載せる予定の組み合わせはコントラストチェッカーで確認してください。
- 正確な値にはスポイトを使う。主要な色は平均値です。スクリーンショット内のロゴや UI 要素など、特定のピクセルの正確な色が必要な場合は、そこをクリックしてください。
よくある質問
- 画像からカラーパレットを作るには？
- このページに画像をドロップしてください。主要な色が画像に占める割合の大きい順にすぐ表示されます。色の数を変えたり、各色を HEX、RGB、HSL でコピーしたり、まとめて CSS、Tailwind、JSON に書き出したりできます。
- 画像の中の色のカラーコード（HEX）を調べるには？
- 画像を読み込み、調べたい場所をクリックします。スポイトがそのピクセルの HEX、RGB、HSL の値を表示し、値をクリックするとコピーされます。
- 主要な色はどのように計算されていますか？
- 画像を縮小し、人の知覚に近い形で色の差を測る OKLab 色空間で、ピクセルを k-means によってクラスタリングします。各クラスタの平均色がスウォッチとなり、含まれるピクセルの割合の大きい順に並びます。
- 他のツールと少し違う色が出るのはなぜですか？
- 似たピクセルのまとめ方は抽出ツールごとに異なり、スウォッチは単一のピクセルではなくグループの平均です。このツールの初期点の選び方は決定的なので、ここでは同じ画像から常に同じ結果が得られます。正確なピクセルの値が必要な場合はスポイトを使ってください。
- パレットを Tailwind CSS に書き出せますか？
- はい。tailwind.config.js に貼り付ける colors オブジェクトなら Tailwind v3 の設定、CSS ファーストな設定なら Tailwind v4 の @theme を選び、コードをコピーまたはダウンロードしてください。
- 透過 PNG やロゴにも使えますか？
- はい。ほぼ透明なピクセルはスキップされるため、パレットには空の背景ではなく、見えているデザインの色が反映されます。
- 画像はアップロードされますか？
- いいえ。画像はブラウザ内でデコード・解析され、端末の外に出ることはありません。