画像から配色へ
画像から使えるカラーパレットを作る方法
良い画像パレットは頻出ピクセルの一覧ではありません。画像の視覚的な物語を保ち、実際のデザイン判断に使える小さく編集可能な色の組です。
画像からカラーパレット
画像からカラーパレットを作るには？
意図が明確な画像を選び、代表色を少数抽出してから、結果をそのまま採用せず整えます。主役色、支える色、明るい基準、暗い基準、必要なアクセントだけを残します。Toon Toneは画像をブラウザ内で処理し、5色または8色を生成できます。良い色をロックし、残りだけ再生成して、HEX、RGB、HSB、CSS、PNGを書き出せます。最後に実際の背景や文字で確認し、テキストには別のコントラスト検査を行います。
短い答え
- 高品質な元画像を使い、枠、透かし、UI、不要な背景を切り取る。
- 集中した配色は5色、素材や影、状態まで必要なら8色を選ぶ。
- 主題を支える色をロックし、近い重複色やノイズだけを再生成する。
- 引き渡しには正確なHEXまたはRGBを保存し、HSBは編集のために使う。
- 美しい配色とアクセシビリティは別なので、前景と背景のコントラストを検査する。
1色・5色・8色をどう選ぶか
適切な色数は画像内のピクセル数ではなく、これから行う判断で決まります。
| 出力 | 向く用途 | 残すもの | 注意点 |
|---|---|---|---|
| 1色 | 特定の物体やピクセルの照合 | 座標とHEX | ハイライトや圧縮ノイズの可能性 |
| 5色 | ブランド方向、簡潔なUI、集中したイラスト | 主役、補助、明、暗、アクセント | 近似色が役割を浪費しやすい |
| 8色 | 豊かな場面、人物、データ、複数状態 | 素材、追加アクセント、影 | 役割を付けないと階層が弱くなる |
アルゴリズムより先に元画像を整える
パレットの品質は抽出前に決まります。複数の照明が混ざった写真、ブラウザのUIが入ったスクリーンショット、圧縮された小画像には、主題ではなく撮影や保存の過程で生じた色が含まれます。残したい雰囲気や同一性を表す範囲に切り取り、できるだけ元の解像度を使います。意図した光と影は残し、装飾枠や無関係な物体は除きます。同じ商品が暖色光と寒色光で撮影されているなら、どちらを基準にするか先に決めます。抽出器はピクセルをまとめられますが、どの見え方がデザイン目的に正しいかは決められません。
画像を縮小表示し、生成前に期待する役割を言葉にします。作例ではコーラルが暖かな前景、濃い青が構造的な重さ、緑と黄が補助、紫が細いアクセント、暖かなニュートラルが空気感を担います。この役割表が出力の判定基準です。似たベージュが3色も出てコーラルが消えたなら、ピクセル頻度としては正しくても編集上は不適切です。パレットは特定の仕事のために画像を要約するモデルであり、見える全ピクセルの科学的な在庫表ではありません。
抽出色を使えるシステムに変える
一度生成したら各色に仕事を与えます。5色なら主役、1〜2色の補助、明るい基準、暗い基準、アクセントが基本です。イラスト、ブランド、UI、データ可視化で名前は変わっても、階層は読み取れる必要があります。主題を保つ色をロックし、既存色と重なる色、小さな反射だけを拾った色、背景を過剰に代表する色を再生成します。5色や8色を毎回すべて置き換えるより、安定した色を残して少数だけ変える方が、新候補を同じ文脈で比較できます。
次に値を確認します。HEXとRGBはブラウザ色を直接保存し、HSBは色相、彩度、明るさの調整に向きます。丸めるなら理由を残します。ムードボードでは1桁の差が重要でない場合もありますが、共有するデザイントークンでは承認済みの6桁HEXを保持します。元画像、版、切り取り範囲、手動で変えた色も記録します。この短い来歴があれば、抽出されたアクセントを正式なブランド色と誤解したり、別の切り取りから同じ配色を再現しようとしたりする事故を防げます。
使う場所でパレットを検証する
生成画面から実際のプレビューへ移します。予定する背景に文字を置き、ボタンの通常、ホバー、フォーカス、無効状態を見て、イラスト色は最終サイズで確認します。大きな四角では区別できる色でも、2ピクセルの線では消えることがあります。周囲の色も知覚を変え、同じ灰色が青の隣では暖かく、橙の隣では冷たく見えます。必要なら明暗両テーマを確認します。白い抽出画面の上でだけ成立する色は、暗い画面の製品にはまだ採用できません。
アクセシビリティと色再現には別の方法が必要です。WCAG 2.2のレベルAAでは通常文字に4.5:1、大きな文字に3:1以上のコントラストが必要で、同じ美しい画像から取った2色でも自動的には満たしません。ブラウザのパレットは便利なsRGB記録ですが、校正済み印刷の校了ではありません。文字にはコントラスト検査、名前を明示した色差比較にはDelta E、物理出力には管理された印刷工程を使います。配色を創造の出発点にし、最終用途は対応する試験で承認します。
画像パレットを作る5段階
参照画像をデザイン、コード、色記憶練習で再現できる配色へ変える順序です。
1. 用途を決める
1色、集中した5色、豊かな8色のどれが必要かを先に決めます。
2. 元画像を整える
最良のファイルを使い、不要領域を切り、意図した照明や編集を選びます。
3. 抽出して役割を付ける
主役、補助、明、暗、アクセント、素材や状態の役割を付けます。
4. ロックして調整する
重要色を残し、重複やノイズを再生成し、見える理由がある時だけHSBを動かします。
5. 書き出して検査する
正確なCSSやHEXとPNGを保存し、文脈、コントラスト、色域、出力媒体を別々に確認します。
ブラウザ抽出で分かることと限界
ピクセル取得と標準色定義が技術的な土台ですが、画像の要約は編集判断です。公式資料で土台と限界を確認します。
- CanvasのgetImageDataは指定領域をImageDataとして返し、一般的なrgba-unorm8はRGBA各成分に8ビットを使います。 MDN Canvas getImageData資料
- CSS Color 4はsRGBを0〜1の3成分とD65白色点で定義し、Display P3のような広色域も説明します。 W3C CSS Color 4
- 抽出はWCAG検査の代わりではなく、AA最低値は通常文字4.5:1、大きな文字3:1です。 W3C WCAG 2.2コントラスト基準
- Adobeの現行ガイドは多くのパレットが3〜5主色を含み、アップロード後の調整を勧めています。 Adobe画像パレットガイド
returns an ImageData object representing the underlying pixel data for a specified portion of the canvas.
MDN · W3C · Adobe
公式資料と参考リンク
配色を抽出し、実際の色を検査する
画像カラーパレット FAQ
何色抽出すべきですか？
簡潔な階層なら5色、重要な副アクセント、素材、状態があるなら8色です。色数が多いほど正確とは限らず、各色に役割が必要です。
抽出色がくすむのはなぜ？
広いニュートラル背景、混合照明、影、圧縮が頻度を支配するためです。切り取り、重要色のロック、ノイズ位置の再生成を行います。
支配色は最重要色ですか？
違います。支配色は面積が大きい色を指しがちですが、小面積のアクセントが編集上は重要な場合があります。
そのままCSSに使えますか？
レビュー後なら使えます。正確なHEXやCSS変数を出し、役割名を付け、実コンポーネントとコントラストを確認します。
Toon Toneは画像をアップロードしますか？
しません。2026年7月22日時点のツールはブラウザ内で読み取り、5色・8色、ロック再生成、CSS・PNG出力に対応します。