RGB・HEX・HSLの違いとは？カラーコードの仕組みをわかりやすく解説

Webサイトを作っていると、 #ff0000、rgb(255, 0, 0)、hsl(0, 100%, 50%) といった色の指定を目にすることがあります。

これらはすべて色を表すための方法ですが、数字の意味や色の表現方法はそれぞれ異なります。 特にWebデザインでは、RGB・HEX・HSLの3つを理解しておくと、CSSで色を指定するときやカラーコードを扱うときに便利です。

この記事では、RGB・HEX・HSLがそれぞれ何を意味するのか、どのような違いがあるのか、同じ色を3つの方法で表すとどうなるのかを初心者向けにわかりやすく解説します。

RGB・HEX・HSLとは？

RGB・HEX・HSLは、コンピューターやWebサイト上で色を指定するための代表的な方法です。 ただし、3つは同じ仕組みではありません。

RGBは、赤・緑・青の3色の強さを組み合わせて色を表現します。 HEXは、RGBの各値を16進数で表したカラーコードです。 HSLは、色相・彩度・明度という3つの要素を使って色を表します。

つまり、RGBとHEXは表現方法として非常に近い関係にありますが、HSLは色を捉える考え方が異なります。

RGBとは？

RGBは、Red（赤）・Green（緑）・Blue（青）の3つの光の強さを組み合わせて色を表現する方式です。 パソコンやスマートフォンのディスプレイは、基本的にこの3色の光を組み合わせてさまざまな色を表示しています。

RGBの数値

一般的なRGBカラーでは、それぞれの色を0～255の数値で指定します。

例えば、赤は次のように表します。

rgb(255, 0, 0)

これは、

• R（赤）＝255
• G（緑）＝0
• B（青）＝0

という意味です。 赤の成分が最大で、緑と青が0なので、赤色になります。

RGBで白と黒を表す

RGBでは、3つの値をすべて最大にすると白になります。

rgb(255, 255, 255)

反対に、3つの値をすべて0にすると黒になります。

rgb(0, 0, 0)

RGBの特徴

• 赤・緑・青の3色で色を指定する
• 一般的なRGBでは各値が0～255
• ディスプレイで表示する色との相性が良い
• CSSで直接指定できる
• 画像編集ソフトなどでも広く利用されている

HEXとは？

HEXは、Webデザインで非常によく使われる16進数によるカラーコードです。 「HEX」はHexadecimal（16進数）に由来します。

例えば、赤色は次のように表します。

#FF0000

このカラーコードは、RGBの

rgb(255, 0, 0)

と同じ赤色を表しています。

HEXカラーコードの仕組み

一般的な6桁のHEXカラーコードでは、 赤・緑・青の順番で、それぞれ2桁ずつ使用します。

#RRGGBB

例えば、

#FF6600

の場合、

• FF → 赤
• 66 → 緑
• 00 → 青

という構成になっています。

なぜ16進数を使うの？

コンピューターでは色の情報を数値として扱います。 RGBの0～255という値は、16進数では00～FFで表すことができます。

そのため、RGBの値を2桁の16進数に変換すると、6桁のHEXカラーコードとして表現できます。

3桁のHEXカラーコード

HEXには6桁だけでなく、3桁で表現する方法もあります。

#F00

これは、

#FF0000

と同じ赤色を表します。 ただし、3桁で表現できるのは各桁を2回繰り返した6桁のHEXカラーコードに対応する場合です。

HSLとは？

HSLは、Hue（色相）・Saturation（彩度）・Lightness（明度）の3つの要素を使って色を表現する方式です。

RGBのように赤・緑・青の強さを直接指定するのではなく、 「何色なのか」 「どれくらい鮮やかなのか」 「どれくらい明るいのか」 という感覚に近い形で色を指定できます。

H = Hue（色相）

Hueは色相を表します。 色相は0～360度の角度で指定するのが一般的です。

S = Saturation（彩度）

Saturationは彩度です。 色がどれくらい鮮やかであるかを表します。 一般的なHSLでは0～100%で指定します。

