使い方
- 入力欄にカラーコードを貼り付けるか、カラーピッカーで色を選びます。
- HEX・RGB・HSL の各形式が表示されます。「コピー」でCSSにそのまま貼れる形式を取り出せます。
- 下の明るさのバリエーションから、ホバー色や背景色の候補を選べます。
こんなときに
- デザインカンプのHEXをCSSの rgb() や hsl() に書き換える
- ブランドカラーから、少し明るい・暗いアクセント色を作る
- 背景色に対して黒と白のどちらの文字が読みやすいか確認する
よくある質問
HEX・RGB・HSLはどう使い分けますか？
HEX（#FF6600）はWebやデザインツールで最も一般的な表記です。RGBは赤・緑・青の量で色を指定し、HSLは色相・彩度・明度で指定するため「同じ色味で少し暗く」のような調整がしやすいです。
3桁のHEX（#F60）も使えますか？
使えます。#F60は#FF6600と同じ色です。各桁を2回繰り返した6桁として扱います。
透明度（アルファ）には対応していますか？
このツールは不透明な色の変換に対応しています。rgba() や8桁HEXを入力した場合、透明度は無視して色だけを変換します。