HEX・RGB・HSLを相互に変換します。デザインツールとCSSで表記が違うときや、色を少しだけ明るくしたいときに使えます。
3つの表記の違い
HEXとRGBは同じ情報を別の書き方で表しているだけです。HSLは色の調整に向いており、「同じ色相のまま明度だけ下げる」といった操作が直感的にできます。
| 表記 | 例 | 特徴 |
|---|---|---|
| HEX | #2fa35a | Webでもっとも一般的。RGBを16進数で表したもの |
| RGB | rgb(47, 163, 90) | 光の三原色の強さ。0〜255で指定 |
| HSL | hsl(145, 55%, 41%) | 色相・彩度・明度。色を調整しやすい |
HSLが便利な理由
ボタンのホバー色を作るとき、HEXのまま調整すると勘に頼ることになります。HSLなら、明度（L）を10%下げるだけで自然に濃い色が作れます。同系色のパレットを作るときも、色相を固定して彩度・明度を変える方法が使えます。
透明度の指定
8桁HEXの末尾は00（完全透明）〜FF（不透明）です。80はおよそ50%にあたります。
#2fa35a80 → 8桁HEX（末尾2桁が不透明度） rgba(47, 163, 90, 0.5) hsla(145, 55%, 41%, 0.5)
よくある質問
Q HEXとRGBは何が違いますか？
同じ色情報の書き方の違いです。HEXは16進数、RGBは10進数で表しています。
Q HSLはどんなときに使いますか？
色相を保ったまま明度や彩度を調整したいときに便利です。ホバー色や配色のバリエーション作成に向いています。
Q 透明度も変換できますか？
8桁HEXとrgba/hslaの相互変換に対応しています。末尾の2桁が不透明度です。
Q 3桁のHEXは使えますか？
使えます。#2a5 は #22aa55 と同じ意味です。