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

すべての主要なエンジンで、新しい CSS の色空間と関数がサポートされるようになりました。いかにデザインが魅力的になるのか、ご覧ください。

Rachel Andrew

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

対応ブラウザ

  • Chrome: 111。 <ph type="x-smartling-placeholder">
  • Edge: 111。 <ph type="x-smartling-placeholder">
  • Firefox: 113。 <ph type="x-smartling-placeholder">
  • Safari: 15。 <ph type="x-smartling-placeholder">

ソース

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

対応ブラウザ

  • Chrome: 111。 <ph type="x-smartling-placeholder">
  • Edge: 111。 <ph type="x-smartling-placeholder">
  • Firefox: 113。 <ph type="x-smartling-placeholder">
  • Safari: 15。 <ph type="x-smartling-placeholder">

ソース

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

color-mix() 関数

これらの新しい色空間だけでなく、すべてのエンジンで color-mix() 関数がサポートされるようになりました。この関数を使用すると、任意の色空間で、ある色を別の色にミックスできます。次の CSS では、srgb 色空間で青の 25% が白に混ざり合っています。

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

対応ブラウザ

  • Chrome: 111。 <ph type="x-smartling-placeholder">
  • Edge: 111。 <ph type="x-smartling-placeholder">
  • Firefox: 113。 <ph type="x-smartling-placeholder">
  • Safari: 16.2。 <ph type="x-smartling-placeholder">

ソース

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

これらの新機能と色空間により、鮮やかな HD カラーをウェブで楽しめます。ひらめきとして、まずは gradient.style の HD グラデーション生成ツールで美しいグラデーションを作ってみましょう。