カラーコード完全ガイド — HEX・RGB・HSLの違いとCSS活用法

カラーコードとは

人間の目は光の波長の違いを「色」として認識しますが、コンピュータは色を「数値の組み合わせ」として処理します。同じ「赤」という色であっても、#FF0000・rgb(255, 0, 0)・hsl(0, 100%, 50%) はすべて同一の色を指す異なる書き方です。

カラーコードが使われる主な場面は次のとおりです。

• Web / CSS: テキスト・背景・ボーダーなどの色指定
• デザインツール: Figma・Photoshop・Illustratorでのカラー定義
• プログラム: Canvas API・SVG・アニメーションライブラリ
• デザインシステム: ブランドカラーのトークン管理

HEX（16進数）カラー

HEXの仕組み

HEXカラーは6文字（3チャンネル×2桁）で構成されます。各チャンネルは16進数で 00（最小）から FF（最大）の256段階を表します。10進数に換算すると0〜255です。

省略形（#RGB）

各チャンネルの2桁が同じ文字のとき（例: #FF・#AA）は、1文字に省略できます。

• #FF0000 → #F00
• #FFFFFF → #FFF
• #000000 → #000
• #AABB CC のように各桁が異なる場合は省略不可

透明度つきHEX（#RRGGBBAA）

CSS Color Level 4 以降、HEXでもアルファ値を8桁目・9桁目に追加できます。#FF000080 は赤の50%透明です。ただしブラウザの対応状況を確認してから使うことを推奨します。

CSSでの使用例

/* 背景色をネイビーに */
.header {
  background-color: #1a1a2e;
}

/* テキストをダークグレーに */
p {
  color: #333333; /* 省略形: #333 */
}

/* 半透明のオーバーレイ（8桁HEX） */
.overlay {
  background-color: #00000080; /* 黒50%透明 */
}

RGBカラー

光の三原色（加法混色）

RGBは「光の三原色」を組み合わせるモデルです。R（Red）・G（Green）・B（Blue）をそれぞれ最大にすると白になります。これを加法混色と呼びます。ディスプレイのバックライトは光を足し合わせることで色を作るため、RGBはモニター・スマートフォン・テレビの発色原理と直結しています。

rgba()で透明度を指定する

アルファ値（A）は 0（完全透明）から 1（完全不透明）の範囲で指定します。

/* 半透明の黒オーバーレイ */
.modal-bg {
  background-color: rgba(0, 0, 0, 0.6);
}

/* ホワイト30%透明 */
.frosted {
  background-color: rgba(255, 255, 255, 0.3);
}

HEXとの変換方法

HEXのチャンネル値（16進数2桁）を10進数に変換するとRGBになります。

• #FF6600 → R=FF=255, G=66=102, B=00=0 → rgb(255, 102, 0)
• #3498DB → R=52, G=152, B=219 → rgb(52, 152, 219)

16進数を10進数に変換するには、各桁の数値に16の累乗を掛けて足し合わせます。FF = 15×16 + 15×1 = 255、66 = 6×16 + 6×1 = 102。計算が面倒なときはカラーピッカーツールが自動で変換します。

HSLカラー

3つのパラメータの意味

なぜHSLは人間に直感的なのか

HEXやRGBは「コンピュータにとって扱いやすい」形式ですが、人間が「赤をもう少し明るくしたい」と思ったとき、RGBの数値だけ見ても直感的に操作するのは困難です。HSLなら明度（L）の数値を上げるだけで明るい色に、彩度（S）を下げるだけでくすんだ色になります。

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

/* ブランドカラー: 青系（H=210固定） */
.color-base    { color: hsl(210, 70%, 50%); } /* 基本色 */
.color-light   { color: hsl(210, 70%, 70%); } /* 明るいバリエーション（Lを上げる） */
.color-dark    { color: hsl(210, 70%, 30%); } /* 暗いバリエーション（Lを下げる） */
.color-muted   { color: hsl(210, 20%, 50%); } /* くすんだ色（Sを下げる） */
.color-vivid   { color: hsl(210, 100%, 50%); } /* 鮮やかな色（Sを上げる） */

