developer

HEX・RGB・HSLの違いと変換方法｜CSSカラーコード入門

2026-07-28 公開

CSSの色は、同じ色でもHEX、RGB、HSLなど複数の形式で表せます。どれを使っても表示結果は同じですが、値の読み方と調整しやすい場面が異なります。まず違いを把握し、目的に合う形式へ変換できるようにしましょう。

HEX・RGB・HSLの違い

HEXをRGBへ変換する考え方

6桁HEXは、先頭から2桁ずつ赤・緑・青に分かれます。各組を16進数から10進数へ直すとRGB値になります。

#6366F1
63 → 赤 99
66 → 緑 102
F1 → 青 241

結果: rgb(99, 102, 241)

#FFFのような3桁表記は、各桁を繰り返した#FFFFFFと同じです。透明度を含む場合は、4桁の#RGBAまたは8桁の#RRGGBBAAを使えます。

RGBとHSLを使い分ける

RGBはディスプレイの赤・緑・青に対応するため、個々のチャンネルを直接扱いたい場合に分かりやすい形式です。一方HSLは、色相（Hue）、彩度（Saturation）、明度（Lightness）に分かれています。

• H：0〜360度の色相。赤を起点に色相環を移動する
• S：0%で無彩色、100%で鮮やかな色になる
• L：0%で黒、50%付近で元の色、100%で白になる

ボタンのホバー色や背景の濃淡など、元の色味を保ちながら明るさだけを変えたいときはHSLが便利です。

CSSで透明度を指定する

現在のCSSでは、RGB・HSLのどちらにもスラッシュ区切りで透明度を指定できます。透明度は0で完全に透明、1で不透明です。

.overlay {
  background: rgb(99 102 241 / 40%);
}

.button {
  box-shadow: 0 8px 24px hsl(239 84% 67% / 25%);
}

画面で確認しながら変換する

手計算せず、入力値とプレビューを見ながら相互変換できます。入力内容はブラウザ内で処理され、サーバーへ送信されません。

よくある疑問

大文字と小文字でHEXの色は変わりますか？

変わりません。#6366F1と#6366f1は同じ色です。チーム内で表記を統一すると読みやすくなります。

HEXとRGBではどちらが軽いですか？

通常のWeb制作では、形式の差より画像・フォント・JavaScriptなどの影響の方が大きいため、読みやすさや調整方法で選んで問題ありません。

HSLへ変換すると色が少し違って見えることがありますか？

整数へ丸めたHSL値を使うと、ごく小さな差が出る場合があります。厳密な一致が必要な場面では、変換後のRGB値も確認してください。

参考資料

• MDN: <color>
• MDN: rgb()
• MDN: hsl()