CSSを触り始めると必ず出てくる #FF5733 のような記法、これがカラーコードです。「なんか16進数っぽいのはわかるけど、具体的に何を表しているの？」「RGBとかHSLって何が違うの？」という疑問、デザインやフロントエンドをやり始めたばかりの人なら誰でも一度は思うはずです。

この記事では、Webで使う3つのカラー形式（HEX・RGB・HSL）の意味と使い分け、そして実際のCSSでの書き方まで解説します。

カラーコードとは？

カラーコードとは、色を数値で表現するための記法です。人間が「赤」「青」と言う代わりに、プログラムが扱える数値で色を指定します。Webブラウザはこの数値をもとに画面上の色を描画します。

Webフロントエンドでよく使われる形式は主に3つです。

  • HEX：#FF5733 のような16進数表記
  • RGB：rgb(255, 87, 51) のように赤・緑・青の強さを0〜255で指定
  • HSL：hsl(11, 100%, 60%) のように色相・彩度・明度で指定

3形式の比較

形式 記法例 特徴
HEX #FF5733 コンパクト。デザインツールでよく使われる
RGB rgb(255, 87, 51) 各チャンネルが直感的。JavaScriptで操作しやすい
HSL hsl(11, 100%, 60%) 人間の感覚に近い。明るさ・彩度を調整しやすい

HEX（16進数）

#RRGGBB という形式で、RR・GG・BBはそれぞれ赤・緑・青の強さを16進数2桁（00〜FF）で表します。#FF0000 は赤、#0000FF は青、#000000 は黒、#FFFFFF は白です。#F53 のように3桁に省略できる場合もあります（#FF5533 の略）。

RGB

赤（Red）・緑（Green）・青（Blue）の各成分を 0〜255 の整数で指定します。rgb(255, 0, 0) が赤です。HEXの16進数2桁は 0〜255 と同じ範囲なので、#FF = 255、#00 = 0 と対応しています。

HSL

色相（Hue）・彩度（Saturation）・明度（Lightness）で色を表します。色相は0〜360の角度で色を指定し、0と360が赤、120が緑、240が青です。彩度と明度はパーセントで指定します。「この色をもう少し明るくしたい」「同系色で統一したい」といった場面でHSLは非常に使いやすいです。

CSSでの書き方と透明度の指定

基本的な使い方

/* いずれも同じ色を表す */
color: #FF5733;
color: rgb(255, 87, 51);
color: hsl(11, 100%, 60%);

透明度を使う場合

透明度（アルファ値）を指定したい場合は rgba() または hsla() を使います。最後の引数が0〜1の透明度で、0が完全透明、1が不透明です。

/* 50%透明 */
background: rgba(255, 87, 51, 0.5);

/* HSLで明度調整 + 透明度 */
background: hsla(11, 100%, 60%, 0.8);

8桁のHEX（例：#FF573380）でも透明度を表現できます。最後の2桁がアルファ値（00〜FF）です。ただし古いブラウザは非対応なことがあるので注意が必要です。

変換の例

HEX #FF5733 をRGBに変換するには、FF→255、57→87、33→51 と16進数を10進数に変換するだけです。カラーコード変換ツールを使えば手動計算なしに一発で変換できます。グラデーションを作りたい場合はCSSグラデーションジェネレーター、配色を考えたい場合はカラーパレットジェネレーターも便利です。

よくある質問（FAQ）

HEX・RGB・HSLのどれを使えばいいですか？
場面によります。デザインツール（FigmaやAdobe XD）からコピーした色はHEXが多いのでそのまま使うのが楽です。JavaScriptで色の値を動的に操作したい場合はRGBが扱いやすいです。テーマカラーのバリエーション（ホバー時に少し明るく、など）を作りたい場合はHSLが最も直感的です。明確なルールはないので、プロジェクト内で統一できれば何でも構いません。
8桁のHEXコードとは何ですか？
通常のHEXは6桁（RRGGBB）ですが、8桁のHEX（RRGGBBAA）では最後の2桁でアルファ値（透明度）を指定できます。例えば #FF573380 の 80 は16進数の128で、10進数に換算すると約50%の透明度になります。CSS Color Level 4以降で対応ブラウザが増えていますが、古いブラウザとの互換性が必要な場合は rgba() を使う方が安全です。
サイトのカラーパレットを作るにはどうすればいいですか？
まずブランドのメインカラーを1色決めて、そこからHSLで明度・彩度を変えながら派生色を作っていく方法が体系的です。カラーパレットジェネレーターを使えば、ベースカラーから自動でパレットを生成してくれます。CSS変数（カスタムプロパティ）に色を定義しておくと、テーマ変更や管理がしやすくなります。

まとめ

  • カラーコードは色を数値で表現するための記法で、HEX・RGB・HSLの3形式が主流
  • HEXはコンパクトでデザインツールとの相性がいい、RGBは計算しやすい、HSLは直感的に色を調整しやすい
  • 透明度を使いたい場合は rgba() / hsla() か8桁HEX
  • どの形式も表現できる色は同じ、用途と好みで使い分ける

色を扱う作業には以下のツールが役立ちます。