Softonic

トライアド配色ジェネレーター

ステップ 1 / 2
次へ

トライアド配色は、色相環上で120°ずつ離れた3色を使う配色です。赤・黄・青の三原色はその代表例。まとまりと活気を両立しながら、騒がしくならないのが特長です。カラーピッカーでベースカラーを選ぶと、このジェネレーターがHSLに変換して色相だけを正確に+120°と+240°回転させ、彩度と明度はそのままに、3つのスウォッチをHEXコード付きで表示します。スウォッチをクリックするとコードをコピーできます。

パレットの作られ方

  1. 1

    ベースカラーを選ぶ

    カラーピッカーで、パレットの軸にする色相を選びます。

  2. 2

    2つの相方カラーを計算

    ツールがHSL空間で色相を+120°と+240°回転させます。彩度と明度は同一のまま保たれ、まとまりのあるトライアドになります。

  3. 3

    HEXコードを確認

    Base、Triadic +120°、Triadic +240°が並んで表示され、それぞれ6桁のHEX値がラベルとして付きます。

  4. 4

    クリックしてコピー

    スウォッチをクリックするとHEXコードがクリップボードにコピーされ、CSSやTailwind設定、デザインツールにそのまま貼り付けられます。

トライアド配色がバランスよく見える理由

色相環上で等間隔に並んだ3色は、色相の近さをまったく共有しません。強くコントラストしながらも、120°の間隔のおかげで、補色（180°差）同士に起こる正面衝突のようなぶつかり合いは生じません。目には「はっきり違うのに調和している」と映ります。

スウォッチの裏側にある計算

ジェネレーターはHEXカラーをHSLに変換し、色相に120°と240°を加えてから元に戻します。動くのは色相だけなので、3色は常に同じ彩度と明度を共有します。面白い副作用として、ちょうど120°の回転はRGBチャンネルの巡回入れ替えと同じになります。デフォルトの #6366F1 の相方が #F16366 と #66F163、つまり同じ3組のバイトの並び替えになるのはそのためです。

このツールが生成するトライアドの例：

ベース Triadic +120° Triadic +240°
#FF0000（赤） #00FF00 #0000FF
#6366F1（インディゴ） #F16366 #66F163
#E67E22（オレンジ） #22E67E #7E22E6
#0EA5E9（スカイブルー） #E90EA5 #A5E90E
#2ECC71（エメラルドグリーン） #712ECC #CC712E

トライアドを使いこなすコツ

鮮やかな3色をフル彩度のまま並べると強すぎます。定石は次のとおりです。

  • ドミナント1色（60%）：メインのUIに。
  • セカンダリ1色（30%）：アクセントやセクションに。
  • ポイント1色（10%）：重要なインタラクティブ要素に。

もう1つの手は、落ち着いたベースから始めることです。相方の2色はベースの彩度を受け継ぐため、柔らかいベースからは柔らかいトライアドが生まれます。

トライアドとほかの配色の比較

配色 構造 印象
補色 2色、180°差 高コントラスト、力強い
類似色 3色、隣接 穏やかでまとまりがある
トライアド 3色、120°差 バランスと活気
テトラード 4色、長方形 豊かだがバランスが難しい
スプリット補色 ベース + 準補色2色 ぶつからずに強い

UIデザインのヒント

  • ペアごとにコントラストを確認。 トライアド配色は、テキストを重ねたときのWCAG AAコントラストを保証しません。組み合わせごとに検証してください。
  • CTAには1色だけを使う。 ボタンの色がトライアド内で入れ替わるとユーザーが混乱します。
  • ティントとシェードで広げる。 4つ目の色相を足さずにパレットを拡張できます。
  • ダークモードで試す。 白地で機能するトライアドも、暗い背景では見分けにくくなることがあります。明度を調整しましょう。

よくある質問

360°の色相環を3等分すると、どの色相も突出せずに互いの距離が最大になります。間隔を狭めると類似色の配色になり、広げすぎると等間隔が崩れて、たいていはスプリット補色の配色に近づきます。

向いていますが、多くは調整して使います。トライアドをベースに、3色のうち2色の彩度を落としたりトーンを抑えたりして、落ち着いた印象に仕上げるブランドが多いです。フル彩度のトライアドは遊び心や元気な印象になるため、ブランドの個性に合わせてください。

作れます。ジェネレーターはベースカラーの彩度と明度をそのまま2つの相方に適用するため、彩度低めのベースからは同じだけ柔らかいトライアドができます。プロフェッショナルなデザインやエディトリアルでよく使われる手法です。

純粋なグレーは彩度がゼロで、回転させる色相が存在しないため、3つのスウォッチが同一になります。ベースをどれかの色相に少し寄せれば、すぐに3色が分かれます。

登録は不要で、何も保存されません。色はパレットの計算と表示にだけ使われます。ステップ表示ではページURLにも色が含まれるため、パレットのブックマークや共有も簡単です。

関連ツール

マテリアルデザイン カラーピッカー

Material Designのカラーパレットを閲覧できます。任意の色調（50からA700）を1タップでHEX、RGB、HSL形式でコピーできます。

罫線入り用紙ジェネレーター

印刷できる罫線入り用紙を無料で作成。カレッジ罫、広め罫、狭め罫を選び、行間をmmで設定し、用紙サイズとマージン線を決めて、印刷またはSVGでダウンロードできます。

方眼紙ジェネレーター

印刷できる方眼紙をオンラインで作成：方眼またはドット罫を選び、間隔をmmで設定し、A4かLetterと好きな線の色を指定して、印刷または鮮明なSVGでダウンロードできます。

旗作成ツール

6種類のレイアウト、色、文字、シンボルで、シンプルな3:2のカスタム旗をブラウザ内でデザインします。SVGまたはPNGをダウンロードするか、ブラウザの印刷ダイアログを開けます。

画像アップスケーラー

AI超解像または従来の補間処理で、低解像度画像を2×、3×、4×に拡大しながら重要なディテールを保ちます。

画像ピクセルレーター

調整可能なブロックサイズで画像全体または選択した領域をピクセル化し、顔、ナンバープレート、またはレトロな8ビットアートの遮蔽に使用できます。

このツールは他の言語でも利用できます