色をHEX、RGB、HSLの間で変換する
公開日 · 更新日 読了目安 2分
HEX、RGB、HSLは、同じ色を3つの方法で表します。ツールは3つを同時に表示し、一般的な書き方を受け付けます。HSLが整数に丸められることが、HEXに戻したときの1段階のずれの理由です。
同じ色の3つの書き方
色を探して変換は、既定で3つの形式すべてを、色のプレビューとともに表示します。緑の#2F4A3Fの場合:
| 形式 | 結果 |
|---|---|
| HEX | #2f4a3f |
| RGB | rgb(47, 74, 63) |
| HSL | hsl(156, 22%, 24%) |
パネルのHEX、RGB、HSLの3つのボタンで、結果を1つの形式だけに絞れます。そのままコピーするのに便利です。
受け付ける書き方
| 書き方 | 例 | HEXの結果 |
|---|---|---|
| 短いHEX | #fff | #ffffff |
| 透明付きHEX | #2F4A3F80 | #2f4a3f80 |
| カンマ区切りのRGB | rgb(47, 74, 63) | #2f4a3f |
| スペース区切りのRGB | rgb(47 74 63) | #2f4a3f |
| パーセントのRGB | rgb(100%, 0%, 0%) | #ff0000 |
| スペース区切りのHSL | hsl(156 22% 24%) | #304b40 |
「rouge」のような色名や、rgb(300, 0, 0)のように0〜255の範囲外のチャンネルは断られ、受け付ける書き方を列挙したメッセージが出ます。
透明
透明は、HEXでは8桁で、またはスペース区切りのあとにスラッシュを付けて書きます。色rgb(47 74 63 / 50%)は、HEXで#2f4a3f80、RGBでrgba(47, 74, 63, 0.5)になります。逆に、#2F4A3F80の不透明度は0.502になります。16進数の80は、255のうちの128だからです。
往復すると1段階変わる理由
HSLは整数で表示されます。色相は度、彩度と明度はパーセントです。そのため、HSLからHEXに戻すと、出発点の色ではなく隣の色に着地します。
| 出発点 | 表示されるHSL | HEXに戻す |
|---|---|---|
| #2F4A3F | hsl(156, 22%, 24%) | #304b40 |
| #B5532E | hsl(16, 59%, 45%) | #b6532f |
ずれは各チャンネルで1段階で、目には見えません。デザイントークンやブランドカラーでは、元のHEXを基準として保ち、もうHSLを経由しないでください。
グレー
グレーは彩度がゼロで、色相は意味を持ちません。#808080はrgb(128, 128, 128)とhsl(0, 0%, 50%)になります。
ツールが測らないもの
形式の変換は、読みやすさについて何も教えてくれません。ツールは、文字と背景のコントラストを計算しません。公開する前に別途確かめてください。コントラストが読み取りやすさを決めるQRコードの場合は、一度で読み取れるQRコードを作るで扱っています。
変換を確認する
- 色を欄に貼り付けます。プレビューが期待どおりでなければなりません。
- お使いのシステムが求める形式をコピーします。
- 正確な色を保つには、HSLではなくHEXかRGBを保存します。