画像から配色を抽出 — 写真の色をそのまま使う
写真やイラストから主要な色を取り出します。人の目の感じ方に近い色空間で計算するので、見た目に「その写真らしい」色が並びます。CSSの変数やTailwindの設定としても書き出せます。
ブランドの写真に合わせてサイトの色を決める、商品写真からバナーの配色を作る、好きな絵の雰囲気を再現する。手で色を拾うより、画像全体を見て代表色を選ぶほうが早く、外れません。
取り出す色の数は選べます。3色なら方向性、5〜6色なら実際に使える組み合わせになります。
計算する色空間で結果が変わります
色をRGBの数値としてそのまま平均すると、人の目の感じ方とずれた色が出ます。RGBは機械の都合で作られた空間で、数値上の距離と見た目の差が一致しないためです。
このツールはOKLabという色空間で計算します。人が感じる明るさや色みの差が、数値の距離とほぼ一致するように設計された空間です。実際の写真で比べたところ、元の画像との誤差がRGBより4〜15%小さくなりました。
差が出やすいのは、明るい部分と暗い部分が混ざった写真です。RGBで計算すると中間のくすんだ色に寄りがちで、写真の印象と合わない色が並びます。
取り出した色の使い方
| 役割 | 選び方 |
|---|---|
| 背景 | 最も面積の広い色。明るさを調整して薄く |
| 本文 | 背景と対比の取れる暗い色 |
| 強調 | 彩度の高い色。ボタンやリンクに少量 |
| 区切り線 | 背景に近い色をわずかに濃く |
そのまま使えるとは限りません
写真から取った色は、画面の配色としては彩度が高すぎたり、互いに近すぎたりすることがあります。背景に使う色は明るさを上げ、文字に使う色は暗くするなど、調整を前提にしてください。
文字色と背景色に使う組み合わせは、必ずコントラスト比を確認してください。写真の中では美しく見える2色でも、文字にすると読めないことがよくあります。
書き出したCSS変数をそのまま貼り付ければ、サイト全体の色をまとめて差し替えられます。Tailwindを使っている場合は設定の形でも書き出せます。
よくある質問
何色を取り出すのがよいですか？
5〜6色が実用的です。3色だと方向性しか分からず、10色を超えると使い分けが難しくなります。
同じ画像でも結果が少し変わります。
代表色を探す計算は出発点に乱数を使うためです。大きくは変わりませんが、微妙な差は出ます。
透過のある画像でも使えますか？
使えます。透明な部分は計算から外れます。
画像はアップロードされますか？
されません。処理はすべてブラウザの中で行われます。