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

トライアド配色ジェネレーターは、1つのhex色を色相環に沿って等間隔の百二十度ステップで歩き、3色パレットに変換します。#3498db や短縮形 #abc のような基準コードを入力すると、ツールは色を色相・彩度・明度に変換し、彩度と明度を固定したまま、色相オフセットがゼロ、プラス百二十、プラス二百四十度の3メンバーを生成します。正規化されたhex値、RGBチャンネル、HSLの内訳、scheme配列、テストでアサートしたりデザイントークンファイルに落とし込める段階的な回転行が返ります。大胆なセカンダリアクセントを均衡させるブランドチーム、テーマトークンを足場にするフロントエンド開発者、色彩調和を学ぶ学生は、フルのデザインスイートを開かずに同じ決定的なトライアドマップを必要とします。

トライアド配色とは何か、120°間隔が効く理由

トライアド調和は色相円上の正三角形の頂点に3つの色相を置きます。各色は次の色から百二十度離れ、どの色相も支配せず3色が等間隔に保たれます。デザインシステムは、ブランドが1つのプライマリ識別色に加え、無作為ではなく関連して感じられる2つの支援アクセントを必要とするときにこの構造を使います。

ジェネレーターはHSL空間で古典モデルを実装します。入力hexを赤・緑・青の整数に変換し、それらのチャンネルを度単位の色相と分数としての彩度・明度に写像し、元の彩度と明度を共有しつつ色相が基準角、基準プラス百二十、基準プラス二百四十に位置する3色を出力し、それぞれゼロから三百六十の半開区間にラップします。

彩度と明度を固定するのは意図的で—トライアド検索意図は均衡した色相回転であり、新しい明度やクロマのランプを発明することではない—ので、パステル青はパステルの伴走色を、飽和した赤は飽和した伴走色を生みます。入力がほぼ灰色のとき、彩度はほぼゼロで3つのhexが似て見えることがあります。

無彩色には回転する意味のある色相がないため、これは正しい物理でありバグではありません。教師はしばしばこのツールを補色（百八十度）や類似色（小さな隣接ステップ）の授業と組み合わせ、学習者がホイール上の間隔が視覚的緊張をどう変えるかを見られるようにします。

応答は常にprimary、secondary、tertiaryの役割を列挙するので、ドキュメントとCSSカスタムプロパティは手で並べ替えずに --color-primary、--color-secondary、--color-tertiary にきれいに対応できます。

実務のコツ、限界、関連検索

任意のホイール選択ではなく、すでに信頼しているブランド色やUI色から始めてください。primaryメンバーはHSL往復後のオフセットゼロの入力色相で、RGBからHSLからRGBが8ビットチャンネルに量子化されるため、元のhexからチャンネル1単位ずれることがあります。

ピクセル安定のフィクスチャが必要なときは、Figmaやスタイルガイドからの6桁エクスポート値を優先してください。3桁の短縮形は受け付けられ、変換前に標準CSSの倍化規則で展開されます。#RRGGBBAA のようなアルファ付き形式は渡さないでください—このランディングは不透明な古典hexのみを対象とし、無効な長さは直ちに表面化します。

tomatoのような名前付きCSS色は対象外です。先にhexへ解決するか、名前色テーブルを使ってください。単体テストでは、鮮やかな6桁ケース、3桁展開、ほぼ灰色の入力、意図的な無効hexを少なくとも1つずつ覆い、調和数学と検証の両方を固定してください。

本ページはトライアド配色ジェネレーター、百二十度パレット、無料の3色色相環ツールをオンラインで探す人向けであり、完全な多空間コンバーターでも画像パレット抽出器でも、補色のみやテトラード4色ソルバーでもありません。1つのhexトークンからちょうど3つの等間隔色相が必要なときにこの機能を選び、調和なしでチャンネル分割だけならhex→RGB変換を使ってください。