カラーコードの種類
| 形式 | 例 | 用途 | 直感性 |
|---|---|---|---|
| HEX（16進） | #F97316 | Web・アプリ | △ |
| RGB | rgb(249, 115, 22) | Web・印刷 | ◯ |
| RGBA | rgba(249, 115, 22, 0.8) | 透明度付き | ◯ |
| HSL | hsl(24, 95%, 53%) | 配色設計 | ◎ |
| HSLA | hsla(24, 95%, 53%, 0.8) | 透明度付きHSL | ◎ |
| HSV/HSB | hsv(24, 91%, 98%) | デザインソフト | ◎ |
| CMYK | cmyk(0%, 54%, 91%, 2%) | 印刷用 | ✕ |
| LCH / OKLCH | oklch(70% 0.18 50) | モダンWeb（広色域） | ◎ |
| 名前付きカラー | red, tomato | プロトタイプ | ◯ |
HEXコード（16進数）
最も一般的なフォーマット。#RRGGBB の形式で、各2桁が16進数（00〜FF = 0〜255）でR・G・Bの強さを表します。
#F97316
↑↑ ↑↑ ↑↑
R G B
F9 = 249
73 = 115
16 = 22短縮形（3桁）
#RGB の形式で、各1桁を2桁に複製。
#FA5 = #FFAA55
#000 = #000000
#FFF = #FFFFFF透明度付き（HEX 8桁）
#RRGGBBAA の8桁形式で、最後の2桁が透明度（00=完全透明、FF=不透明）。
#F9731680 // 透明度50%
#000000CC // 黒・透明度80%よく使う透明度の16進対応
| 透明度 | 16進 | 透明度 | 16進 |
|---|---|---|---|
| 0% | 00 | 60% | 99 |
| 10% | 1A | 70% | B3 |
| 20% | 33 | 80% | CC |
| 30% | 4D | 90% | E6 |
| 40% | 66 | 95% | F2 |
| 50% | 80 | 100% | FF |
RGB（赤・緑・青）
加法混色の3原色。各値は0〜255で表現。
color: rgb(249, 115, 22);
color: rgb(249 115 22); /* スペース区切り（モダンCSS） */
color: rgb(249 115 22 / 0.8); /* 透明度 */よく使う色のRGB値
| 色 | R | G | B |
|---|---|---|---|
| 赤 | 255 | 0 | 0 |
| 緑 | 0 | 255 | 0 |
| 青 | 0 | 0 | 255 |
| 黄 | 255 | 255 | 0 |
| シアン | 0 | 255 | 255 |
| マゼンタ | 255 | 0 | 255 |
| 白 | 255 | 255 | 255 |
| 黒 | 0 | 0 | 0 |
| グレー（中間） | 128 | 128 | 128 |
HSL（色相・彩度・明度）
人間の感覚に近い表現。配色を作る時に圧倒的に便利。
color: hsl(24, 95%, 53%);
color: hsl(24deg 95% 53% / 0.8); /* モダンCSS */| パラメータ | 範囲 | 内容 |
|---|---|---|
| H（Hue/色相） | 0〜360° | 色のジャンル |
| S（Saturation/彩度） | 0〜100% | 鮮やかさ |
| L（Lightness/明度） | 0〜100% | 明るさ |
色相環
0° / 360°: 赤
30°: オレンジ
60°: 黄
120°: 緑
180°: シアン
210°: 水色
240°: 青
270°: 紫
300°: マゼンタ配色を作る黄金パターン
| パターン | 色相の関係 | 例 |
|---|---|---|
| 同系色 | 隣接（±30°） | hsl(24,…) と hsl(45,…) |
| 補色 | 反対（±180°） | hsl(24,…) と hsl(204,…) |
| 三色配色（トライアド） | 等間隔3色（120°） | hsl(0), hsl(120), hsl(240) |
| 四色配色（テトラード） | 等間隔4色（90°） | hsl(0), hsl(90), hsl(180), hsl(270) |
HSLで明度バリエーションを作る
色相と彩度を固定して明度だけ変えると、自然なグラデーションが作れます。
--brand: hsl(24, 95%, 53%); /* メイン */
--brand-50: hsl(24, 95%, 95%);
--brand-100: hsl(24, 95%, 90%);
--brand-200: hsl(24, 95%, 80%);
--brand-300: hsl(24, 95%, 70%);
--brand-400: hsl(24, 95%, 60%);
--brand-500: hsl(24, 95%, 53%);
--brand-600: hsl(24, 95%, 45%);
--brand-700: hsl(24, 95%, 35%);
--brand-800: hsl(24, 95%, 25%);
--brand-900: hsl(24, 95%, 15%);HSV（HSB）
デザインソフト（Photoshop・Illustrator）で多用される形式。
H: 色相（HSLと同じ）
S: 彩度
V/B: 明度（Brightness）HSLとの違いは「明度」の意味。HSLは「中間が最も鮮やか」、HSVは「最大が最も鮮やか」。
| HSL | HSV |
|---|---|
| 純色は L=50% | 純色は V=100% |
| 白に近づける = L高 | 白に近づける = S下げる |
| 黒に近づける = L低 | 黒に近づける = V下げる |
OKLCH（モダンWeb向け）
CSS Color Level 4で導入された新フォーマット。人の知覚により近い色空間。
color: oklch(70% 0.18 50);
/* L% C H */| パラメータ | 範囲 | 内容 |
|---|---|---|
| L | 0〜100% | 知覚的明度 |
| C | 0〜0.4 | 彩度（クロマ） |
| H | 0〜360° | 色相 |
OKLCHの利点:
- 同じL値の色を並べると明るさが等しく見える
- ディスプレイの広色域（P3など）に対応
- グラデーションが滑らかになる
CMYK（印刷用）
| 文字 | 内容 |
|---|---|
| C | シアン |
| M | マゼンタ |
| Y | イエロー |
| K | キープレート（黒） |
各値は0〜100%。Webの印刷では使えず、Webサイトの印刷スタイル指定にも使われません。印刷物のデザインで使用。
RGB ⇔ CMYK の注意点
- RGBの光の3原色は加法混色（白＝全部足す）
- CMYKのインクは減法混色（白＝全部引く）
- 完全な相互変換は不可能（色域が違う）
- ディスプレイで見る色と印刷で出る色は必ず違う
カラーコード相互変換
HEX → RGB
function hexToRgb(hex) {
const h = hex.replace('#', '');
return {
r: parseInt(h.substring(0, 2), 16),
g: parseInt(h.substring(2, 4), 16),
b: parseInt(h.substring(4, 6), 16),
};
}RGB → HEX
function rgbToHex(r, g, b) {
const toHex = n => n.toString(16).padStart(2, '0').toUpperCase();
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}CSS変数として使う
:root {
--brand-r: 249;
--brand-g: 115;
--brand-b: 22;
--brand: rgb(var(--brand-r) var(--brand-g) var(--brand-b));
--brand-alpha: rgb(var(--brand-r) var(--brand-g) var(--brand-b) / 0.5);
}アクセシビリティ（WCAG コントラスト）
文字色と背景色のコントラスト比は4.5:1以上（通常テキスト）または3:1以上（大文字・UI要素）が必要。
コントラスト計算
WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
よくあるコントラスト不足
| 例 | 問題 |
|---|---|
| 灰色文字（#999）on 白 | コントラスト2.85:1 → NG |
| ライトブルー文字 on 白 | プレースホルダーに見えがち |
| 黒文字 on ダークグレー | 視認性低い |
安全な配色
| 文字色 | 背景色 | コントラスト | 用途 |
|---|---|---|---|
#000 | #fff | 21:1 | 本文 |
#222 | #fff | 16:1 | 本文（柔らかめ） |
#444 | #fff | 9.7:1 | キャプション |
#666 | #fff | 5.7:1 | 補助テキスト（最低ライン） |
#fff | #000 | 21:1 | ダークモード本文 |
#fff | #222 | 16:1 | ダークモード本文 |
ブランドカラーの設計
1. メインカラーを選ぶ
業界・ブランドイメージで決める。
| 業界 | 多用される色 |
|---|---|
| IT・スタートアップ | 青系 |
| 飲食 | 赤・オレンジ |
| 環境・健康 | 緑 |
| 高級・宝飾 | 黒・金 |
| 子供向け | 黄・パステル |
| 金融 | 紺・緑 |
2. 派生色を作る
メインのHSLから10段階の濃淡を作る（先述のCSS例）。
3. アクセントカラー
メインの補色または三色配色から選ぶと視覚的なメリハリが出る。
4. ニュートラルカラー（グレースケール）
gray-50, gray-100, ..., gray-900文字・ボーダー・背景に使う10段階グレースケール。
まとめ
- HEX・RGBはWeb標準、HSLは配色設計に強い
- 人の感覚で配色するならHSL or OKLCH
- 印刷物はCMYK（Web表示の色とは必ずズレる）
- アクセシビリティのコントラスト比4.5:1を必ず確認
関連ツール: カラーコード変換ツール ではHEX・RGB・HSL・HSV・CMYKを一画面で相互変換できます。配色作りの試行錯誤にカラーパレットツール、コントラストチェックにコントラストツールもあわせてご利用ください。