すべての主要エンジンで導入された新しい CSS 色空間と関数

すべての主要なエンジンで、新しい CSS カラー空間と関数がサポートされるようになりました。デザインに活気を与える方法をご確認ください。

Rachel Andrew

お知らせ: このウェブ機能が、3 つの主要なブラウザ エンジンすべてで利用可能になりました。

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);
}

対応ブラウザ

• 111
• 111
• 113
• 15

ソース

また、lch()、lab()、oklch()、oklab() を使用して sRGB 以外のカラースペースにアクセスできる関数もサポートされています。

対応ブラウザ

• 111
• 111
• 113
• 15

ソース

これらのさまざまな色空間について詳しくは、高解像度 CSS カラーガイドをご覧ください。

color-mix() 関数

これらの新しいカラースペースに加えて、すべてのエンジンで color-mix() 関数がサポートされるようになりました。この関数を使用すると、任意の色空間で 1 つの色を別の色に混ぜることができます。次の CSS では、srgb カラー空間で青色の 25% が白色に混合されています。

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

対応ブラウザ

• 111
• 111
• 113
• 16.2

ソース

詳しくは、color-mix() についての記事をご覧ください。

これらの新しい機能とカラースペースにより、ウェブに鮮やかな HD カラーを実現できます。ヒントを得るには、gradient.style の HD グラデーション ジェネレータを使用して、美しいグラデーションを作成してみましょう。