彩度が0%の場合は色味がなくなり、グレーになります。 100%に近づくほど、その色相の色が鮮やかになります。

L = Lightness（明度）

Lightnessは明度を表します。 一般的なHSLでは0～100%で指定します。

• 0% → 黒
• 50% → 色相・彩度に応じた基本的な色
• 100% → 白

HSLの書き方

CSSでは、例えば次のように指定できます。

hsl(0, 100%, 50%)

これは赤色を表します。

HSLは、色相・彩度・明度を個別に調整できるため、Webデザインで色のバリエーションを作るときに便利です。

同じ色をRGB・HEX・HSLで表す

RGB・HEX・HSLは別々の色を表すものではありません。 同じ色を異なる方法で表現できます。

例えば、代表的な赤色は次のように表現できます。

この3つは表記方法が違いますが、いずれも同じ赤色を表しています。

RGB・HEX・HSLの違い

RGB・HEX・HSLの最大の違いは、色をどのような基準で表現するかです。

RGBは「光の3原色」で表す

RGBは赤・緑・青の強さを組み合わせて色を作ります。 例えば、

rgb(255, 0, 0)

なら赤、

rgb(0, 255, 0)

なら緑、

rgb(0, 0, 255)

なら青になります。

HEXはRGBを16進数で表したもの

HEXはRGBの各数値を16進数に置き換えた表記方法と考えることができます。

例えば、

rgb(255, 0, 0)

は、

#FF0000

と表現できます。

HSLは色の特徴を分けて表す

HSLでは、色相・彩度・明度を個別に指定します。 例えば赤色を少し暗くしたい場合、

hsl(0, 100%, 40%)

のように明度だけを変更できます。

このように、HSLは色の明るさや鮮やかさを調整するときに扱いやすいのが特徴です。

CSSではどう使う？

RGB・HEX・HSLは、CSSでWebページの文字色や背景色、ボーダーなどを指定するときに利用できます。

HEXで指定する

.button {
  background-color: #007bff;
  color: #ffffff;
}

HEXはWebサイトのCSSで非常によく使われる表記方法です。

RGBで指定する

.button {
  background-color: rgb(0, 123, 255);
  color: rgb(255, 255, 255);
}

RGBを使うと、赤・緑・青の数値を直接指定できます。

HSLで指定する

.button {
  background-color: hsl(211, 100%, 50%);
  color: hsl(0, 0%, 100%);
}

HSLでは色相・彩度・明度を個別に変更しやすいため、色のバリエーションを作るときに便利です。

透明度を指定する

RGBやHSLでは、アルファ値を利用して透明度を指定することもできます。 例えばCSSでは、

rgb(0 123 255 / 50%)

のように指定できます。 HSLでも、

hsl(211 100% 50% / 50%)

のように透明度を指定できます。

このようなスペース区切りとスラッシュを使う記法は、現在のCSSで利用されているモダンな色指定方法の一つです。

RGB・HEX・HSLの使い分け

どの形式を使うべきかは、作業内容によって異なります。

HEXが向いているケース

• Webサイトの基本色をCSSに記述するとき
• デザインガイドで色を管理するとき
• カラーコードを短く記述したいとき
• 既存のWebサイトの色を指定するとき

特にWeb制作ではHEXカラーコードを目にする機会が多いため、Webデザインを始めたばかりならHEXから覚えるのもおすすめです。

RGBが向いているケース

• ディスプレイ上の色を数値として扱いたいとき
• 画像編集ソフトで色を確認するとき
• RGB値を使って色を計算・変換するとき
• プログラムで色を処理するとき

HSLが向いているケース

• 色の明るさを調整したいとき
• 色の鮮やかさを変更したいとき
• 同じ色相で複数の色を作りたいとき
• CSSでカラーバリエーションを作りたいとき

RGBとCMYKの違い

RGBと混同されやすい色の表現方法にCMYKがあります。

RGBはディスプレイなどで光を使って色を表現するのに対して、CMYKは主に印刷物で使用される色の表現方法です。

