HTML・CSSカラーコードとは？16進数HEX・RGB・色指定の書き方

Webカラーとは、WebページやWebアプリで表示する色を、HTML・CSSなどで指定するための色表現です。現在のCSSでは、HEX、RGB、HSL、名前付き色だけでなく、Lab、LCH、OKLab、OKLCH、Display P3など幅広い色指定が利用できます。

「Webカラー＝16進数だけ」という理解は、現在では少し狭すぎます。W3CのCSS Color仕様では、複数の色空間と記法が定義されています。

HTML・CSSのカラーコードとは？

CSSでは、文字色、背景色、枠線、影、グラデーションなど、さまざまな場所へ色を指定できます。基本となるのが<color>型で、W3Cは色キーワード、16進数、色関数など複数の指定方法を定義しています。

代表的な指定方法は次の通りです。

• HEX：#ff0000
• RGB：rgb(255 0 0)
• HSL：hsl(0 100% 50%)
• 名前付き色：red
• 広色域指定：color(display-p3 1 0 0)など

16進数HEXカラーコードとは？

HEXは、赤・緑・青の値を16進数で表す方法です。たとえば#ff0000は赤、#ffffffは白、#000000は黒を表します。

6桁のほか、短縮形の3桁や、アルファ値を含む4桁・8桁の16進記法もCSSで利用できます。

HEX・RGB・HSLを相互変換したい場合は、カラーコード変換を使えます。

RGBとは？

RGBはRed・Green・Blueの3成分で色を表します。従来のCSSではrgb(255, 0, 0)のようなカンマ区切りが一般的でしたが、現在のCSS Colorではrgb(255 0 0)のようなスペース区切りのモダン構文も定義されています。

透明度を加える場合は、rgb(255 0 0 / 50%)のように指定できます。

RGBAとは？

RGBAはRGBにアルファ（透明度）を加えた考え方です。現在のCSSではrgba()も利用できますが、rgb()自体にスラッシュでアルファ値を追加できるため、必ずしも別関数として考える必要はありません。

透明度を使うと、背景色を透かした半透明の色を作れます。

HSLとは？

HSLはHue（色相）・Saturation（彩度）・Lightness（明るさ）の3要素で色を表します。RGBよりも「色相を少し変える」「明るさだけ調整する」といった操作を直感的に行いやすい場合があります。

色相・彩度については色相とは？、彩度とは？でも解説しています。

CSSには色名で指定できるカラーもある

CSSではred、blue、black、white、rebeccapurpleなど、名前付き色を利用できます。

MDNは、基本16色に加えて約150色の名前付きカラーキーワードがあると説明しています。

ただし、制作現場ではデザインシステムとの整合性や再利用性のため、HEXやRGB、CSS変数を使って色を管理するケースも多くあります。

transparentとcurrentColor

CSSには通常の色以外にも、transparentやcurrentColorという特殊なキーワードがあります。

• transparent：完全に透明な色
• currentColor：その要素の現在のcolor値を参照する

currentColorを使うと、文字色とアイコン・枠線などの色を連動させやすくなります。

WebカラーはsRGBだけ？

従来のWebではsRGBを前提にした色指定が中心でしたが、CSS Color Level 4ではcolor(display-p3 ...)、Lab、LCH、OKLab、OKLCHなど、sRGBを超える色表現も定義されています。

ただし、広色域カラーを指定しても、ディスプレイやブラウザがその色域を再現できなければ見え方は制約されます。色空間の違いはsRGB・Adobe RGB・Display P3の違いで整理しています。

Web制作ではどの色指定を使えばいい？

一般的なWeb制作では、HEX・RGB・HSLのどれを使っても構いません。重要なのは、プロジェクト内で管理しやすい形式へ統一することです。

• HEX：短く、デザインデータと共有しやすい
• RGB：RGB成分を直接扱いたいときに分かりやすい
• HSL：色相・彩度・明るさを操作しやすい
• OKLCHなど：知覚的な調整やモダンな色設計で有用

アクセシビリティでは色だけで伝えない

Webでは、色指定そのものだけでなく「読めるか」「意味が伝わるか」も重要です。色だけを唯一の情報手段にしないことや、文字と背景の十分なコントラストを確保することがアクセシビリティ上重要です。

似た色を比較したい場合は色比較、実際の色を探す場合は色検索が使えます。

まとめ｜Webカラーは複数の記法と色空間を使える

Webカラーは、HTML・CSS上で色を表すための仕組みです。HEX、RGB、HSL、名前付き色に加え、現在はDisplay P3やLab、OKLCHなども利用できます。

「どの記法が正しいか」ではなく、互換性・管理しやすさ・色域・アクセシビリティを考えて使い分けるのがポイントです。

主な参考資料

• W3C「CSS Color Module Level 4」
• MDN「<named-color>」
• MDN「<color>」