配色調和アナライザーとは？
カラーハーモニーアナライザーは、色彩理論に基づいて配色の相性を判定します。ハーモニーの種類（補色・類似色・トライアドなど）を検出し、相性スコアを算出して、パレットを改善するヒントを提示します。
アナライザーは各 HEX を HSL に変換し、色相の距離を色相環で測って、補色・類似色・トライアド・スプリットコンプリメンタリー・テトラード・モノクロマティックの関係を判定します。彩度と明度の散らばりもチェックし、0〜100 のスコアと「コントラストのために暗くする」「彩度をそろえる」といった具体的な提案を返します。
使い方
- カラーピッカーで色を選ぶか、16進コードを入力して2色以上追加します。
- ハーモニー分析を確認し、検出された関係タイプと互換性スコアを確認してください。
- 改善の提案を確認したら、パレットをエクスポートしてください。
使用するタイミング
- ブランドのトークンを固める前に、3色のメインカラーが噛み合うか確かめる。
- ムードボードから取った 2 つの候補パレットを比較して、より調和した方を選ぶ。
- 各系列に明確な色が必要なチャートのパレットを点検する。
結果
ブランドデザイナーが3つのブランドカラー（#2D5F8B・#F4A623・#E8E1D5）を入力したところ、スプリットコンプリメンタリーハーモニーを形成し互換性スコアが87%であることが判明。青を少し暖色系に調整する提案が表示されました。
よくある質問
- ハーモニースコアは具体的に何を測っていますか?
- 色相角が既知の関係(補色なら 180°、類似色なら 60° 以内など)とどれだけ合っているか、彩度と明度の分布、全体のコントラストを総合した値です。70 以上で堅実、50 を切ると調整が要ることが多いです。
- 3 色なのに「トライアド」ではなく「カスタム」と表示される理由は?
- 正統派のトライアドは色相が 120° ずつ離れます。たとえば 80° と 200° に並んでいると教科書のパターンに当てはまらず、カスタム表示になります。それでも彩度・明度・コントラストでスコアは付きます。
- 常に 100 点を目指すべき?
- 必ずしも。100 はいわゆる教科書的にクリーンな配色で、チャートやダッシュボードでは理想的です。ブランドの配色は 70〜85 に着地することが多く、適度な緊張が個性につながります。スコアは目安として使えば十分です。
- 扱える色数はどれくらい?
- 実用範囲は 2〜7 色。関係を見るには 2 色が最低限で、7 色を超えるとハーモニーの分類はほぼ意味を失い、多くがカスタムになります。色数が多い可視化では、明度と彩度のバランスに集中すると現実的です。
- パレットをコードやデザインツール用に書き出せますか?
- はい。ダウンロードボタンで HEX を保存できるほか、ワンクリックで全色をコピーできます。Figma のカラースタイル、CSS のカスタムプロパティ、デザインシステムの JSON トークンファイルなどへ、そのまま貼り付けて使えます。