カラーハーモニーのタイプの説明 - 補色、類似色、三和色など

カラーハーモニーは、カラーホイール上で一緒に機能する色を選択するための一連のルールです。デザイナーはこれらの関係をブランド、UI アクセント、マーケティング サイト、イラストに使用します。すべての理論書を暗記する必要はありません。6 つの実践的なハーモニー タイプで、相補、相似、トライアディック、テトラディック、スプリットコンプリメンタリー、単色という実際の作業のほとんどをカバーできます。このガイドでは、各タイプ、それをいつ使用するか、ブラウザですぐに使える HEX / RGB / HSL パレットを生成する方法について平易な言葉で説明します。

調和がランダムな見本に勝る理由

ランダムな色は、ムードボードではトレンディに見えても、製品 UI では崩れてしまう可能性があります。ハーモニーにより、予測可能な構造が得られます。つまり、1 つの基本ブランド カラーと、ホイール上で明確な関係を共有するアクセントです。この構造により、ホバー状態、チャート、マーケティング セクションが騒々しいのではなく、意図的に表示されているように感じられます。

• すでに所有しているブランド HEX から始める
• 仕事に合った調和を選択してください（コントラストと穏やかさ）
• 設計ツール用に HEX をエクスポートし、エンジニアリング用に CSS 変数をエクスポート
• 出荷前にテキストのコントラストを個別に確認してください

補色

補色はホイール上で互いに向かい合って配置され、約 180 度離れています。古典的なペアには、青/オレンジ、赤/緑などがあります。強いコントラストを生み出すので、行動を促すボタン、ハイライト、ポスターに役立ちます。密度の高い UI では慎重に使用してください。フル強度の補体を並べると振動したり、うるさく感じたりする可能性があります。

類似の配色

青、青緑、緑など、類似した色が隣り合って配置されます。現実世界（空、水、木の葉）では似たような色合いが一緒に現れるため、自然で統一感があるように感じられます。類似パレットは、ソフト製品の UI、ウェルネス ブランド、コンテンツと競合しない背景に最適です。

ヒント: 主要な色相、サポート色、およびアクセントを 1 つずつ選択します。すべての類似したスウォッチの音量が同じである場合、インターフェイスは階層を失います。

トライアドの配色

トライアド ハーモニーでは、120 度で等間隔に配置された 3 つの色相が使用されます。その結果、カラフルでありながらバランスが取れており、遊び心のあるブランド、教育製品、イラスト システムによく見られます。 UI 作業では、トライアド メンバーの 1 人を優先させ、残りの 2 人はバッジ、チャート、または二次的なアクションのために保持します。

四次 (長方形) スキーム

四次調和では、ホイール上に長方形を形成する 4 つの色相 (多くの場合、2 つの相補的なペア) が使用されます。バリエーションが豊富で、失敗する可能性がさらに高くなります。役割を明確に割り当てます: プライマリ、セカンダリ、アクセント、ニュートラルな色合いのコンパニオン。テトラディック セットは、複数の同等の製品ラインを備えたマルチシリーズ チャートやキャンペーン システムで威力を発揮します。

分割補色

分割補色では、直接の補色ではなく、ベースの色相とその反対側に隣接する 2 つの色が使用されます。コントラストは得られますが、純粋な相補的なペアよりも激しい衝突が少なくなります。アグレッシブに見えずエネルギーが必要なダッシュボードやマーケティング ページに最適です。

単色パレット

単色パレットは同じ色相を維持し、明度と彩度を変化させます。白に近いものから黒に近いものまでのスレートスケール、または単一ブランドの青に色合いや色合いを加えたものを考えてください。これらは、テキスト、サーフェス、境界線、およびダークモードの基盤にとって最も安全な選択です。後でリンクとボタンに 2 番目のハーモニー アクセントを追加します。

ハーモニーを CSS トークンに変換する方法

スウォッチを取得したら、それを CSS カスタム プロパティとしてエクスポートすると、デザインとエンジニアリングが 1 つの信頼できる情報源を共有できるようになります。

• 生成されたスウォッチの --color-1 から --color-n
• 最も暗い/最も明るいモノクロステップをテキストと背景の役割にマッピングします
• トークンを手動で編集するときに、ブランド HEX を HEX to RGB Converter と同期させます。
• 同じストップを使用して CSS グラデーション ジェネレーター でソフト ウォッシュを構築します

ハーモニーパレットを無料で生成

ベースカラーを選択し、ハーモニーを選択し、HEX リストまたは :root CSS ブロックをコピーする - すべてブラウザ内で実行できます。

• カラーパレットジェネレーター - 相補、相似、3 項、4 項、分割相補、単色、またはランダム - HEX、RGB、HSL、および CSS 変数を使用します。
• CSS グラデーション ジェネレーター - パレットのストップを線形、放射状、または円錐形の CSS グラデーションに変換します。
• HEX から RGB コンバーター - チャンネルレベルの編集が必要な場合は、ブランド HEX を RGB/HSL に変換します。

よくある質問

UI デザインに最適な色の調和はどれですか?

単色スケールと 1 つのアクセント ハーモニー (多くの場合、相補的または分割相補的) で、ほとんどの製品 UI をカバーします。同様のスキームは、落ち着いたマーケティングやコンテンツの多いアプリに適しています。純粋な 3 項集合と 4 項集合では、画面が騒々しくならないように、より厳密な役割の割り当てが必要です。

コンプリメンタリーとスプリットコンプリメンタリーの違いは何ですか?

補色では、正反対の色相が使用されます。スプリットコンプリメンタリーでは、反対側の 2 つの色相の横にある 2 つの色相を使用します。スプリットコンプリメンタリーは通常、コントラストを提供しながらも柔らかく感じられます。

やはりコントラストを確認する必要がありますか?

はい。ハーモニーはホイールに関連する色合いを選択します。背景上のテキストの WCAG AA/AAA コントラストは保証されません。出荷前に必ず読み取り可能なペアを確認してください。

パレットには何色を含める必要がありますか?

製品の仕事では、3 ～ 6 つの意図的な役割が 12 の見本の虹に勝ります。アナログおよび単色ジェネレーターでは、多くの場合 3 ～ 8 ステップが使用されます。補完では、自然に 2 つの強力な極が返され、さらに色を付けることができます。