カラーコード変換
色を選ぶ／HEXを入力すると、HEX・RGB・HSLを同時表示します。
- HEX
- -
- RGB
- -
- HSL
- -
🐾 入力内容はブラウザ内で処理され、サーバーには送信されません
使い方
- 左側の色の四角（カラーピッカー）をクリックして色を選ぶか、「HEX」欄にカラーコードを入力します（例：
#f59e0b）。 - 6桁のほか、3桁の短縮形（例：
#fa0）も使えます。先頭の「#」は省略してもかまいません。 - 結果欄にHEX・RGB・HSLの3形式が表示され、右側のプレビューにその色が映ります。
入力の途中や、桁数が3桁・6桁以外のとき、0〜9・A〜F以外の文字が含まれるときは結果が更新されず、直前の色が表示されたままになります。表示が変わらない場合は入力を見直してください。
変換のルール
HEXは、赤・緑・青の強さをそれぞれ2桁の16進数（00〜FF、10進数で0〜255）で並べた書き方です。RGBはその3つの値を10進数で表したもので、HEXを2桁ずつ区切って変換すると求められます。
#F59E0B → F5＝245、9E＝158、0B＝11 → rgb(245, 158, 11)
HSLは色を「色相（H：0〜360度）」「彩度（S：0〜100%）」「明度（L：0〜100%）」で表す方式です。RGBの最大値と最小値から明度と彩度を、どの色が最も強いかから色相を計算しています。各値は整数に四捨五入して表示します。
| 入力 | HEX | RGB | HSL |
|---|---|---|---|
| #f59e0b | #F59E0B | rgb(245, 158, 11) | hsl(38, 92%, 50%) |
| #fa0 | #FFAA00 | rgb(255, 170, 0) | hsl(40, 100%, 50%) |
3桁の短縮形は各桁を2回繰り返した6桁として扱います。「#fa0」は「#ffaa00」と同じ色です。HEXの結果は大文字で表示されます。
こんなときに便利
- デザインツールで見つけたHEXコードを、CSSの
rgb()やhsl()で書き直したいとき - HSLの明度だけを変えて、同じ色味の濃淡を作る準備をしたいとき
- 資料やサイトの配色を決める前に、カラーコードが実際にどんな色かプレビューで確かめたいとき
- 短縮形のHEXを6桁の正式な形にそろえたいとき
よくある質問
RGBやHSLの値を入力してHEXに変換できますか？
できません。入力できるのはカラーピッカーとHEXの2つだけです。RGBやHSLは結果として表示される専用の欄です。
透明度（アルファ値）付きの8桁HEXは使えますか？
対応していません。「#RRGGBBAA」のような8桁や、4桁の短縮形を入力しても結果は更新されません。透明度を除いた6桁または3桁で入力してください。
HSLからRGBに戻すと、元の値と少しずれるのはなぜですか？
HSLの各値は整数に四捨五入して表示しているため、そこから逆算すると1程度の誤差が出ることがあります。正確な色を指定したい場合は、HEXかRGBの値を使ってください。
入力したカラーコードはサーバーに送信されますか？
送信されません。変換はすべてお使いのブラウザの中で行われ、入力内容が保存されることもありません。