🎨 カラーピッカー

カラーピッカーについて

このカラーピッカーはブラウザ内で完全に動作します。ネイティブのカラーコントロールで視覚的に色を選ぶか、HEX・RGB・HSLの値を直接入力してください。すべての欄が同期します。一般的な配色（補色・類似色・トリアディック）も計算するので、パレットを素早く作れます。

HEX、RGB、HSLの違いとは

HEXは色を6桁の16進数文字列で表します（例：#0ea5e9）。各2桁が赤・緑・青のチャンネル（0〜255）を表します。RGBは同じ3つのチャンネルを10進数で表します（例：rgb(14, 165, 233)）。HEXもRGBも、画面に表示される色そのものを表します。

HSLは色を色相（カラーホイール上の0〜360°）、彩度（0〜100%、色の強さ）、輝度（0〜100%、明るさ）で表します。デザイナーはHSLを好むことが多いです。1つのプロパティだけ調整する（例：色を明るくする）のが直感的で予測しやすいためです。

配色とは

配色は、カラーホイール上で固定角度の位置にある色の組み合わせで、一緒に見ると調和します。補色は180°離れており、最大のコントラストを生みます。類似色は両側に30°の位置にあり、調和の取れた落ち着いた印象になります。トリアディックは120°離れており、バランスの取れた鮮やかなパレットになります。

使い方

1. ネイティブのカラースウォッチをクリックしてシステムのカラーピッカーを開くか、任意の欄に値を入力します。
2. HEX、RGB、HSLの入力はリアルタイムで相互更新されます。
3. 配色スウォッチをクリックすると、その色が現在の色になります。
4. コピーボタンを使って、必要な形式で現在の色をコピーします。

よくある質問

色はどこかにアップロードされますか？ いいえ。すべてブラウザ内で完結します。

#abc のような3桁のHEXを入力できますか？ 本ツールは6桁のHEXを前提としています。略記は完全な6桁に展開してください。

HSLの値が他のツールと少し違うのはなぜですか？ HSLは同じRGB数値から計算されますが、整数への丸めにより色相・彩度・輝度で±1の差が出ることがあります。