Web制作の配色基礎【HEX・RGB・HSLの使い分けと変換方法】

Web制作を始めたばかりの方が最初に混乱するのがカラーコードの種類です。#FF6B35（HEX）・rgb(255, 107, 53)（RGB）・hsl(18, 100%, 60%)（HSL）——これらはすべて「同じオレンジ色」を表しています。本記事では3つの形式の違いと使い分けを初心者向けに解説します。

なぜカラーコードが3種類あるの？

コンピューターの画面は赤・緑・青の光を組み合わせて色を表現します（RGB）。HEXはこのRGBを16進数で短く書いたもの、HSLは人間が色を感じる感覚（色相・彩度・明度）に合わせた表現です。同じ色でも表記方法が異なるため、場面に応じて使い分けることが重要です。

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

#RRGGBBの形式で、R・G・Bそれぞれを00〜FFの16進数2桁で表します。

特徴

• ✅ 最もコンパクトで書きやすい（7文字）
• ✅ HTMLとCSSで最も広く使われる形式
• ✅ デザインツール（Figma・Photoshop）がHEXで色を表示
• ⚠️ 人間が見ても色を想像しにくい

使い所

/* 基本的な色指定 */
color: #FF6B35;
background-color: #FFFFFF;

/* Tailwind CSS カスタムカラー */
// tailwind.config.js
colors: {
  brand: '#667EEA',
  accent: '#764BA2',
}

RGB（赤・緑・青）

rgb(R, G, B)の形式で、各チャンネルを0〜255の10進数で指定します。 透明度が必要な場合はrgba(R, G, B, A)（Aは0〜1）を使います。

特徴

• ✅ 透明度（アルファ値）を rgba() で指定できる
• ✅ JavaScriptでの計算・操作がしやすい
• ✅ CSS変数と組み合わせて透明度を動的に変更できる
• ⚠️ HEXより文字数が多い

使い所

/* 透明度が必要なとき */
background-color: rgba(102, 126, 234, 0.5); /* 50%透明 */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

/* CSS変数と組み合わせ（モダンな方法） */
:root {
  --brand-rgb: 102, 126, 234;
}
.overlay {
  background-color: rgb(var(--brand-rgb) / 0.3);
}

HSL（色相・彩度・明度）

hsl(H, S%, L%)の形式。Hは色相（0〜360°）、Sは彩度（0〜100%）、Lは明度（0〜100%）です。

特徴

• ✅ 人間の色覚に近く、直感的に調整しやすい
• ✅ ダークモード実装で同じ色相のまま明度だけ変えられる
• ✅ 配色理論（補色は+180°）をコードで表現しやすい
• ⚠️ 3つの数値を覚える必要がある

使い所

/* ダークモードで明度だけ変える */
:root {
  --primary: hsl(220, 90%, 55%);
}
.dark {
  --primary: hsl(220, 90%, 70%); /* 明度を上げるだけ */
}

/* ホバーエフェクト */
.button {
  background: hsl(220, 90%, 55%);
}
.button:hover {
  background: hsl(220, 90%, 45%); /* 暗くする */
}

3形式の使い分けまとめ

関連ツールで実践

3形式の変換はカラーコード変換ツールで即座に行えます。 配色を決めたい場合はカラーパレット生成ツール、 グラデーションを作成したい場合はCSSグラデーション生成ツール、 文字の読みやすさを確認したい場合はコントラストチェッカーをご利用ください。