画像パレット抽出 — 結果の検証

入力と出力の例

抽出したパレットを検証するには、各色を元の領域と比べ、読みやすい組み合わせか確かめ、コピーしたコードがデザインやコードに貼る値と一致しているか確認します。

まず色見本を元画像と照らし合わせます。画像と色見本を並べて、各色が写真の中にはっきり存在するか見てください。同じページのカラーピッカーで該当領域をクリックすると、丸めの影響でそのピクセルとチャンネルごとに12前後以内に収まるはずです。それ以上離れていれば、その領域がグラデーションの可能性があります。

スタイルタイルを納品するフリーランスのデザイナーなら、HEX値を空白のページに大きな正方形として貼り、提案する文字色を提案する背景色の上に置いてみましょう。本文はアクセシビリティの指針でコントラスト比4.5対1以上、大きな文字は3対1以上が推奨されており、一般的なコントラストチェッカーで測れます。

よくある失敗は、パレットがコントラストやブランドの正確さを保証すると思い込むことです。パレットは多く使われている色を示すだけです。淡い黄色と白がどちらも写真の実際の色でも、組み合わせると読めないことがあるので、色単体ではなく組み合わせで試します。

最後にHEXとRGBをコピーしてメモに貼り、一致するか確認します。#D83030はrgb(216, 48, 48)のはずです。色数の少ない画像では8色に満たないことがありますが、これはエラーではなく正常な動作です。

Image with several dominant colors

Palette swatches and color codes

見栄えの良いパレットは出発点にすぎません。アクセシビリティやブランドとの一致は別途確認が必要です。