カラー ハーモニー生成

カラー・ハーモニー生成ツールの仕組み

このツールでできること

カラー・ハーモニー生成ツールは、単一の基準となる色相から数学的に関連する色のセット（補色、類似色、トライアド、テトラード、スクエア、スプリット補色、モノクロマティック、シェード）を計算します。各パレットは HEX、RGB、HSL の値付きで表示され、クリック一つでコピーして CSS やデザイントークンにそのまま使用できます。

開発者によくある利用シーン

デザイナーは、ブランドの色相が異なるハーモニールールでどう変化するかを探索してブランドパレットを試作します。フロントエンド開発者は、主要なブランドカラーからボタン、アラート、バッジ用のアクセントカラーを作ります。データ可視化エンジニアは、意図的に見えつつ区別しやすいカテゴリ用の配色セットを選びます。プロダクトマネージャーは、専用のデザインツールがなくても、デザイン提案のレビュー時にパレット案を比較できます。

データ形式、型、またはバリエーション

利用できるスキームは8種類です：Complementary（基準 + 180°）、Analogous（基準 ± 30°）、Triadic（120°間隔の3色）、Tetradic（長方形の4色）、Square（90°間隔の4色）、Split-complementary（基準 + ±150°）、Monochromatic（同一色相で明度10–90%を変化）、Shades（同一色相で暗→明）。各色には、HEX、RGB、HSL の表現に加えて、役割ラベルが含まれます。

よくある落とし穴とエッジケース

極端に彩度が低い、またはグレースケールに近い基準色から導いたハーモニーは、スキーム間で見分けがつきにくくなります。まずは彩度のある基準色から始めてください。彩度が高い基準色をトライアドやテトラードと組み合わせると、派手でバランスを取りにくいパレットになりがちです。UI用途では彩度を少し下げることを検討してください。ハーモニーから得られる組み合わせの中には WCAG のコントラストを満たさないものもあるため、公開前に必ず Color Contrast ツールでテキスト/背景の組み合わせを確認してください。

コードではなくこのツールを使うべき場面

発想出し、素早い探索、デザインレビューにはブラウザツールを使用してください。コードでは chroma.js、colord、culori などのライブラリを使うと、ハーモニーをプログラムで計算し、デザイントークンのビルドパイプラインに統合できます。また、Oklch のような知覚的に均一な色空間とハーモニーの計算を組み合わせることで、より均一に見えるパレットを作れます。