配色ジェネレーター

1. カラーピッカーまたはHEX欄へベースカラーを指定します。
2. 補色・類似色・トライアドなど8種類から配色パターンを選びます。
3. 色見本または明度バリエーションを押すと、表示中のHEX値をコピーできます。
4. CSS変数、Tailwind CSS v4 / v3、HEXリストから必要な形式を選んでコピーします。

入力、配色計算、コード生成はブラウザ内で行われ、このツールから色データをサーバーへ保存しません。不正なHEXを入力した場合は直前の有効色を保持し、誤って旧結果をコピーしないようコピー操作を無効にします。

このツールはRGBを整数のHSLへ変換し、色相を回転して候補色を生成します。整数へ丸めるため、表示値には数単位の差が出る場合があります。

• 補色：ベースから色相を180度回転した2色です。
• 類似色：ベースの前後30度を含む3色です。
• トライアド：ベース、+120度、+240度の3色です。
• 分裂補色：ベース、+150度、+210度の3色です。
• スクエア：ベースから90度間隔に並べる4色です。
• モノクロマティック：ベースの色相と彩度を保ち、ベース明度を中心に明暗を付ける5色です。

彩度0%の白・黒・グレーでは色相差が見た目に表れないため、補色・類似色などが同じ無彩色になる場合があります。色相配色を確認する場合は彩度のあるベースカラーを使用してください。

暖色系は0〜60度、寒色系は180〜270度の固定色相へ、ベースカラーの彩度と明度を反映して5色を生成します。ベース色の色相を回転する配色ではなく、暖色または寒色の候補をまとめて確認するためのモードです。

各パレット色には、HSL明度を+30、+15、±0、-15、-30した5段階の明度バリエーションを明るい順で表示します。0%未満または100%を超える値は範囲内へ収めるため、白や黒に近い色では同じHEXが複数並ぶ場合があります。

見た目の印象や読みやすさは使用面積、周囲の色、文字サイズなどでも変わります。ハーモニープレビューは簡易見本であり、実際の画面ではコントラストや状態色も個別に確認してください。

CSS変数は--palette-color-1から始まる宣言を出力します。:rootなど利用するセレクタの中へ貼り付けてください。

Tailwind CSS v4は、公式のtheme variable方式に合わせた@themeと--color-palette-*を出力します。Tailwind CSS v3はtailwind.config.jsのtheme.extend.colorsへ配置できるオブジェクト断片を別タブで出力します。利用中のメジャーバージョンに合う形式を選んでください。