カラーコード完全ガイド｜HEX・RGB・HSL の違いと現代のCSS色指定

Webデザインで使われるカラーコードの基本を整理。#FF5733 のような HEX、rgb()・rgba()・hsl()・色域 (sRGB / Display P3)・アクセシビリティのコントラスト比まで、実務で迷わない使い分けをまとめます。

#FF5733、rgb(255, 87, 51)、hsl(11, 100%, 60%)、oklch(0.7 0.18 30)——CSSで使われるカラーコードはいくつもの書き方があり、同じ色でも表現方法が違います。「どれを使えばいいの？」と迷ったことはありませんか？

この記事では、Webデザインで使われる主要なカラーコード形式の違い、それぞれの長所と短所、そして実務での使い分けを整理します。アクセシビリティのコントラスト比や、最新の OKLCH まで、現代のフロントエンドで必要な知識をまとめました。

カラーコードとは — 色を数値で表す方法

コンピュータは色を「数値の組み合わせ」として扱います。私たちの目に見える色を、赤・緑・青の3つの光の強さで表現するのが基本のしくみで、これが RGBモデル です。

ディスプレイのピクセルは、赤・緑・青の3つのサブピクセル（光る点）の組み合わせで色を表示します。それぞれを 0〜255 の256段階で調整できるので、256 × 256 × 256 = 約1,677万色 を表現できます。これが標準的な「24bit カラー」です。

HEX — もっとも見慣れた書き方

#FF5733 のように、# + 16進数6桁で色を表現する形式。R・G・B それぞれを 0〜255（16進数で 00〜FF）で書き並べたものです。

#FF5733 = R: 255 / G: 87 / B: 51（オレンジっぽい赤）
#000000 = 黒
#FFFFFF = 白
#808080 = グレー（R/G/B が同じ値だと無彩色）

3桁の短縮形 #RGB

各成分の上下が同じ値のとき（例：#FF5533 →ではない…→ 例：#FF5500 はダメ）、3桁の短縮形が使えます。

#F53 = #FF5533
#FFF = #FFFFFF = 白
#000 = 黒

書く文字数が減るのでデザイナー間でも好まれますが、表現できる色は 4,096色 に限られます（各成分が16通り × 3）。

HEXに透明度を加える #RRGGBBAA（8桁形式）

最近のCSSでは透明度を末尾に加えた8桁HEXも使えます。#FF5733CC なら不透明度80%（CC = 204 ÷ 255 ≒ 0.8）の色。ただ可読性は良くないので、透明度を扱うなら次の RGBA 形式の方が一般的です。

RGB / RGBA — 数値が直接読める

rgb(255, 87, 51) のように、3つの数値で書く形式。HEXと違い、人の頭でも「あ、赤が255、緑が87だな」と読めるのが利点。

rgba(255, 87, 51, 0.5) なら4つめの値（0〜1）で透明度を指定できます。半透明のオーバーレイ、ホバー時の色変化、影の柔らかい表現などで重宝します。

新しい記法 (CSS Color Module Level 4)

モダンCSSではカンマを省略し、スラッシュで透明度を区切る記法が推奨されています。

旧：rgba(255, 87, 51, 0.5)
新：rgb(255 87 51 / 0.5) ← 全モダンブラウザ対応済み

新記法では rgb と rgba の区別もなく、透明度を付けなければ普通の不透明色になります。

HSL — デザイナーフレンドリーな表現

hsl(11, 100%, 60%) のように、色相（Hue）・彩度（Saturation）・明度（Lightness）で表す形式。RGBよりも「色をイメージしながら調整しやすい」のが特徴です。

H (色相)：0〜360° の角度。0=赤、120=緑、240=青、360=また赤に戻る。
S (彩度)：0%（無彩色＝グレー）〜 100%（鮮やか）。
L (明度)：0%（黒）〜 50%（純色）〜 100%（白）。

HSLが便利な場面：

「同じ色味だけ少し暗く」したい → L だけ下げる
「鮮やかさを抑えて落ち着いた色」にしたい → S だけ下げる
「補色（反対の色）」を作りたい → H に 180 を足す

TegaruTools のテーマカラー（ソフトティール #3f8e8f）は HSLで書くと hsl(181, 39%, 40%)。ホバー時はLを下げて深くする、といった調整が直感的にできます。

OKLCH — 2024年からCSSで使える最新形式

OKLCH は HSL の改良版で、人の目の感じ方に近い色空間を使う新しいCSS関数。2023年〜2024年にかけてChrome・Safari・Firefox すべてで対応されました。

書き方：oklch(0.7 0.18 30)。L（明度・知覚的）・C（彩度・色の純度）・H（色相）の3要素。

OKLCHの利点：

