カラーテーマ生成器

ホームに戻る
画像ファイルを追加してください — またはここにドラッグ
JPG PNG WEBP HEIC

このカラーテーマ生成ツールについて

写真からパレットを取り出すのは、配色にたどり着く最も速く誠実な方法です。良い写真の中の色はすでに互いに調和しています。同じ光のもとで同じセンサーに捉えられたからです。デザイナーは写真が存在してきた期間と同じだけ長く、この方法で配色を作ってきました。

このツールはどんな画像からも最大6色を抽出します。絵を小さな標本へ縮め、すべてのピクセルを粗い色の区間へ入れ、区間をピクセル数で並べ替えたうえで、その順位をたどりながらすでに選んだ色と十分に離れた色だけを選びます。この最後の工程のおかげで、砂浜の写真からベージュが6色出てくることがありません。

解析は縮小したコピーを使いブラウザ内で実行されます。アップロードもなく、パレットがどこかに保存されることもありません。

カラーパレットを抽出する手順

  1. 画像を追加します。 写真、イラスト、デザインのスクリーンショットなど、借りるに値する色があるものなら何でも構いません。
  2. 色見本を見ます。 最大6色が16進コードとともに現れ、画像に占める割合の順に並びます。
  3. クリックしてコピーします。 見本をクリックすると16進コードが即座にクリップボードへコピーされます。
  4. パレットをダウンロードします。 ダウンロードボタンで見本をラベル付きのPNGとして保存し、企画書やムードボードに入れられます。

色の選び方

工程内容
縮小画像を長辺80ピクセルまで縮める
区間化各ピクセルを粗い色の区間へ割り当てる
並べ替え区間を含まれるピクセル数で並べ替える
分離すでに選んだ色に近すぎる候補は飛ばす
平均選ばれた区間が自身のピクセルの実際の平均値を報告

先に縮小するのは意図的です。センサーのノイズやJPEGのアーティファクトを平均で消し去るためで、そうしなければほとんど同じ色が数千も生じ、順位が意味のない変奏で埋め尽くされます。

6色を使える配色にするには

抽出したパレットは完成した体系ではなく素材です。画像で最も大きな割合を占める色はたいてい背景になり、最も小さく彩度の高い色はたいていアクセントで、アクセントのまま留めるべきで背景にしてはいけません。

確定する前に必ずコントラストを確認してください。写真の中で並んで美しく見える2色が、本文の文字が背景に対して必要とする4.5:1の比率に遠く及ばないことがよくあります。写真には互いに近すぎる中間調が満ちているため、抽出パレットはとくにこの問題に弱いのです。

よくある質問

何色抽出されますか。

最大6色です。画像に十分区別できる色が6つなければそれより少なくなります。単色調の写真なら3色ということもあります。

画像にある色と正確に同じでないのはなぜですか。

各見本が1ピクセルを取った値ではなく、似たピクセルの集まりの平均だからです。ハイライトや圧縮のアーティファクトに当たりうる任意の1点より、代表性のある色が得られます。

どの色を抽出するか指定できますか。

いいえ。各色が画像に占める割合と、すでに選ばれた色からどれだけ離れているかに基づいて自動的に選ばれます。結果に影響を与えたい場合は先に対象の領域だけを切り抜いてください。

16進コードはどう使いますか。

見本をクリックするとコードがクリップボードへコピーされるので、CSS、デザインツール、ブランド文書へ貼り付けてください。ダウンロードすれば6色がラベル付きの画像1枚として保存されます。

このパレットはアクセシビリティを満たしますか。

必ずしも満たしません。このツールはコントラストの基準ではなく視覚的に区別できる色を選びます。配布前に文字と背景の組み合わせをコントラストチェッカーでご確認ください。

画像はアップロードされますか。

いいえ。解析はブラウザ内で縮小したコピーを使って実行され、送信されるものはありません。

関連ツール