ホーム テトラディックカラー

テトラディックカラー

カラーを選んで、テトラディックカラーパレットを即座に取得——カラーホイール上で 90°、180°、270° 回転した 3 つの色相、100% ブラウザ内で完結。

入力

出力

テトラディックカラーとは?

テトラディックカラーは、カラーホイール上で長方形(または正方形)を形成する 4 つの色です。各色は 90 度の色相回転で区切られ、2 組の補色ペアを作ります。例えば、ベースカラーが 199° のスカイブルーの場合、テトラディックセットには 289°(紫)、19°(オレンジ赤)、109°(緑)が含まれます。この豊かな 4 色パレットは、トリアディックや補色配色よりも多くのバリエーションを提供しながら、視覚的調和を保ちます。

テトラディック配色は、4 つの色相がホイール上で長方形の角を形成するため、レクタングル配色と呼ばれることもあります。4 色が 90 度間隔で均等に配置されると、スクエア配色になります——テトラディック調和の最もバランスの取れた形です。

レクタングル配色

レクタングル配色では、4 色が 2 組の補色ペアで構成されます。このダブル補色構造はデザイナーに柔軟性を提供します:一方のペアを主要要素、もう一方をアクセントに使用できます。重要な課題は 4 色のバランスをとり、どれかが他を圧倒しないようにすることです。一般的な方法は、メインカラー 1 色、サブカラー 1 色、アクセント 2 色を選ぶことです。

テトラディックカラーを使用する場面

テトラディックパレットは、4 つの異なる調和のとれた色が必要な場面で最適です:

  • 豊かなイラスト。 4 つの適切に離れた色相が、作品に深みとバリエーションをもたらします。
  • ダッシュボードデザイン。 各主要セクションやステータスタイプにテトラディックカラーを 1 つずつ割り当てます。
  • ブランドシステム。 テトラディックベースは、プライマリ、セカンダリ、ターシャリ、アクセントの役割に十分な色を提供します。

テトラディックカラーの見つけ方

このツールはブラウザ内でテトラディックカラーを即座に計算します。

  1. ベースカラーを選択。 カラーピッカーを使って任意の開始色相を選びます。
  2. 結果を確認。 右側パネルにベースカラーと 3 つのテトラディックパートナー(90°、180°、270°)が表示されます。
  3. HEX をコピー。 任意のスウォッチの横の「コピー」ボタンをクリックして HEX コードをコピーします。

テトラディックとトリアディックの違い

テトラディックとトリアディックの主な違いは色数:テトラディックは 4 色、トリアディックは 3 色を使用します。テトラディックはより多くのバリエーションと柔軟性を提供しますが、より慎重なバランスが必要です。トリアディックはシンプルで活気があり、テトラディックは豊かで階層的。4 つの異なる調和のとれた色が必要な場合はテトラディックを選びます。

テトラディックカラーの見つけ方は?

HSL でベースカラーの色相を取り、90°、180°、270° を加えます。4 つの色相がホイール上で長方形を形成します。このツールが計算を自動的に行います。

テトラディック配色には何色ありますか?

4 色:ベースカラーと 90°、180°、270° 回転した 3 つの色相。180° の色はベースカラーの補色です。

テトラディックとトリアディックの違いは?

テトラディックは 4 色(90° 間隔)、トリアディックは 3 色(120° 間隔)を使用。テトラディックはより多くのバリエーション、トリアディックはよりシンプルで活気があります。

このテトラディックカラーツールは無料ですか?

はい、完全に無料で、登録不要、透かしなし、制限なし。すべての処理はブラウザ内でローカルに実行されます。