Nouveaux espaces de couleur et nouvelles fonctions CSS dans tous les principaux moteurs

Tous les principaux moteurs sont désormais compatibles avec les nouveaux espaces et fonctions de couleurs CSS. Découvrez comment ils peuvent donner du pep à vos conceptions.

Rachel Andrew

Le CSS accepte désormais des espaces de couleurs qui nous permettent d'accéder à des couleurs en dehors de la gamme sRVB. Cela signifie que vous pouvez prendre en charge les écrans HD (haute définition) en utilisant les couleurs des gammes HD. Cette compatibilité est accompagnée de nouvelles fonctions pour mieux utiliser les couleurs sur le Web.

Accéder aux espaces colorimétriques à partir du CSS

Nous disposons déjà d'un certain nombre de fonctions qui nous permettent d'accéder aux couleurs de la gamme sRVB : rgb(), hsl() et hwb(). La fonction color(), qui permet d'accéder de manière normalisée aux couleurs dans n'importe quel espace de couleurs RVB, est désormais compatible avec les navigateurs. Cela inclut sRGB, Display P3 et Rec2020. Vous trouverez quelques exemples dans le code CSS suivant:

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

Navigateurs pris en charge

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Source

Plusieurs fonctions sont également compatibles et permettent d'accéder à des espaces de couleurs autres que sRVB à l'aide de lch(), lab(), oklch() et oklab().

Navigateurs pris en charge

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Source

Pour en savoir plus sur tous ces espaces de couleurs, consultez le guide des couleurs CSS haute définition.

Fonction color-mix()

En plus de ces nouveaux espaces de couleurs, tous les moteurs sont désormais compatibles avec la fonction color-mix(). Cette fonction permet de mélanger une couleur à une autre, dans n'importe quel espace colorimétrique. Dans le code CSS suivant, 25% de bleu est mélangé au blanc, dans l'espace de couleurs sRGB.

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

Navigateurs pris en charge

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 16.2.

Source

En savoir plus sur color-mix()

Ces nouvelles fonctions et espaces de couleurs promettent de proposer des couleurs HD éclatantes sur le Web. Pour vous inspirer, commencez par créer de superbes dégradés à l'aide du générateur de dégradés HD sur gradient.style.