CSSで使えるカラーが増えたらしい

CSSで使える色関数が増えました

2022年11月にCSS Color Module Level 4 の草案が出たそうです。
CSS Color Module Level 4

各ブラウザで色関数が全部使えるようになったらしい。色関数というとrgb(255,255,255)とかhsl(136 0% 100%)とかのアレなんですが、もっと増えたらしい。

こちらで一部の書き方を紹介してくださっています。
【CSS】CSSで使えるのは色は、RGB / 16進数カラーコードだけじゃない。 – Qiita

Chromeのブログを見ると、12種類増えたっぽいですね。多すぎでは……。
High Definition CSS Color Guide – Chrome for Developers

追加されたもの

// sRGB Linear
.srgb-linear-color {
  color: color(srgb-linear 34% 58% 73%);
}

// LCH
.lch-color {
  color: lch(58% 32 241deg);
}

// LAB
.lab-color {
  color: lab(58% -16 -30);
}

//OKLCH
.oklch-color {
  color: oklch(64% .1 233deg);
}

// OKLAB
.oklab-color {
  color: oklab(64% -.1 -.1);
}

// Display P3
.display-p3-color {
  color: color(display-p3 34% 58% 73%);
}

// Rec2020
.rec2020-color {
  color: color(rec2020 34% 58% 73%);
}

// A98 RGB
.a98-rgb-color {
  color: color(a98-rgb 34% 58% 73%);
}

//ProPhoto RGB
.prophoto-rgb-color {
  color: color(prophoto-rgb 34% 58% 73%);
}

// XYZ
.xyz-color {
  color: color(xyz 22% 26% 53%);
}

// XYZ-d50 （CIE XYZ色空間で色温度50）
.xyz-d50-color {
  color: color(xyz-d50 22% 26% 53%);
}

// XYZ-d65 （CIE XYZ色空間で色温度65）
.xyz-d65-color {
  color(xyz-d65 22% 26% 53%);
}

以前から使用できていたもの

// Hex
.hex-color {
  color: #4499bb;
}

// RGB
.rgb-color {
  color: rgb(64, 149, 191);
}

// HSL
.hsl-color {
  color: hsl(200deg, 50%, 50%);
}

// HWB
.hwb-color {
  color: hwb(200deg 25% 25%);
}

Chromeブログからの引用：

If CSS never updated, it would be stuck in the 90s color ranges forever, forced never to match the wide gamut offerings found in images and video. Trapped, only showing 30% of the colors the human eye can see.
From Chrome 111 is support for CSS Color 4 gamuts and color spaces, joining Safari who’s had support for display-p3 since 2016. CSS can now support HD (high definition) displays, specifying colors from HD gamuts while also offering color spaces with specializations. 

High Definition CSS Color Guide – Chrome for Developers

RGBだけだと人間の目で見える色の30％しか再現されないのか……。
Display P3はApple製のデバイスが搭載している色空間ですね。そこから始まったのかぁ。

グラデーションで試してみた

下記のように、グラデーションを指定する際に in XXX の形でグラデーション全体の色空間を指定することができるようです。

.rgb-gradient {
  background: linear-gradient(in srgb to right, lab(30 59.4 -96), lab(80 -64 36.2));
}
.lch-gradient {
  background: linear-gradient(in lch to right, lab(30 59.4 -96), lab(80 -64 36.2));
}

同じ色でいくつかの色空間を比較してみました。

かなり違いが出ました。
（と言いつつ、このスクリーンショット自体の色が他の環境でどう見えてるのか不安）

デベロッパーツールも進化していた

Chromeデベロッパーツールのカラーピッカーもいつの間にか進化していました。

16進数とRGB以外の色空間を選択すると、白い線が表示されるようになっています。この線がsRGBで表現できる限界で、LABやLCHを選択している時、その領域外を設定することが可能です。

指定可能な色空間が増えた理由

最近のディスプレイで再現できる色が増えたことから、RGBで表現できる以上の色を表示して良いのでは？　ということで追加されたようです。

色空間によってこれだけ再現できる色領域が異なるそうで。
RGBだけだと狭い世界だったんですね。

こちらの記事では、sRGB 色空間を超えた表現・知覚的均等性・予測可能性の3つを理由として挙げていました。
CSS Color 再入門 | grip on minds

彩度・輝度の数値を同じように揃えた色でも色相によって人間の目には明るさが異なって見えますが、OKLABやOKLCHを使うと人間の目にちょうどよく補正できる、16進数での指定と比べて数字で明るさの調節がしやすい、ということらしいです。

その他

Photoshopのグラデーション補間も増えた

2023年5月、Photoshopのグラデーション補間にOKLCHによる「知覚的」、リニアRGBによる「リニア」が加わりました。
Photoshop のグラデーション補間

同じ色でグラデーション補間の設定だけ変えて比べてみると、やはり色によってかなり印象が異なる結果になりました。

リニアRGBについてはChrome開発者向けブログだけではわからなかったんですが、こちらの記事によると、ガンマ補正が異なるようです。
リニアRGBのうんちく – Qiita

OKLCH推しが多いの？

Photoshopのグラデーション補間もOKLCHが追加されたし、変換ツールやグラデーションツールもあるし、OKLCH推しの人が多いんでしょうか。

OKLCH Color Picker & Converter　OKLCHに色を変換できるツール

CSS HD Gradients　OKLABやOKLCHのグラデーションが作れるツール

明るさ・鮮やかさを正確に評価したいなら、HSB/HSV/HSL色空間より、OKLCH色空間を使おう – Qiita

デザイナーとしては…

そもそもデザインツールのデフォルトのカラーピッカーが対応してないし、CSSの数値だけで色を決めることもないし、UIが不必要に鮮やかだと目にしんどいなと思ってしまい、ちょっと使いどころが掴めていません。写真などのコンテンツ自体の色再現は豊富な方が良いですが……。

そもそもメーカーやユーザーによって画面の輝度などがゴリゴリに違うので、そこで主張しすぎないUIを作るとなると、あまり冒険はしたくないかな。

表現できる色が増えているので、そのうちデザインツール類も脱sRGBするのかな、その時のデザイントレンドはどうなるんだろう、などと考えています。

Yuko Hashimoto

デザイナー

虚弱と加齢の狭間でよれよれになりながら、使いやすいデザインについて日々ボンヤリと考えています。 手芸、園芸、寺社仏閣や博物館が好きです。 通信制大学を始めました。