Tous les principaux moteurs prennent désormais en charge les nouvelles fonctions et espaces de couleur CSS. Découvrez comment elles peuvent donner de l’éclat à vos conceptions.
Le CSS accepte désormais les espaces de couleur qui nous permettent d'accéder aux couleurs en dehors de la gamme sRVB. Cela signifie que vous pouvez utiliser les écrans HD (haute définition), avec des couleurs issues de gammes HD. Cette prise en charge s'accompagne de nouvelles fonctions pour mieux utiliser les couleurs sur le Web.
Accéder aux espaces colorimétriques depuis CSS
Nous disposons déjà d'un certain nombre de fonctions qui nous permettent d'accéder aux couleurs dans la gamme sRVB : rgb(), hsl() et hwb(). La fonction color(), désormais normalisée dans les navigateurs, permet d'accéder aux couleurs dans n'importe quel espace colorimétrique RVB. Cela inclut les formats sRVB, 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);
}
Plusieurs fonctions permettent également d'accéder à des espaces de couleurs autres que sRVB à l'aide de lch(), lab(), oklch() et oklab().
Pour en savoir plus sur ces différents espaces de couleur, consultez le guide des couleurs CSS haute définition.
La 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 avec une autre, dans n'importe quel espace colorimétrique. Dans le code CSS suivant, 25% du bleu est mélangé à du blanc dans l'espace colorimétrique srgb.
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
En savoir plus sur color-mix()
Ces nouvelles fonctions et espaces colorimétriques promettent de rendre les couleurs HD éclatantes sur le Web. Pour trouver l'inspiration, commencez par créer de magnifiques dégradés à l'aide du générateur de dégradés HD disponible sur gradient.style.
Fait partie de la série sur les nouvelles technologies interopérables