カラーピッカー（HEX、RGB、HSL、OKLCH）
彩度・明度の正方形で色を選ぶか、HEX、RGB、HSL、OKLCHを入力します。全形式が連動し、ティント／シェードスケール、スポイト（Chromium）、CSSとJSON向けの書き出し可能なパレットがあります。
色の選択と書き出し方法
1. 色の正方形と色相スライダーをドラッグするか、HEX/RGB/HSL/OKLCH値を貼ります。
2. サマリーバーで連動したHEX、RGB、HSL、OKLCHを読みます。
3. シェードやハーモニースウォッチをクリックして関連色を探します。
4. 値をコピーし、共有可能な ?hex= リンクをコピーするか、CSS変数／JSONを書き出します。
カラーピッカーの例
ブランドのテラコッタ #8F665E
HSVピッカーはホバー用に暗くしても色相を保ちます。デザイントークンファイル向けに --color と --shade-* をCSS変数として書き出します。
類似色のダッシュボードパレット
Analogousを選ぶと色相 ±30° と ±60° が得られます。同一ではなく関連して見えるチャートとカード向けに、ストリップをCSSカスタムプロパティとしてコピーします。
均等ステップのOKLCH
シェードランプはOKLCHの明度を変えるので、HEXを白と混ぜるよりステップが均等に見えます。知覚的なランプが必要なときは現代のCSSで oklch() を使います。
このツールを使うとき
• UIの色を選び、HEX、RGB、HSL、OKLCHが一度に必要なとき。
• 1つのブランド色相からホバー／ミュートのシェードを生成したいとき。
• 小さなパレット（ハーモニー＋ランプ）をCSS変数に書き出したいとき。
UIパレットのハーモニー
補色は180°離れます——強いコントラストなので、CTAには控えめに。類似色相（±30〜60°）はダッシュボードにまとまりがあります。三色配色と四色配色は変化が増えます。追加色の彩度を落としてプライマリが主導するようにします。テキスト色を出荷する前に、どのスキームもWCAGコントラストチェッカーと組み合わせてください。
よくある質問
HEXとRGBとHSLとOKLCHの違いは？
HEXとRGBは同じsRGB色です。HSLは色相／明度の調整に便利です。OKLCHは知覚空間で、近いLステップが目により均等に見え、現代のCSSでは oklch() として有効です。
スポイトはすべてのブラウザで動きますか？
EyeDropper APIはChromium系（Chrome、Edge）で利用できます。それ以外では値を入力するか視覚ピッカーを使います。
色を共有できますか？
できます。URLは ?hex=RRGGBB で更新されます。リンクをコピーすると同じ色を再開できます。
色はサーバーで処理されますか？
いいえ。変換、ハーモニー、書き出しはブラウザ内でローカルに実行されます。