すべての主要なエンジンで新しい CSS 色空間と関数がサポートされるようになりました。デザインに生き生きとした効果をもたらす方法をご覧ください。
CSS で、sRGB 色域外の色にアクセスできるように色空間がサポートされるようになりました。つまり、HD 色域の色を使用した HD（高解像度）ディスプレイをサポートできます。このサポートには、ウェブ上で色をより効果的に活用するための新機能が含まれています。
CSS から色空間にアクセスする
sRGB 色域内の色にアクセスするための関数はすでにいくつかあります（rgb()、hsl()、hwb()）。color() 関数がブラウザでサポートされるようになりました。この関数は、任意の RGB 色空間内の色にアクセスするための正規化された方法です。これには、sRGB、Display P3、Rec2020 が含まれます。次の CSS で例を確認できます。
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
lch()、lab()、oklch()、oklab() を使用して sRGB 以外の色空間にアクセスできるようにする関数もいくつかサポートされています。
さまざまな色空間について詳しくは、高精細 CSS カラーガイドをご覧ください。
color-mix() 関数
これらの新しい色空間に加えて、すべてのエンジンで color-mix() 関数がサポートされるようになりました。この関数を使用すると、任意の色空間で、ある色を別の色に混在させることができます。次の CSS では、sRGB 色空間で青の 25% が白色に混ざり合っています。
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
これらの新しい機能と色空間により、鮮明な HD カラーをウェブで実現できます。ひらめきを得るために、まずは gradient.style の HD グラデーション ジェネレータを使用して美しいグラデーションを作成します。