CSSで色を表現するいろいろな指定の方法

2023年 7月12日　Posted　野々瀨(フロントエンドエンジニア)

CSSにはさまざまな色を表現するための方法が幾つか存在します。CSSでどのようにして色を指定するのか、軽くご紹介します。

ネームカラー（名前付きの色）

ネームカラー（名前付きの色）は、色を英単語（キーワード）で表したもので、各色の名称を指定することで色を表現することができます。例えば、redと指定すれば赤、lightgreenと指定すれば明るい緑、skyblueと指定すれば薄い青（空色）といった感じです。

/* 赤 */
.sample1 {
	background-color: red;
}

/* 明るい緑 */
.sample2 {
	background-color: lightgreen;
}

/* 薄い青（空色） */
.sample3 {
	background-color: skyblue;
}

CSS Color Module Level 4では、150近くのネームカラーが定義されています。詳しくはW3CのCSS Color Module Level 4ページをご覧ください。

transparentとcurrentColor

CSSにはtransparentとcurrentColorという、特殊な色を表すネームカラーが存在しています。

transparentキーワードは透明を表すネームカラーで、ブラウザーでは基本的にRGBAのrgba(0, 0, 0, 0)と同等の表現をします。

currentColorキーワードはテキストの色であるcolorプロパティと同じの色を適用できるネームカラーです。対象の要素に直接colorプロパティが指定されていない場合は、直近の継承されているcolorプロパティの色が反映されます。

/* 自身の色 */
.sample1 {
	border: 1px solid currentColor;
	color: red;
}

/* 継承 */
.sample2 {
	color: red;
}

	.sample2 p {
		border: 1px solid currentColor;
	}

関連リンク

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

10進数カラー（RGB / RGBA）

10進数カラーは光の三原色（加法混色）である赤、緑、青の色を、それぞれ0から255の間の数字で表した色です。

CSSではrgb関数を使って、rgb(赤, 緑, 青)で指定します。

.sample {
	background-color: rgb(255, 153, 51);
}

また、不透明度（アルファチャンネル）を与えることもでき、0から1の間の数字か、0%～100%の間のパーセンテージで指定します。

CSSではrgba関数を使って、rgb(赤, 緑, 青, 不透明度)で指定します。

.sample {
	background-color: rgba(255, 153, 51, 0.75);
}

関連リンク

• CSS Color Module Level 4 - W3C
• rgb() - MDN

16進数カラー（HEX / HEXA）

16進数カラーは光の三原色（加法混色）である赤、緑、青の色を、それぞれ0からFの間の16進数で表した色です。

CSSではシャープを先頭に付けた#RRGGBBで指定します。それぞれの色は2桁で指定し、00、01……となり、09の次は0a、そして0fの次が10となります。 また、全ての色がそれぞれ00のように同じ値となる場合は、1桁に省略することができ、#RGBとすることができます。

.sample {
	background-color: #f29a36; /* 赤がf2、緑が9a、青が36 */
}

/* 2桁が同じ値の場合 */
.sample {
	background-color: #f93; /* #ff9933 */
}

また、不透明度（アルファチャンネル）を与えることもでき、こちらも0からFの間で指定します。#RRGGBBAAと最後の値に指定します。

.sample {
	background-color: #f29a36bf; /* 赤がf2、緑が9a、青が36、不透明度がbf */
}

/* 2桁が同じ値の場合 */
.sample {
	background-color: #f93b; /* #ff9933bb */
}

なおアルファベットは、大文字・小文字の区別はなく、どちらで指定しても問題ありません。

関連リンク

• CSS Color Module Level 4 - W3C
• <hex-color> - MDN

HSL / HSLA

HSLは色相（Hue）、彩度（Saturation）、光度（Luminosity）のことで、色相を0degから360deg、彩度を0%から100%、光度を0%から100%で表した色です。

CSSではhsl関数を使って、hsl(色相, 彩度, 光度)で指定します。

.sample {
	background-color: hsl(30deg, 100%, 60%);
}

また、不透明度（アルファチャンネル）を与えることもでき、0から1の間の数字か、0%～100%の間のパーセンテージで指定します。

CSSではhsla関数を使って、hsla(色相, 彩度, 光度, 不透明度)で指定します。

.sample {
	background-color: hsla(30deg, 100%, 60%, 0.75);
}

関連リンク

• CSS Color Module Level 4 - W3C
• hsl() - MDN

LAB

LABは球体のXYZ軸で表した色です。

輝度（Lightness）はY軸で0%から100%、a（赤から緑）はX軸で-160から160の距離、b（青から黄）はZ軸で-160から160の距離で表されています。ちなみにaとbの指定可能な値は、無制限に指定できますが、実際には-160から160の範囲でしか変化しません。

CSSではlab関数を使って、lab(輝度 a b)で指定します。（引数はスペースで区切っていることに注意してください。）

.sample {
	background-color: lab(70 50 104);
}

また、不透明度（アルファチャンネル）を与えることもでき、0から1の間の数字か、0%～100%の間のパーセンテージで指定します。

CSSではlab関数を使って、lab(色相 彩度 輝度 / 不透明度)で指定します。

.sample {
	background-color: lab(70 50 104 / 0.75);
}

関連リンク

• CSS Color Module Level 4 - W3C
• lab() - MDN

HWB

HWBは、色相（Hue）、白色度（Whiteness）、黒色度（Blackness）のことで、色相を0degから360deg、白色度を0%から100%、黒色度を0%から100%で表した色です。

CSSではhwb関数を使って、hwb(色相 白色度 黒色度)で指定します（引数はスペースで区切っていることに注意してください）。

.sample {
	background-color: hwb(25deg 10% 0%);
}

また、不透明度（アルファチャンネル）を与えることもでき、0から1の間の数字か、0%～100%の間のパーセンテージで指定します。

CSSではhwb関数を使って、hwb(色相 白色度 黒色度 / 不透明度)で指定します。

.sample {
	background-color: hwb(25deg 10% 0% / 0.75);
}

なお、色相の指定は他の角度の単位（rad、grad、turn）も指定することができ、また単位を省略すると角度として解釈されます。

関連リンク

• CSS Color Module Level 4 - W3C
• hwb() - MDN

LCH

LCHは、輝度（Lightness）、彩度（Chroma）、色相（Hue）のことで、輝度を0%から100%、彩度を0から230、色相を0degから360degで表した色です。

CSSではlch関数を使って、lch(輝度 彩度 色相)で指定します（引数はスペースで区切っていることに注意してください）。

.sample {
	background-color: lch(70% 100 65deg);
}

また、不透明度（アルファチャンネル）を与えることもでき、0から1の間の数字か、0%～100%の間のパーセンテージで指定します。

CSSではlch関数を使って、lch(輝度 彩度 色相 / 不透明度)で指定します。

.sample {
	background-color: lch(70% 100 65deg / 0.75);
}

関連リンク

• CSS Color Module Level 4 - W3C
• lch() - MDN