【6日でできるHTML＆CSS入門】デジタルの色表現
Web では # と 6 桁の英数字で色を指定する場面が頻繁にあります。これを読み解くには、ビット・バイトという最小単位と、2 進数→16 進数→10 進数 へと続く数値表現の変換を理解することが不可欠です。ここでは「コンピュータが色をどう数値化するか」を軸に、RGB カラーコード・CSS の書式・先進的な色空間まで段階的に解説します。
１．コンピュータの数値表現
1.1. ビットとバイト
| 用語 | 説明 | 例 | 覚え方 |
|---|---|---|---|
| bit | 0 または 1 の最小単位 | 0 / 1 | “Binary digIT” |
| byte | 8 bit の塊（2⁸ = 256 通り） | 11001010 | “8 bit = 1 Byte” |
1.2. 2 進数 ↔ 10 進数
2 進数 1101₂ を 10 進数にすると
1×2³ + 1×2² + 0×2¹ + 1×2⁰ = (13)₁₀
10 進数 (13)₁₀ を 2 進数に戻すと
13 ÷ 2 → 6 余1 ↑
6 ÷ 2 → 3 余0 ↑
3 ÷ 2 → 1 余1 ↑
1 ÷ 2 → 0 余1 ↑
逆順に読んで 1101₂1.3. 16 進数を使う理由
| 表記 | 桁 | 人が読める長さ | 例（赤255,緑87,青51） |
|---|---|---|---|
| 2 進数 | 24 | ❌ 長すぎる | 11111111 01010111 00110011 |
| 16 進数 | 6 | ✅ 扱いやすい | FF 57 33 |
| 10 進数 | 3×3 | △ 3 値を書く手間 | 255,87,51 |
16 進数なら 4 bit＝1 桁 で区切れるため、バイト境界が崩れません。
２．デジタルで色を表す仕組み
2.1. RGB モデル
| 色チャネル | 範囲 (10 進) | 範囲 (16 進) | 1 byte 占有 | 例：純赤 |
|---|---|---|---|---|
| R (Red) | 0–255 | 00–FF | 8 bit | 255 → FF |
| G (Green) | 0–255 | 00–FF | 8 bit | 0 → 00 |
| B (Blue) | 0–255 | 00–FF | 8 bit | 0 → 00 |
→ #FF0000 が“赤”になる理屈。
2.2. CSS の 16 進カラーコード
/* 長い書式 (#RRGGBB) */
h1 { color: #1E90FF; } /* ドジャーブルー */
/* 略記 (#RGB) – 各 4 bit が同じ値なら可能 */
.box { background: #0F8; } /* #00FF88 と同義 */2.3. 透明度付き RGBA
button:hover {
background-color: rgba(30,144,255,0.3); /* α=30% */
}α値 0–1 で透過を制御。16 進 8 桁表記 #1E90FF4D も同等。
2.4. その他の表記
| 書式 | 例 | 特徴 |
|---|---|---|
hsl() | hsl(120, 60%, 70%) | 色相ベースで直感的 |
lab() | lab(55% 40 30) | 色差が均一、最新ブラウザ対応 |
| CSS 変数 | --brand: #FF5733; | 再利用しやすい |
３．16 進カラーを手早く読むコツ
- 先頭 2 桁 → R
- 次の 2 桁 → G
- 最後 2 桁 → B
赤が強く青が弱い → 温かみのあるオレンジ寄り。
#FF5733
| | └─青=33 (51)
| └───緑=57 (87)
└─────赤=FF (255)４．アクセシビリティと色選択
- コントラスト比 (WCAG 2.1)：文字と背景で 4.5:1 以上
- カラーユニバーサルデザイン：色覚多様性を意識
- ツール例：Chrome DevTools “Lighthouse”、WebAIM contrast checker
使用キーワードまとめ表
| 用語 | 読み | 役割 |
|---|---|---|
| bit | ビット | 0/1 の最小情報単位 |
| byte | バイト | 8 bit の集合 |
| RGB | アールジービー | 光の三原色モデル |
| Hex | ヘックス | 16 進カラーコード |
| Alpha | アルファ | 透明度 (0–1) |
まとめ
- コンピュータは 8 bit＝1 byte の塊で色を数値管理。
- 各チャネル 0–255 を 16 進 2 桁に変換し、#RRGGBB で CSS に指定。
- RGBA・HSL など多彩な表記を適切に使い分ければ、デザインの幅とアクセシビリティを両立できる。
これらの基礎を押さえれば、カラーパレットの調整やテーマ切替え実装もスムーズに行えます。