カラーパレットジェネレーター
任意のベースカラーから補色・類似色・トライアド・テトラッドパレットを生成。HEX入力またはカラーピッカーで4種類の調和カラーパレットを即時プレビュー。単色コピーまたはパレット全HEX値コピー対応。完全ブラウザ完結。
使い方
- 入力フィールドにHEX値（例：
#3b82f6）を入力するか、カラーピッカーでベースカラーを選択します。 - 4種類のパレット（補色・類似色・トライアド・テトラッド）が即座に更新されます。
- 任意のスウォッチをクリックしてHEX値をコピーします。
- カード右上のすべてコピーボタンで、そのスキームの全HEX値をコピーします。
カラーハーモニーの種類
補色（Complementary）
色相環で180°反対側に位置する2色。高コントラストで視覚的インパクトが強く、CTAボタンやアクセントに最適です。
類似色（Analogous）
ベースカラーの左右±30°にある3色。自然でまとまりのある配色。自然をモチーフにしたデザインや読みやすいUIに適しています。
トライアド（Triadic）
色相環を120°間隔で3等分した3色。バランスと活気を両立。遊び心のあるブランドや多彩なデザインに向いています。
テトラッド（Tetradic / Square）
色相環を90°間隔で4等分した4色。最も色数が多く豊かな表現が可能。1色をメインにして残りをアクセントとして使うのが一般的です。
HSLカラーモデル
- 色相（H）：色相環上の角度（0–360°）。赤=0°、緑=120°、青=240°。
- 彩度（S）：色の鮮やかさ。0%=グレー、100%=最高彩度。
- 明度（L）：0%=黒、50%=純色、100%=白。
関連ツール
- カラーコンバーター — HEX・RGB・HSL形式を相互変換
- カラーシェード生成器 — ベースカラーから10段階シェードを生成
- CSSグラデーションジェネレーター — 線形・放射状・コニックグラデーションを生成
FAQ
生成できるカラーパレットの種類は？
HSL色相環に基づく4種類のカラーハーモニーを生成します：補色（基本色+180°）、類似色（±30°隣接）、トライアド（120°間隔の3色）、テトラッド（90°間隔の4色）。すべての色はベースカラーと同じ彩度・明度を保持し、統一感のあるパレットを生成します。
入力できる色の形式は？
テキストフィールドに6桁のHEX値（例：#ff5500）を直接入力できます。内蔵カラーピッカーで視覚的に色を選択することもできます。リアルタイムで更新されるためEnterキーは不要です。
色のコピー方法は？
各色スウォッチをクリックするとそのHEX値がクリップボードにコピーされます。各パレットカードの右上にある「すべてコピー」ボタンで、そのスキームの全HEX値をスペース区切りでコピーできます（例：#ff5500 #0055ff）。
なぜすべての色の明度が同じなのですか？
彩度（S）と明度（L）を固定して色相（H）を回転させる方法は、カラーハーモニー生成の標準的なアプローチです。これによりすべての色が視覚的にバランスよく見えます。同一色の明暗バリエーションが必要な場合はカラーシェード生成器をご利用ください。
ツールは完全にクライアントサイドですか？
はい。すべての色計算はJavaScriptによりブラウザ内で実行されます。サーバーへのデータ送信は一切ありません。