カラーハーモニー理論 — 補色・類似色・トライアドの使い方
カラーハーモニーは色同士の組み合わせの法則で、ベースカラーに対してどの位置の色を組み合わせるかでさまざまな印象を作れます。デザインでプロらしい配色を実現するための基礎知識です。
補色（Complementary）とは
補色は色相環の正反対（180°）に位置する色の組み合わせです。赤と緑、青とオレンジのような強いコントラストが生まれ、目立つCTAボタンやアクセントカラーに有効です。補色を使いすぎると視覚的に疲れやすいため、一方を主色・もう一方をアクセントとして小面積に使うのがコツです。スプリット補色（Split-Complementary）は補色の両隣の色を使う配色で、補色配色と同様のコントラストを持ちながら視覚的なバランスが取りやすいのが特徴です。Color Palette Generatorでベースカラーを入力すると補色とスプリット補色の両方をワンクリックで生成でき、各色をHEX・RGB・HSL形式でコピーしてデザインツールにすぐ転用できます。
類似色（Analogous）とは
類似色は色相環で隣接する2〜3色の組み合わせです（一般的に30°以内）。同系色なので統一感があり穏やかで自然な印象を与えます。自然をテーマにしたデザインや、落ち着いた印象のブランドカラーに向いています。類似色の中でも明度・彩度で変化をつけることでメリハリを出せます。例えば青・青緑・青紫の3色は落ち着いた知的な印象を与えるため、IT企業やフィンテックのブランドカラーに多用されます。類似色を背景・テキスト・アクセントの3段階で使い分けると、モノトーンに近い洗練された配色が実現できます。Color Palette Generatorでは類似色の範囲（角度）をスライダーで調整してリアルタイムで確認できます。
トライアド・テトラドとモノクロマティック
トライアドは色相環を3等分した3色（例: 赤・青・黄）の組み合わせでバランスと彩りを両立します。テトラドは4等分した4色でより豊かな配色ですが調和が難しくなります。モノクロマティックは同一色相の明度・彩度違いで、シンプルで洗練された印象になります。モノクロマティックはブランドカラーの1色から5〜10段階のシェードを生成して使い回す手法で、TailwindのカラーパレットやMaterial Designのカラーシステムがこの考え方に基づいています。テトラドは4色が対称的な位置に並ぶ「正方形配色」とも呼ばれ、各色のバランスを取るには一方を支配色にして他の3色を補助的に使うのがポイントです。Color Palette Generatorでこれらすべての配色パターンを即座に生成・比較できます。
HEX・RGB・HSL形式での利用
Color Palette Generatorは生成した各カラーをHEX・RGB・HSL形式で表示し、ワンクリックでコピーできます。CSSカスタムプロパティへの貼り付け（--color-primary: #3b82f6）、Figmaのカラースタイルへの転用、Tailwind CSSのextend.colorsへのカスタムカラー追加など、各ツールが求める形式にすぐ対応できます。デザインシステムでは同一ブランドカラーから5〜10段階の明暗バリエーションを作ることが多く、HSL形式で明度だけを変えることで一貫したカラーパレットを効率的に設計できます。全パレットをCSS変数としてまとめてコピーする機能も搭載しています。