1色、すべてのコード
色を視覚的に選び、色相と不透明度を調整して、CSSに貼れるHEX・RGB・HSLコードを取得。値をクリックでコピー。
-
色相を設定
虹色スライダーで基本色を選択。
-
フィールドで微調整
横が彩度、縦が明度。
-
コードをコピー
HEX・RGB・HSL、必要なら不透明度付き。
例：鮮やかなオレンジ
| 形式 | 値 |
|---|---|
| HEX | #FF8800 |
| RGB | rgb(255, 136, 0) |
| HSL | hsl(32, 100%, 50%) |
標準sRGB変換、整数に丸め。すべてブラウザ内で計算。
よくある質問
カラーフィールドの仕組みは？
大きな正方形は、スライダーで選んだ色相に対する彩度（左→右）と明度（下→上）を表します。クリックまたはドラッグで選択し、HEX/RGB/HSL表示がリアルタイム更新。
HEX・RGB・HSLの違いは？
HEXは簡潔な16進コード（#FF8800）。RGBは赤・緑・青の成分（rgb(255, 136, 0)）。HSLは色相・彩度・明度（hsl(32, 100%, 50%)）で、色合いの調整に直感的です。
不透明度は何のため？
透明度（アルファ）を制御します。100%未満ではコードが rgba()/hsla() になり、HEXは2文字増えます（例 #FF8800CC）。重ね合わせや影に便利。
ウェブで正確な色？
はい。値は標準sRGB変換で計算し整数に丸めます。CSSに合う形式をコピーしてください。すべてローカル計算で、何も送信しません。