カラーホイールツールは、カラーホイール上の幾何学的な関係を適用してベースカラーから調和のとれたカラーパレットを生成します。hex 値を入力するかホイールをドラッグしてベースカラーを選択し、9 種類のコンビネーションモードから一つ選ぶと、2〜5 色の hex コードと最も近い Tailwind CSS クラス名が表示されてコピーできます。
コンビネーションモードの選び方
カラーホイールはすべての色相を円形に並べたもので、異なる幾何学的関係が異なる視覚的な緊張感を生み出します。
コントラスト型パレット
- 補色 — 真反対の 2 色、最大のコントラスト。CTA ボタンや注目要素に最適
- 分裂補色 — ベースカラーと補色の両隣の 2 色。純粋な補色より穏やかなコントラスト
- 二重分裂補色 — 分裂補色ペアを 2 組、計 5 色。複雑な多要素レイアウト向け
ハーモニー型パレット
- 類似色 — 隣接する 3〜5 色相。柔らかく自然なトランジション、背景やグラデーションに最適
- モノクロマティック — 同じ色相の異なる明度・彩度。ミニマルで統一感のある印象
- コンパウンド — 補色の拡張バリアント、より多くの色相レイヤーを持つ
バランス型マルチカラー: トライアド（等間隔 3 色）、テトラディック（長方形 4 色）、スクエア（等間隔 4 色）はブランドビジュアル・インフォグラフィック・データビジュアライゼーションで多様性が必要な場合に使えます。
プライマリ・セカンダリ・アクセントのバランス
マルチカラーパレットは各色に明確な役割があると機能します。一般的なアプローチ：プライマリカラーが面積の 60%（大きな背景、メインコンテンツ）、セカンダリが 30%（カード・サイドバー・サブ要素）、アクセントが 10%（ボタン・バッジ・CTA）。すべての色を同じ比重で使うと視覚的なノイズが生まれます。アクセントカラーには通常、コントラスト型パレットの高彩度色を使います。
生成されたパレットを使用前に調整する
ホイールが生成するのは理論上のベースカラーです。実際には明度の調整（背景を明るく、テキストを暗く）と彩度の調整（ブランドカラーは鮮やかに保ち、ニュートラルな部分は彩度を下げる）が必要になることが多いです。生成されたパレットは最終案ではなく出発点として扱ってください。
デザインツールへの色のコピー
生成されたパレットの任意のカラースウォッチをクリックすると hex コードがコピーされます。Figma・Sketch・Adobe XD のカラーピッカーに直接貼り付けられます。表示される Tailwind クラス名（rose-400、sky-600 など）は、プロジェクトで任意値を使いたくない場合に最も近い Tailwind 組み込みカラーを見つけるのに役立ちます。