CreaTools LogoCreaTools
Tech Notes
Color Palette

HEX・RGB・HSLの違いと使い分け｜私がHSLを使わない理由

2025-09-12

:::note ※色指定形式で迷っている人向けの「判断用」記事です :::

結論（私の判断基準）

  • 基本：HEX。デザイナーとの共有がこれ
  • 透明度：RGB（rgba）。透明度を使うときだけ
  • HSL：ほぼ使わない

私は調整が必要なとき以外、HSLは使わない。「明度を上げれば明るくなる」は理論上正しいが、実際は目で見て調整する。数値を変えて「思ったのと違う」となることが多い。

🚀 色形式の変換 → Color Palette Generator

3つの形式

形式表記例私の使用頻度
HEX#4A90D9ほぼ毎回
RGBrgb(74, 144, 217)透明度を使うときだけ
HSLhsl(210, 64%, 57%)ほぼ使わない

HEX：基本はこれ

color: #4A90D9;

デザインカンプで渡されるのはHEX。Figma、Sketch、XDでも標準。

「この色をもう少し明るく」と言われても数値を見て分からないのは確か。でも、明るくするときはカラーピッカーで調整する。数値を計算しない。

デザイナーとの共有はHEX。これ以外を使う理由がない。

RGB：透明度を使うときだけ

/* 透明度なし */
color: rgb(74, 144, 217);

/* 透明度あり */
background: rgba(74, 144, 217, 0.5);

オーバーレイやシャドウで透明度が必要なときだけRGB。それ以外はHEXで十分。

HSL：私が使わない理由

/* 基本の青 */
color: hsl(210, 64%, 57%);

/* 明るくする: L を上げる */
color: hsl(210, 64%, 75%);

「直感的に調整できる」と言われる。確かに理論上はそう。

でも私は使わない。理由は3つ。

理由1：デザイナーから来るのはHEX

FigmaやXDからエクスポートされるのはHEX。HSLに変換する手間が増える。

理由2：「明度を上げる」は期待通りにならない

L（明度）を上げると白っぽくなる。「明るい青」ではなく「薄い青」になる。結局、目で見て調整する。

理由3：数値の計算が面倒

「明度を10%上げたい」と思っても、57%から67%にしていいのか分からない。結局、カラーピッカーで調整する。

使い分けまとめ

場面私の選択
デザイナーとの共有HEX
CSS変数の定義HEX
透明度を使うRGB
明度・彩度の調整カラーピッカー（HSLは使わない）

迷ったときの判断

迷い私の判断
どの形式を使うかHEX
透明度が必要RGB
色を調整したいカラーピッカーで目視
HSLを使うか使わない

**迷ったらHEX。**それで困ったことはない。

この記事で解決しない場合

HEXで十分。HSLが必要な場面は、15年やってほとんどなかった。