カラーカラースキームジェネレーター（補色/トライアド/類似色）

カラー スキーム ジェネレーター

色の理論を使用して調和のとれたカラー パレットを生成します。ベースカラーを選択し、調和タイプ（補色、トライアド、類似色、分割補色、テトラディック、または単色）を選択して、バランスの取れたパレットを即座に作成します。視覚的なスウォッチには、16 進数、RGB、HSL の値が表示されます。WCAG コントラスト チェックにより、アクセシビリティが保証されます。CSS カスタム プロパティ、JSON、Tailwind 設定、または SCSS 変数としてエクスポートします。

使用方法

カラー ピッカー、16 進数入力、RGB スライダー、または HSL 値を使用してベースカラーを入力します — すべての入力は自動的に同期されます。調和タイプを選択して、色の理論の数学に基づいて 3 ～ 6 色のパレットを生成します。各カラーは、16 進数、RGB、HSL 値とコピー ボタンを備えた視覚的なスウォッチとして表示されます。白と黒のテキストに対する WCAG コントラスト比を確認します。お好みの形式でパレット全体をエクスポートします。

機能

• 6 つの調和タイプ — 補色 (180°)、トライアド (120°)、類似色 (30°)、分割補色 (150°/210°)、テトラディック/スクエア (90°)、および単色（彩度/明度のバリエーション）。
• 複数のカラー入力 — ネイティブ カラー ピッカー、16 進数 (#RRGGBB)、RGB スライダー、および HSL スライダーはすべてリアルタイムで同期されます。いずれかの入力を変更すると、他のすべての入力が即座に更新されます。
• 視覚的なパレット表示 — 各カラーの 16 進数、RGB、HSL 値を持つ大きなカラー スウォッチ。いずれかの値をワンクリックでコピーできます。
• WCAG コントラスト チェック — 各パレット カラーは、白と黒のテキストに対するコントラスト比を AA/AAA 合格/不合格バッジとともに表示します。カラーの選択がアクセシビリティ基準を満たしていることを確認します。
• 4 つのエクスポート形式 — CSS カスタム プロパティ (:root 変数)、JSON オブジェクト、Tailwind 設定カラー、および SCSS 変数。エクスポート ブロック全体をワンクリックでコピーできます。
• リアルタイム更新 — 入力変更ごとにパレットが即座に再生成されます。生成ボタンは必要ありません。
• HSL ベースの計算 — すべての調和タイプは、数学的に正しい HSL 色相回転を使用し、色の理論的に正確な結果を生成します。

カラー調和タイプ

補色: カラー ホイール上で反対側にある 2 色 (180° 離れている)。高コントラストで鮮やか。用途: コールトゥアクション要素、大胆なデザイン。
トライアド: 均等に配置された 3 色 (120° 離れている)。バランスが取れており、カラフル。用途: イラスト、遊び心のあるデザイン。
類似色: ホイール上で隣接する色 (30° 離れている)。調和が取れており、穏やか。用途: 自然のテーマ、グラデーション、統一感のあるデザイン。
分割補色: ベースカラー + 補色に隣接する 2 色 (150°/210°)。緊張感が少なく、強いコントラスト。用途: 初心者、汎用性の高いパレット。
テトラディック/スクエア: 90° 間隔で配置された 4 色。豊かで多様。用途: 多くの要素を持つ複雑なデザイン。
単色: 彩度と明度が変化する単一の色相。エレガントで統一感がある。用途: ミニマリストデザイン、単一ブランドのテーマ。