カラーパレット生成
HEX色1つを入力すると、色彩理論に基づく5つの調和パレットを自動生成します。デザインシステム·ブランドカラー·イラスト配色決定に。
CSS変数
使い方
1
ベース色を選択
カラーピッカーかHEX入力で基準色を決定。それを中心にすべてのパレットが自動計算されます。
2
調和モードを選択
補色(180°)·類似色(±30°)·トライアド(120°)·テトラード(90°)·モノクローム(明度変化)から選択。HSLカラーホイールベースの正確な回転計算。
3
コピー·使用
各カラーカードをクリックでHEXがコピーされ、下部の「CSS変数コピー」でパレット全体を一括取得。
よくある質問
「調和」とは？
色彩理論では「カラーホイール」上で一定の角度関係にある色が視覚的に調和して見えるという原則です。本ツールはHSL色空間のHueを回転させて各モードを作ります。
5つのモードの違い?
補色(180°反対)は強烈なコントラスト、類似色(±30°)は柔らかな連続感、トライアド(120°)はバランスの取れた活発さ、テトラード(90°)は4色の華やかさ、モノクロームは同じhueの明度変化で抑制された一貫性。
HSL回転がRGB平均より良い理由?
HSLは人間の色覚により近く設計されており、「同程度の明度·彩度」を保ったままhueのみ回転できます。RGBの単純平均はコントラストが不自然になったり彩度が下がる場合が多いです。
実務での使い方?
CSS変数形式(`--color-primary: #...`)でコピーしてデザイントークンとしてすぐ使うか、Figma·Adobe XDにHEXを直接貼り付け。ただしアクセシビリティ(WCAGコントラスト)は別途検証必要(本サイトの「WCAGコントラストチェッカー」参照)。
サーバーに送信されますか?
いいえ。すべての変換はブラウザ内で行われ、入力値が外部に送信されることはありません。
