カラーコードの形式
| 形式 | 例 | 説明 |
|---|---|---|
| HEX（16進数） | #ff8800 | 赤・緑・青を 00〜ff の2桁ずつで表す。#f80 のような3桁の省略形もある |
| RGB | rgb(255, 136, 0) | 赤・緑・青を 0〜255 の数値で表す |
| HSL | hsl(32, 100%, 50%) | 色相（0〜360°）・彩度・明度で表す。明るさだけ変えた色を作りやすい |
| 透明度付き | #ff880080 / rgba(255, 136, 0, 0.5) | 末尾に透明度（アルファ値）を加える |
HSLが便利な理由
HEX や RGB は、少し明るくしたい・少しくすませたいといった調整が直感的にできません。HSL なら色相（H）を固定したまま明度（L）だけを上げ下げすれば、同じ色味の明るい色・暗い色を作れます。ボタンのホバー色や、デザインシステムの色の段階を作るときに便利です。
コントラスト比とは
文字と背景の明るさの差を表す数値で、1:1（同じ色）〜21:1（白と黒）の範囲になります。Web アクセシビリティの基準 WCAG 2.1 では、通常の文字は 4.5:1 以上（AA）、大きな文字は 3:1 以上が推奨されています。このツールでは、選んだ色を文字色にしたときの白背景・黒背景とのコントラスト比を表示します。
よくある質問
大文字と小文字（#FF8800 と #ff8800）に違いはありますか？
ありません。どちらも同じ色です。CSS ではどちらで書いても構いませんが、プロジェクト内で統一すると読みやすくなります。
Photoshop や Figma の色と少し違って見えます
画面の色空間（sRGB・Display P3 など）やカラープロファイルの設定によって、同じ数値でも見え方が変わることがあります。このツールは Web 標準の sRGB として計算しています。
HSL から変換すると、元の値と1ずれることがあります
HSL と RGB は計算の途中で小数を丸めるため、相互に変換すると ±1 程度ずれることがあります。見た目にはほとんど差はありません。