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

更新日: 2026年3月

カラーコードとは

コンピュータのディスプレイは「光の三原色」である赤（Red）・緑（Green）・青（Blue）の組み合わせで色を表現します。 カラーコードは、この3色の混合比率を数値化したもので、Webデザインやプログラミングにおいて色を正確に指定するために使われます。

同じ色でも、目的や場面に応じてHEX・RGB・HSLといった異なる形式で表記できます。 形式が異なるだけで表現できる色の範囲は同じなので、自由に相互変換が可能です。

HEX（16進数カラーコード）

HEXは「Hexadecimal（16進数）」の略で、「#」に続く6桁の英数字で色を表します。 先頭2桁が赤、中央2桁が緑、末尾2桁が青の値を示し、各色は00〜FF（10進数で0〜255）の範囲で指定します。

• #FF0000 → 赤（R:255, G:0, B:0）
• #00FF00 → 緑（R:0, G:255, B:0）
• #0000FF → 青（R:0, G:0, B:255）
• #FFFFFF → 白（すべて最大値）
• #000000 → 黒（すべて0）

HEXはCSSで最も広く使われている形式で、短縮記法もあります。 例えば「#FF6600」は「#F60」と3桁に省略できます（各色の2桁が同じ文字の場合のみ）。

RGB（Red Green Blue）

RGBは赤・緑・青の3色それぞれの強さを0〜255の10進数で指定する形式です。 CSSでは rgb(255, 0, 0) のように記述します。 透明度を加えた rgba(255, 0, 0, 0.5)（RGBA）もよく使われます。

RGBはHEXと本質的に同じ情報を持っていますが、10進数なので人間にとって読みやすいのが利点です。 また、JavaScriptなどのプログラミングで色の計算（明るさの調整、色のブレンドなど）を行う際にはRGBが便利です。

HSL（Hue Saturation Lightness）

HSLは色相（Hue）・彩度（Saturation）・明度（Lightness）の3要素で色を指定する形式です。 CSSでは hsl(0, 100%, 50%) のように記述します。

• 色相（H）: 0〜360度の角度で色の種類を指定。0=赤、120=緑、240=青
• 彩度（S）: 0〜100%で鮮やかさを指定。0%=灰色、100%=最も鮮やか
• 明度（L）: 0〜100%で明るさを指定。0%=黒、50%=純色、100%=白

HSLの最大の利点は「直感的に色を調整できる」ことです。 例えば、ある色の明るいバージョンが欲しければ明度（L）を上げるだけで済みます。 RGBでは3つの値を同時に調整する必要があるため、HSLの方がデザイン作業に適しています。

3つの形式の比較

実務での使い分けポイント

実際の開発やデザインでは、場面に応じてカラーコードを使い分けるのが効率的です。

• デザインカンプの共有: HEXが一般的。デザイナーとエンジニアの共通言語として最も浸透しています。
• CSSの記述: HEXまたはRGBが主流。透明度が必要な場合はRGBA。
• 配色パターンの作成: HSLが最適。色相を変えずに明度・彩度を調整することで、統一感のあるカラーバリエーションを簡単に作れます。
• JavaScriptでの色操作: RGBが計算しやすい。2色のブレンドや明るさの動的変更に向いています。

カラーコード変換の活用シーン

デザインツールからHEXコードをもらったけれど、CSSでは透明度付きのRGBAで指定したい。 あるいは、既存の色のトーン違いをHSLで作りたい。 こうした「形式の変換」は実務で頻繁に発生します。 手計算でも変換は可能ですが、変換ツールを使えば瞬時に正確な値が得られます。