【CSS】CSSで使えるのは色は、RGB / 16進数カラーコードだけじゃない。

はじめに

あなたは CSSで色を指定するときに何を使ってますか？

red・blueといった、カラーキーワードを入力する方法、
rgb(255, 0, 0)・rgba(0, 0, 255, 0.5)といった、rgb色空間を入力する方法、
#FF0000・#0000FFといった、16進カラーコードを指定する方法などを
使っている人は多いのではないのでしょうか？

実は、Web開発者の開発体験を向上することを目的に主要なブラウザの関係者が取り組んでいる
Interop 2022の中で、色についても改善される予定です。

この記事では、拡張される色についてまとめました。

RGB関数

RGB関数は、皆さんがご存知の通り、rgb(0,0,0) rgba(255,255,255,1)のように
Red(赤)・Green(緑)・Blue(青)・alpha(不透明度)を指定することで色を決めることができます。

それぞれ、

• Red(赤) → 0 ~ 255
• Green(緑) → 0 ~ 255
• Blue(青) → 0 ~ 255
• alpha(不透明度) → 0 ~ 1

の値を指定します。

また、#F01FE0のような#から始まる16進数カラーコードでも、同様に色を決めることができ、
それぞれ、

• Red(赤) → 00 ~ FF
• Green(緑) → 00 ~ FF
• Blue(青) → 00 ~ FF
• alpha(不透明度) → 00 ~ FF

の値を指定します。

有名色とシステム色

あまり実用的でない(業務ではあまり使わない)ですが、有名色とシステム色も、ご存知だと思います。
有名色は、red や Blue、 といった特定の色の名前を指定して色を決めます。
同様に、システム色は、linktext や visitedtextといった、特定の色の名前を指定して色を決めます。

色キーワードで指定した色は、RGBカラーとして変換され、表示されます。

ちなみに指定できる色は、有名色は149色、システム色、39色あるらしいです。
(流石に覚えられない... )
　

そのほかにも、透明な黒を指定する transparent や
テキストの色と同じ色を指定する currentcolorも
キーワードとして、指定することができます。

HSLカラー

CSSで色を指定するときに、RGBカラーはコンピューターやデザインシステム等では便利ですが、
R:20 G:150 B:60 が何色かパッとイメージしにくいですよね？

そんな中で、直感的に色を作ることができる色空間の１つがHSLカラーになります。
色相を選んで、色相にどのくらい彩度と輝度を混ぜるかを決めて色を作ります。

　
HSLカラーは、hsl() hsla()のように、
Hue(色相), Saturation(彩度), Lightness(輝度)・alpha(不透明度)を指定して色を決めます。

それぞれ、

• Hue(色相) → 0 〜 360
  • ※ 360deg以上も指定することは可能ですが、同じ色が繰り返されます。
• Saturation(彩度) → 0% 〜 100%
• Lightness(輝度) → 0% 〜 100%
• alpha(不透明度) → 0 ~ 1

の値を指定します。

また、HSLカラーで指定した色は、RGBカラーとして変換され、表示されます。

HWBカラー

HWBカラーは、RGB色空間で色を指定する方法の１つで、HSLカラー同様で、人間が直感的に色を作やすくなっています。
色相を選んで、色相にどのくらい白色と黒色を混ぜるかを決めて色を作ります。

　
HWBカラーは、hwb() hwbfa()のように、
Hue(色相), Whiteness(白色度), Blackness(黒色度)・alpha(不透明度)を指定して色を決めます。

それぞれ、

• Hue(色相) → 0 〜 360
  • ※ 360deg以上も指定することは可能ですが、同じ色が繰り返されます。
• Whiteness(白色度) → 0% 〜 100%
• Blackness(黒色度) → 0% 〜 100%
• alpha(不透明度) → 0 ~ 1

の値を指定します。

また、HWBカラーで指定した色は、RGBカラーとして変換され、表示されます。

デバイスに依存しない色

Lab と LCH

【Lab】
Labは、色の物理的な測定に使われ、明度軸を中心に持つ色空間です。
また、人間の視覚実験から生まれたLabは、人間が見ることができる色全般を表現しています。

それぞれ、

• L軸 → 明度軸　0(暗) 〜 100(明るい)
• a軸 → 色相軸　-125(緑) 〜 125(赤紫)
• b軸 → 色相軸　-125(青紫) 〜 125(黄色)

の値を指定します。

【LCH】
LCHは、Lab同様 L軸(明度)を持っていますが、C軸に彩度、H軸に色相を持つ色空間です。

それぞれ、

• L軸 → 明度軸　0(暗) 〜 100(明るい)
• C軸 → 彩度軸　0 〜 150
• H軸 → 色相軸　0deg 〜 360deg

の値を指定します。

OKLab と OKLCH

【OKLab】
OKLabは、Labに比べ、色相直線性、色相均一性、彩度均一性が改善された色空間です。

Labと同様にそれぞれ、

• L軸 → 明度軸　0(暗) 〜 100(明るい)
• a軸 → 色相軸　-125(緑) 〜 125(赤紫)
• b軸 → 色相軸　-125(青紫) 〜 125(黄色)

の値を指定します。

【OKLCH】
OKLCHは、LCHに比べ、色相直線性、色相均一性、彩度均一性が改善された色空間です。

LCHと同様にそれぞれ、

• L軸 → 明度軸　0(暗) 〜 100(明るい)
• C軸 → 彩度軸　0 〜 150
• H軸 → 色相軸　0deg 〜 360deg

の値を指定します。

任意のカラーベースで決める色

CSSでは、color()　関数を使うことで、sRGB以外の色空間を指定して、表示させることができます。

それぞれ、

• sRGB
  • キーワード → srgb
  • R → 0 〜 1.0
  • G → 0 〜 1.0
  • B → 0 〜 1.0
• リニアRGB
  • キーワード → srgb-linear
  • R → 0 〜 1.0
  • G → 0 〜 1.0
  • B → 0 〜 1.0
• Display P3
  • キーワード → display-p3
  • R → 0 〜 1.0
  • G → 0 〜 1.0
  • B → 0 〜 1.0
• A98 RGB
  • キーワード → a98-rgb
  • R → 0 〜 1.0
  • G → 0 〜 1.0
  • B → 0 〜 1.0
• ProPhoto RGB
  • キーワード → prophoto-rgb
  • R → 0 〜 1.0
  • G → 0 〜 1.0
  • B → 0 〜 1.0
• ITU-R BT.2020-2
  • キーワード → rec2020
  • R → 0 〜 1.0
  • G → 0 〜 1.0
  • B → 0 〜 1.0
• CIE XYZ
  • キーワード → xyz-d50・xyz-d65・xyz
  • R → 0 〜 1.0
  • G → 0 〜 1.0
  • B → 0 〜 1.0

の値を指定します。

まとめ

rgb(0,0,0) rgba(255,255,255,1) #FF0000・#0000FF
この辺は、よく使いますが、それ以外は、ほとんど使うタイミングが難しいですね...

たまに、HSLカラーを使ったサイトを見ますが...

意図的に、color()を使って、色空間を指定するのもデザイナーとしては、めんどくさいです。
sRGBだけでいいですよね！？

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。