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 de couleur et fonctions CSS. Découvrez comment ils peuvent donner de l’éclat à vos conceptions.

Rachel Andrew

Le CSS accepte désormais les espaces colorimétriques qui nous permettent d'accéder aux couleurs en dehors de la gamme sRVB. Cela signifie que vous pouvez afficher les écrans HD (haute définition) à l'aide de couleurs de la gamme HD. Cette prise en charge s'accompagne de nouvelles fonctionnalités permettant d'optimiser l'utilisation des couleurs sur le Web.

Accéder aux espaces colorimétrique depuis 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() est désormais disponible dans les navigateurs. Il s'agit d'un moyen normalisé d'accéder aux couleurs dans n'importe quel espace colorimétrique RVB. tels que sRGB, Display P3 et Rec2020. Vous trouverez quelques exemples dans le 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 <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">

Source

Plusieurs fonctions permettent également d'accéder aux espaces colorimétrique autres que sRVB à l'aide de lch(), lab(), oklch() et oklab().

Navigateurs pris en charge

  • 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">

Source

Pour en savoir plus sur ces différentes zones de couleur, consultez le guide des couleurs CSS haute définition.

Fonction color-mix()

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

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

Navigateurs pris en charge

  • 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">

Source

En savoir plus sur color-mix()

Ces nouvelles fonctionnalités et espaces colorimétriques promettent d'apporter des couleurs HD éclatantes sur le Web. Pour vous inspirer, vous pouvez commencer par créer de magnifiques dégradés à l'aide du générateur de dégradés HD sur gradient.style.