Webサイトの色を指定する場合はRGB・HEX・HSLなどが一般的です。 一方、チラシやパンフレットなどの印刷物では、印刷工程に合わせてCMYKが使用されることがあります。

RGB・HEX・HSLの比較表

RGB・HEX・HSLの特徴を比較すると、次のようになります。

どれを使えばいい？

カラーコードは相互に変換できる

RGB・HEX・HSLは、それぞれ独立した色の規格というわけではありません。 適切な計算によって、ある表現方法から別の表現方法へ変換できます。

例えば、

#FF0000

というHEXカラーコードは、

rgb(255, 0, 0)

や、

hsl(0, 100%, 50%)

として表現できます。

そのため、カラーコードを扱うツールでは、HEX・RGB・HSLの値を相互に確認できると便利です。

Webデザインではどのカラーコードを使う？

Webデザインでは、RGB・HEX・HSLのどれを使ってもCSSで色を指定できます。 そのため、「どれが正解」というものではありません。

例えば、サイトのブランドカラーを管理する場合はHEXを使い、色のバリエーションを作る場合はHSLを利用する、といった使い分けができます。

HEXを基本カラーとして使う

例えば、

:root {
  --primary-color: #007bff;
  --text-color: #333333;
  --background-color: #ffffff;
}

のようにHEXで基本色を管理できます。

HSLで色のバリエーションを作る

HSLでは色相を維持したまま明度や彩度を変更しやすいため、

• 通常のボタン
• ホバー時のボタン
• 薄い背景色
• 濃いアクセントカラー

などのバリエーションを作る場合にも便利です。

よくある質問

RGB・HEX・HSLは何が違いますか？

RGBは赤・緑・青の強さで色を表し、HEXはRGBの値を16進数で表したカラーコードです。 HSLは色相・彩度・明度によって色を表現します。

HEXとRGBは同じ色を表せますか？

はい。 例えば、 #FF0000 と rgb(255, 0, 0) は同じ赤色を表します。 HEXはRGBの値を16進数で表現したものと考えることができます。

HSLはRGBやHEXと違う色ですか？

いいえ。 HSLも色を表現する方法の一つです。 同じ色をRGB・HEX・HSLという異なる形式で表現できます。

WebサイトではRGBとHEXのどちらを使えばいいですか？

どちらもCSSで使用できます。 シンプルなカラーコードとして管理したい場合はHEXが分かりやすく、RGBの値を直接扱いたい場合はRGBが便利です。

HSLは何に使うのですか？

HSLは色相・彩度・明度を個別に指定できるため、色の明るさや鮮やかさを調整したり、同じ色相で複数の色を作ったりするときに便利です。

RGBはWeb専用ですか？

いいえ。 RGBはディスプレイやデジタル画像など、光を使って色を表示するさまざまなデジタル環境で利用されています。 WebサイトのCSSでも広く利用されています。

HEXカラーコードのFFは何を意味しますか？

HEXカラーコードでは、FFは16進数で255を表します。 例えば、 #FF0000 では赤の値が255、緑と青が0なので赤色になります。

まとめ

RGB・HEX・HSLは、Webサイトやデジタル画像などで色を指定するための代表的な方法です。

• RGB → 赤・緑・青の強さで色を表す
• HEX → RGBの値を16進数で表すカラーコード
• HSL → 色相・彩度・明度で色を表す

例えば赤色は、

のように、3つの方法で表現できます。

Webサイトの基本的な色指定にはHEX、RGB値を直接扱いたい場合にはRGB、色相・彩度・明度を調整しながらデザインしたい場合にはHSLが便利です。

それぞれの特徴を理解しておくことで、CSSでの色指定やWebデザイン、カラーコードの変換がより分かりやすくなります。

関連ツール

• カラーピッカー ：画像や画面から色を確認するためのツール
• カラーコード一覧 ：HTML・CSSで利用できるカラーコードを確認

関連記事

• HEXカラーコードとは？
• RGBとHEXの変換方法
• カラー・Webデザインガイド
• RGBとは？
• RGBとHEXの違いとは？
• HSLとは？