色が選ばれる仕組み
このツールは、画像の長辺を最大160ピクセルに縮小した小さなコピーを作り、透明でないすべてのピクセルを数えます。次にk-meansクラスタリングで似たピクセルをグループにまとめ、各グループの平均色を、グループが大きい順に表示します。各色見本のパーセンテージは、そのグループが画像に占める割合です。
開始点はランダムではなく固定されています。まず最も多い色から始め、すでに持っている色から最も離れた色を順に追加していきます。そのため同じ画像からは毎回同じパレットが得られ、白い箱の上の赤いロゴのような小さく鮮やかなアクセントも、背景に平均化されずに独自の色見本として残ります。
5〜8色を指定してください。無地の背景での商品撮影は通常5色か6色で十分です。にぎやかなライフスタイル写真は8色の方がよく読み取れます。指定した数より画像に含まれる異なる色が少ない場合は、その旨を知らせ、見つかった色を表示します。
コントラストマトリクスの読み方
各色は他のすべての色と、さらに純粋な白と黒とで組み合わされ、各セルには行の色の文字を列の色の背景に置いたときのコントラスト比が表示されます。この比はWCAGの定義に従います：(L1 + 0.05) / (L2 + 0.05)。ここでL1とL2は明るい方と暗い方の色の相対輝度です。値は1:1（同じ色が2つ）から21:1（白地に黒）までです。
ラベルはWCAGが定める基準値です：
- AA：通常の文字で少なくとも4.5:1、大きな文字で3:1（達成基準1.4.3）。
- AAA：通常の文字で少なくとも7:1、大きな文字で4.5:1（達成基準1.4.6）。
- 大きな文字とは少なくとも18ポイント、または14ポイントの太字を指します（WCAGによる大きなサイズの定義）。
AA largeと表示されたセルは、大きな見出しには適しますがキャプションには薄すぎます。W3Cの1.4.3の解説でも比は丸めるべきではないとされており、4.499:1は4.5:1を満たしません。このツールは正確な数値で判定し、切り上げずに小数点以下2桁で切り捨てて表示します。
実例
たとえば写真から#1a3c6eのネイビーと#fdf6e3のクリーム色が得られたとします。ネイビーの相対輝度は約0.046、クリーム色は約0.923になります。比は(0.923 + 0.05) / (0.046 + 0.05)で、これらの丸めた値では約10.1:1、正確な値では10.16:1です。これはすべての文字でAAAを満たすので、クリーム色のエンドカードにネイビーの文字はどんなサイズでも安全です。同じクリーム色に#e07a2eのような中間のオレンジを置くと比は2.78:1まで下がり、大きな文字でも不合格です。オレンジは黒い文字を乗せたボタン（6.99:1、AAですがAAAにはわずかに届きません）や、文字のない図形に使うとよいでしょう。
エクスポートの使い方
CSSのエクスポートはカスタムプロパティの:rootブロックで、画像に最も多く占める色が--color-1、以下順に続きます。JSONには各色のhex、RGB、HSLと画像内の割合が含まれ、デザイントークンファイルに貼り付けたりスクリプトに渡したりするのが簡単です。どの色が背景、文字、アクセントかが分かったら変数名を付け替えてください。
このツールが行わないこと
このツールはどの色があなたのブランドかを判断できません。木のテーブルの上に置いた商品の写真にはテーブルも含まれます。商品の色だけが欲しい場合は、先に商品やパッケージに切り抜いてください。また正確な印刷色を教えることもできません。数値はカメラや編集を経たファイル内のピクセルなので、公開前にブランドガイドと照らし合わせてください。さらに判定するのは文字のコントラストだけです。WCAGにはアイコンやインターフェース部品に対する別のルールがありますが、このマトリクスはそれを評価しません。
手作業でやりたくない場合は
Hermosoはマーケティングを自動操縦します。あなたの市場ですでに成果を上げている広告を調査し、ブランドに沿った画像広告や動画広告を作り、投稿をスケジュールし、あなた自身の広告アカウントで有料キャンペーンを運用します。ウェブサイトからブランドを追加すると、商品、ロゴ、パレットを学習し、hexコードでキャプションやエンドカードの色を設定できます。ウェブアプリで動作するほか、MCPサーバーを通じてClaude、ChatGPT、Cursorの中でも利用できます。
無料ツール: SNSサイズガイド · Instagramグリッドメーカー · Open Graphジェネレーター
よくある質問
写真からカラーパレットを取得するには？
写真をツールにドロップし、5〜8色のうち欲しい色数を選びます。似たピクセルをグループ化し、各グループの平均色を HEX、RGB、HSL で、割合の大きい順に表示し、それぞれにコピーボタンが付きます。
テキストに必要なコントラスト比は？
WCAG 2.2 のレベル AA では、通常のテキストに4.5:1以上、大きいテキストに3:1以上を求めます。レベル AAA では7:1と4.5:1を求めます。大きいテキストとは18ポイント以上、または14ポイントの太字です。
4.49:1は AA に通るほど十分近いですか？
いいえ。W3C によれば、計算されたコントラスト比をしきい値と比較する際に四捨五入すべきではないため、4.499:1は4.5:1を満たしません。このツールは正確な数値で判定します。
なぜ毎回同じパレットになるのですか？
クラスタリングは固定の起点、つまり最も多い色から始まり、その後すでに選ばれた色から最も離れた色を加えていきます。ランダムな開始がないため、1枚の画像からは常に1つの結果が得られます。
画像はアップロードされますか？
いいえ。画像はブラウザ自身のファイルリーダーで読み込まれ、お使いのデバイス上のキャンバスで集計されます。どこにも送信されず、保存されません。