同じLの色は本当に同じ明るさに見える：HSLでは「H=60 (黄) と H=240 (青) で同じL」でも、黄色のほうがずっと明るく見える。OKLCH ならこのズレが小さい。
カラースケールを作りやすい：ボタンの hover/active/disabled のような関連色を、L だけずらして作れる。
新しい色域（Display P3 など）に対応：sRGBより鮮やかな色が出せる。

デザインシステムを設計するチームでは、HSL や HEX から OKLCH への移行が進んでいます。tailwind.css も将来的にデフォルトの色定義を OKLCH ベースに切り替えました。

色域（color gamut）— sRGB と Display P3

ここまで紹介した色のコードは、ほとんどが sRGB という色域で扱われています。これは1990年代に策定された標準で、ほとんどの Web コンテンツの基準です。

近年の iPhone・MacBook・iPad などのディスプレイは Display P3 という、より広い色域に対応しています。sRGB より約25%広く、特に赤と緑がより鮮やかに表示できます。

CSSでは color(display-p3 1 0 0) のように指定すると、対応ディスプレイでより鮮やかな赤を表示できます。ただし非対応の環境（古いPCモニター、プリンタなど）では sRGB に丸められるため、見た目が変わります。

実務での目安：

ほぼすべてのケース：HEX または rgb()/hsl() で sRGB
写真表現アプリ・色にこだわるブランド：Display P3 も併用

アクセシビリティ — コントラスト比を意識する

「色をきれいに使う」と並行して、現代のWebでは 読みやすさのコントラスト が問われます。文字色と背景色の組み合わせが薄すぎると、視力の弱い人にも、明るい屋外でも、文字が読めません。

WCAG（Web Content Accessibility Guidelines）の基準：

AA レベル：通常テキストは 4.5:1 以上、大きい文字（18pt以上または太字14pt以上）は 3:1 以上
AAA レベル：通常 7:1、大きい文字 4.5:1（厳しい基準。公的サイトなど）

例：純白 #FFFFFF の背景に、明るすぎる色は使えません。

#777（中グレー）on 白：コントラスト 4.48:1 → ぎりぎりAA未満
#666 on 白：5.74:1 → AA通過
#444 on 白：9.74:1 → AAAも通過

Chrome DevTools の Color Picker、Stark などのデザインツール、または専用のアクセシビリティチェッカーで、コントラスト比をその場で計算できます。

CSSの「名前付き色」と特殊な値

CSSは red、blue、tomato など、約140種類の名前付き色を定義しています。プロトタイプには便利ですが、デザインの最終形では HEX や HSL の方が一貫性を保てます。

実務でよく使うキーワード：

transparent：完全に透明（rgba(0,0,0,0) の別名）
currentColor：親要素の文字色を継承（アイコンの色を文字色に合わせるときに使う）

color-mix() — 2つの色を混ぜる新機能

2024年から本格対応した CSS の color-mix() 関数。HEX や HSL の色を、CSSの中で直接混ぜられます。

例：color-mix(in srgb, #3f8e8f 30%, white) → ティールを30%、白を70%混ぜた淡いミント色。

本サイトのカードのホバーグロー（ボーダーが薄くカテゴリ色に光る効果）も、color-mix(in srgb, var(--card-accent) 14%, transparent) という記述で実現しています。色変数を1つ持っておけば、淡い背景・濃い影・ホバー時の色など、関連バリエーションを自動で作れます。

実務での選び方

HEX：デザイナーから受け取った値の貼り付け、Slackやコメントでの共有。一番見慣れている。
rgb() / rgba()：JavaScript で色を動的に計算するとき。数値が直接読めるので扱いやすい。
hsl() / hsla()：派生色（hover/disabled）を作るとき。Lだけずらせば同系統。
OKLCH：デザインシステム全体を一気に作るとき。スケール（明暗のセット）を作りやすい。
CSS変数：上記いずれを使うにせよ、var(--primary) のような形で1ヶ所にまとめておくと、テーマ切替や色変更が一発になる。

形式間の変換に困ったら

HEX ⇔ RGB ⇔ HSL の相互変換は、頭で計算するのは大変です。本サイトのカラーコード変換ツールなら、貼り付け→3形式同時表示＋色プレビューがブラウザだけで完結します。デザインカンプから受け取った HEX を、CSS で hover 用に少し暗くしたい——そんなときの計算がワンクリックです。

まとめ — 「目的別の選び方」が一番大事

普段使い：HEX（短い・見慣れている）
透明度が必要：rgb() / rgba() のスペース区切り記法
派生色を作る：HSL もしくは OKLCH
新規デザインシステム：OKLCH + CSS変数
常にコントラスト比 4.5:1 以上を確保

試してみたい色や、HEXから他形式への変換を確認したいときは、本サイトのカラーコード変換ツールをどうぞ。色見本のプレビュー付きで、目で見ながら調整できます。