hsla()で透明度を指定する

/* ブランドカラーの半透明版 */
.badge {
  background-color: hsla(210, 70%, 50%, 0.2);
  border: 1px solid hsla(210, 70%, 50%, 0.6);
}

3形式の比較と使い分け

形式別比較表

使い分けフロー

• デザインカンプからコードに起こす場合 → HEXをそのまま使う
• JavaScriptで色を動的に変化させる場合 → RGBまたはHSL（分解・再合成しやすい）
• ブランドカラーのライト版・ダーク版を作る場合 → HSLでLの値だけ変更
• 透明度が必要な場合 → rgba()またはhsla()
• CSS変数でテーマを管理する場合 → HSLが最も保守しやすい

CSSでの色指定テクニック

CSS名前付きカラー（148色）

CSSにはあらかじめ名前が付けられた148色のキーワードが用意されています。red・blue・white などの基本色のほか、tomato・cornflowerblue・mediumseagreen のような具体的な名前のカラーも存在します。プロトタイプや開発中の仮置きに便利ですが、本番コードでは正確な色を指定できるHEX・RGB・HSLのいずれかを使うことが推奨されます。

/* 名前付きカラーの使用例 */
.alert  { color: tomato; }
.info   { color: cornflowerblue; }
.badge  { background-color: mediumseagreen; }

currentColor と inherit

currentColor は要素の color プロパティの値を他のプロパティで参照するためのキーワードです。アイコンのSVGやボーダーの色をテキスト色に追従させたいときに便利です。

/* テキスト色とボーダー色を連動させる */
.btn {
  color: #3498db;
  border: 2px solid currentColor; /* color と同じ #3498db が適用される */
}

/* アイコンSVGをテキスト色に合わせる */
svg {
  fill: currentColor;
}

CSS変数（カスタムプロパティ）での色管理

CSS変数を使うと、ブランドカラーを一元管理できます。HSLの値をバラバラに変数定義しておくと、テーマ変更時に変更箇所を最小限に抑えられます。

:root {
  /* ブランドカラーをHSLで定義 */
  --color-primary-h: 210;
  --color-primary-s: 70%;
  --color-primary-l: 50%;

  /* 使用時は var() で参照 */
  --color-primary:       hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
  --color-primary-light: hsl(var(--color-primary-h), var(--color-primary-s), 70%);
  --color-primary-dark:  hsl(var(--color-primary-h), var(--color-primary-s), 30%);
}

.btn-primary {
  background-color: var(--color-primary);
  color: #fff;
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
}

ダークモード対応（prefers-color-scheme）

CSS変数とメディアクエリを組み合わせると、ライトモード/ダークモードの切り替えをシンプルに実装できます。

:root {
  --bg:   #ffffff;
  --text: #1a1a2e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:   #1a1a2e;
    --text: #f0f0f0;
  }
}

body {
  background-color: var(--bg);
  color: var(--text);
}

カラーピッカーツールの使い方

3ステップで色コードを取得できます。

1. 色をクリックまたはドラッグで選択 — カラーパレット上でカーソルを動かし、取得したい色の位置をクリックします。色相バーで基本色を選んでから明度・彩度を調整するのが効率的です。
2. 表示形式を切り替える — HEX・RGB・HSLのタブをクリックすると、選択した色が各形式で表示されます。用途に合わせて形式を選択してください。
3. コードをコピーして使う — コピーボタンを押すとカラーコードがクリップボードに保存されます。CSSやFigmaなどのデザインツールにそのまま貼り付けて利用できます。
4. HSL で色相・彩度・明度を調整 — HSL は色相 (H 0-360°)・彩度 (S 0-100%)・明度 (L 0-100%) で色を表現します。色相を固定して明度のみ変えると、ブランドカラーのバリエーション (50/100/.../900) が一貫性のある形で作れます。
5. デザインツールに貼り付け — Figma は HEX、Photoshop は RGB、Web 開発は CSS の任意の形式と、ツールごとに使う形式が異なります。本ツールで取得した 3 形式から適切なものをコピーして貼り付けます。