画像からカラーパレットを作る方法

よいパレットは、気に入った1枚の画像から生まれることがよくあります。コンセプトアート、映画のワンシーン、旅先の写真。その色を取り出せば、イラスト、UI、ドット絵の統一感ある出発点になります。

しくみ

画像からカラーパレット作成は、画像を縮小し、人の目の明るさの感じ方で重みをつけたk-means法で、似た色のピクセルをまとめます。各色は一つのグループの平均色で、下のパーセントは画像の中で占める割合です。

手順

1. 画像をドロップ（ブラウザの外には出ません）。
2. 色数を選ぶ。5〜6色なら雰囲気をつかむパレット、12〜16色ならドット絵の作業用パレット。
3. 色をクリックしてHEXコードをコピー。一覧ごとコピーも可能。
4. CSS変数として書き出すか、GIMP・Aseprite・Krita・Inkscapeで使える.gplをダウンロード。

よりよいパレットにするコツ

• 大きな余白や空が占めている場合は、先に切り抜く。
• 色数を変えて試す。6色のパレットは12色のパレットの一部ではありません。
• 後から調整する。抽出した色は平均なのでくすみがち。アクセント色の彩度を上げ、本当の暗色と明色を加えましょう。

UIに使うとき

抽出したパレットはスタイルの参考であり、アクセシブルな配色ではありません。文字色と背景のコントラスト（通常の文字で4.5:1以上）を確認しましょう。

スプライトシートの分割はスプライトシート分割・結合で。