カラーコード完全ガイド - HEX・RGB・HSLの違いと使い分け

Webサイトやアプリのデザインにおいて、色の指定は欠かせない作業です。CSSで色を指定する方法にはHEX、RGB、HSLなど複数の形式があり、それぞれに特徴と適した使い方があります。この記事では、各カラーコードの仕組みと違い、実際のCSSでの使い方まで詳しく解説します。

Webで使われるカラーコードの種類

Webで色を指定する方法は主に以下の4種類があります。

形式	記述例	特徴
カラーネーム	`red`, `blue`	英語名で直感的。約140色が定義済み
HEX	`#ff6600`	最も広く使われる。16進数で表現
RGB	`rgb(255, 102, 0)`	光の三原色。0〜255の整数で指定
HSL	`hsl(24, 100%, 50%)`	人間の感覚に近い。色の調整が直感的

それぞれ同じ色を表現できますが、用途や状況によって使い分けると効率的です。

HEXカラーコードの仕組み

HEX（ヘックス）は16進数（Hexadecimal）の略で、#記号に続く6桁の16進数で色を表現します。

構造

#RRGGBB

R（赤）: 00〜FF
G（緑）: 00〜FF
B（青）: 00〜FF

例: #FF6600
  FF = 赤 (255)
  66 = 緑 (102)
  00 = 青 (0)
  → オレンジ色

16進数では0〜9の数字とA〜Fのアルファベットを使い、00（0）からFF（255）の256段階で各色の強さを表します。

短縮形

各色が同じ文字の繰り返しの場合、3桁に短縮できます。

#FF6600 → #F60
#FFFFFF → #FFF（白）
#000000 → #000（黒）
#CC3399 → #C39

8桁HEX（透明度付き）

末尾に2桁を追加することで、透明度（アルファ値）も指定できます。

#FF660080
         ↑ アルファ値（80 = 約50%の不透明度）

RGBの仕組み

RGB（アールジービー）は、光の三原色である赤（Red）、緑（Green）、青（Blue）の組み合わせで色を表現します。各色を0〜255の整数値で指定します。

rgb(255, 0, 0)     → 赤（赤が最大、緑と青が0）
rgb(0, 255, 0)     → 緑
rgb(0, 0, 255)     → 青
rgb(255, 255, 0)   → 黄色（赤+緑）
rgb(255, 255, 255) → 白（すべて最大）
rgb(0, 0, 0)       → 黒（すべて0）

RGBA（透明度付き）

RGBにアルファ値（透明度）を加えたのがRGBAです。アルファ値は0（完全に透明）から1（完全に不透明）の範囲で指定します。

rgba(255, 102, 0, 0.5)  → 50%の不透明度のオレンジ
rgba(0, 0, 0, 0.3)      → 30%の不透明度の黒（薄い影に便利）

半透明のオーバーレイや影の表現によく使われます。

HSLの仕組み

HSL（エイチエスエル）は、色相（Hue）、彩度（Saturation）、明度（Lightness）の3つの要素で色を指定します。人間の色の認識に最も近い表現方法です。

色相（Hue）: 0〜360度

色相は色の種類を角度（0〜360度）で表します。色相環をイメージすると理解しやすいです。

0°（360°） → 赤
60°         → 黄色
120°        → 緑
180°        → シアン
240°        → 青
300°        → マゼンタ

彩度（Saturation）: 0〜100%

色の鮮やかさを表します。100%が最も鮮やかで、0%はグレーになります。

明度（Lightness）: 0〜100%

色の明るさを表します。0%は黒、50%が純色、100%は白になります。

hsl(0, 100%, 50%)   → 純粋な赤
hsl(0, 100%, 75%)   → 明るい赤（ピンクっぽい）
hsl(0, 100%, 25%)   → 暗い赤
hsl(0, 50%, 50%)    → くすんだ赤
hsl(0, 0%, 50%)     → グレー

HSLの大きな利点は、色の調整が直感的であることです。「もう少し明るく」なら明度を上げ、「もう少し鮮やかに」なら彩度を上げるだけです。RGBやHEXでは同じ調整をするのが難しく、HSLが配色作業に適している理由です。

CSSでの使い方

CSSではすべての形式が使用可能です。以下に実際のコード例を示します。

/* カラーネーム */
.element { color: tomato; }

/* HEX */
.element { color: #ff6347; }

/* HEX短縮形 */
.element { background: #f00; }

/* RGB */
.element { color: rgb(255, 99, 71); }

/* RGBA（透明度付き） */
.overlay { background: rgba(0, 0, 0, 0.5); }

/* HSL */
.element { color: hsl(9, 100%, 64%); }

/* HSLA（透明度付き） */
.element { color: hsla(9, 100%, 64%, 0.8); }

/* 最新のCSS記法（スペース区切り） */
.element { color: rgb(255 99 71 / 0.8); }
.element { color: hsl(9 100% 64% / 0.8); }

使い分けの指針

HEX - デザインツールからのコピペ、色の共有に便利。最も一般的
RGB/RGBA - 透明度を使いたい場面。JavaScriptで色を動的に変更する場合
HSL/HSLA - 配色を調整する場面。同系色のバリエーションを作る場合

配色のコツ

メインカラーの選び方

サイトの印象を決めるメインカラーは1〜2色に絞りましょう。色が多すぎるとごちゃごちゃした印象になります。

HSLを活用した同系色の作り方

HSLを使えば、メインカラーから統一感のある配色を簡単に作れます。

/* メインカラー */
--primary: hsl(220, 80%, 50%);

/* 明るいバリエーション（明度を上げる） */
--primary-light: hsl(220, 80%, 70%);

/* 暗いバリエーション（明度を下げる） */
--primary-dark: hsl(220, 80%, 35%);

/* 薄いバリエーション（彩度を下げる） */
--primary-muted: hsl(220, 30%, 60%);

コントラスト比に注意

文字色と背景色のコントラスト比は、アクセシビリティ基準（WCAG）で4.5:1以上が推奨されています。薄い色の背景に薄い色の文字を置くと読みにくくなるため注意しましょう。

カラーコードを変換してみましょう

カラーコード変換ツールを使ってみる

まとめ

カラーコードには複数の形式がありますが、それぞれに適した場面があります。HEXは汎用的に使え、RGBは透明度の制御に便利、HSLは配色の調整に最適です。

まずはHEXとRGBの基本を押さえた上で、配色作業ではHSLを活用してみてください。当サイトのカラーコード変換ツールを使えば、3つの形式を瞬時に相互変換できますので、ぜひ試してみてください。