カラーコード変換の基礎知識｜HEX・RGB・HSLの違いと使い分け

Webデザインやプログラミングで必須のカラーコード。

HEX、RGB、HSL...様々な表現方法がありますが、それぞれの違いや使い分けを理解していますか？

この記事では、カラーコードの基礎知識と実践的な活用方法を解説します。

カラーコードとは？

カラーコードは、コンピュータで色を表現するための数値表記です。画面上の色は光の三原色（赤・緑・青）の組み合わせで作られます。

主なカラーコードの種類

形式	表記例	主な用途
HEX	#FF5733	CSS、デザインツール
RGB	rgb(255, 87, 51)	CSS、プログラミング
RGBA	rgba(255, 87, 51, 0.5)	CSS（透明度あり）
HSL	hsl(11, 100%, 60%)	CSS、色調整
HSLA	hsla(11, 100%, 60%, 0.5)	CSS（透明度あり）

HEXカラー（16進数）

最も広く使われるカラーコード形式。#に続く6桁の16進数で色を表現します。

構造

#RRGGBB - RR（赤）、GG（緑）、BB（青）それぞれ00〜FFの値

色	HEXコード	説明
赤	#FF0000	赤が最大、緑と青が0
緑	#00FF00	緑が最大
青	#0000FF	青が最大
白	#FFFFFF	すべて最大
黒	#000000	すべて0

RGBカラー

赤（Red）、緑（Green）、青（Blue）の値を0〜255の10進数で指定します。

構文

rgb(red, green, blue)
rgba(red, green, blue, alpha)

例

色	RGB	RGBA（50%透明）
赤	rgb(255, 0, 0)	rgba(255, 0, 0, 0.5)
オレンジ	rgb(255, 165, 0)	rgba(255, 165, 0, 0.5)

メリット

• JavaScriptで色を計算・操作しやすい
• 透明度（alpha）を簡単に指定できる
• 直感的に色の強さがわかる

HSLカラー

色相（Hue）、彩度（Saturation）、明度（Lightness）で表現。人間の色の認識に近い方式です。

構文

hsl(hue, saturation, lightness)
hsla(hue, saturation, lightness, alpha)

パラメータ

パラメータ	値	説明
Hue（色相）	0〜360	色味（0=赤、120=緑、240=青）
Saturation（彩度）	0〜100%	鮮やかさ（0%=灰色、100%=鮮やか）
Lightness（明度）	0〜100%	明るさ（0%=黒、100%=白）

色相環（Hue）の目安

• 0°：赤
• 30°：オレンジ
• 60°：黄
• 120°：緑
• 180°：シアン
• 240°：青
• 300°：マゼンタ
• 360°：赤（0°と同じ）

変換方法

HEX → RGB

2桁ずつ16進数を10進数に変換します。

例：#FF5733 → FF=255, 57=87, 33=51 → rgb(255, 87, 51)

RGB → HEX

10進数を16進数に変換して連結します。

例：rgb(255, 87, 51) → 255=FF, 87=57, 51=33 → #FF5733

RGB ⇔ HSL

計算式が複雑なため、ツールを使うのが一般的です。

配色のコツ

🎨 コントラスト比を確認

背景色と文字色のコントラスト比は4.5:1以上が推奨（WCAG 2.0）。視認性とアクセシビリティに配慮しましょう。

🎨 補色を活用

色相環で反対の位置にある色（補色）を組み合わせると、インパクトのあるデザインに。

🎨 トーンを揃える

彩度と明度が近い色を組み合わせると、統一感のある配色に。HSLなら調整が簡単です。

🎨 ベースカラーを決める

メインカラー（60%）、サブカラー（30%）、アクセントカラー（10%）の比率を意識しましょう。