写真からパレットを取り出すのは、配色にたどり着く最も速く誠実な方法です。良い写真の中の色はすでに互いに調和しています。同じ光のもとで同じセンサーに捉えられたからです。デザイナーは写真が存在してきた期間と同じだけ長く、この方法で配色を作ってきました。
このツールはどんな画像からも最大6色を抽出します。絵を小さな標本へ縮め、すべてのピクセルを粗い色の区間へ入れ、区間をピクセル数で並べ替えたうえで、その順位をたどりながらすでに選んだ色と十分に離れた色だけを選びます。この最後の工程のおかげで、砂浜の写真からベージュが6色出てくることがありません。
解析は縮小したコピーを使いブラウザ内で実行されます。アップロードもなく、パレットがどこかに保存されることもありません。
| 工程 | 内容 |
|---|---|
| 縮小 | 画像を長辺80ピクセルまで縮める |
| 区間化 | 各ピクセルを粗い色の区間へ割り当てる |
| 並べ替え | 区間を含まれるピクセル数で並べ替える |
| 分離 | すでに選んだ色に近すぎる候補は飛ばす |
| 平均 | 選ばれた区間が自身のピクセルの実際の平均値を報告 |
先に縮小するのは意図的です。センサーのノイズやJPEGのアーティファクトを平均で消し去るためで、そうしなければほとんど同じ色が数千も生じ、順位が意味のない変奏で埋め尽くされます。
抽出したパレットは完成した体系ではなく素材です。画像で最も大きな割合を占める色はたいてい背景になり、最も小さく彩度の高い色はたいていアクセントで、アクセントのまま留めるべきで背景にしてはいけません。
確定する前に必ずコントラストを確認してください。写真の中で並んで美しく見える2色が、本文の文字が背景に対して必要とする4.5:1の比率に遠く及ばないことがよくあります。写真には互いに近すぎる中間調が満ちているため、抽出パレットはとくにこの問題に弱いのです。
最大6色です。画像に十分区別できる色が6つなければそれより少なくなります。単色調の写真なら3色ということもあります。
各見本が1ピクセルを取った値ではなく、似たピクセルの集まりの平均だからです。ハイライトや圧縮のアーティファクトに当たりうる任意の1点より、代表性のある色が得られます。
いいえ。各色が画像に占める割合と、すでに選ばれた色からどれだけ離れているかに基づいて自動的に選ばれます。結果に影響を与えたい場合は先に対象の領域だけを切り抜いてください。
見本をクリックするとコードがクリップボードへコピーされるので、CSS、デザインツール、ブランド文書へ貼り付けてください。ダウンロードすれば6色がラベル付きの画像1枚として保存されます。
必ずしも満たしません。このツールはコントラストの基準ではなく視覚的に区別できる色を選びます。配布前に文字と背景の組み合わせをコントラストチェッカーでご確認ください。
いいえ。解析はブラウザ内で縮小したコピーを使って実行され、送信されるものはありません。