Guide des couleurs CSS haute définition

• CSS Color 4 apporte au web un large éventail d’outils et de fonctionnalités de couleur, et commence à prendre en charge le CSS HD
• Les écrans deviennent de plus en plus performants, mais jusqu’ici CSS ne pouvait pas en tirer parti
• Pendant 25 ans, CSS n’a utilisé que le gamut sRGB, qui ne représente que 30 % des couleurs perceptibles par l’œil humain
• Prise en charge de CSS Color Level 4 à partir de Chrome 111
  • 12 nouveaux espaces colorimétriques sont disponibles, prenant en charge des gamuts comme RGB 98, Display P3, Rec2020 et ProPhoto
  • Cela rejoint désormais Safari, qui prend déjà en charge display-p3 depuis 2016 (un gamut créé par Apple)
• CSS prend désormais en charge les écrans HD, ce qui permet d’afficher 50 % de couleurs en plus dans les navigateurs compatibles

Sommaire

• Vue d’ensemble
  • Qu’est-ce que le gamut des couleurs (Color Gamut) ?
  • Le spectre visuel humain
  • Qu’est-ce qu’un espace colorimétrique (Color Space) ?
  • Résumé du gamut et des espaces colorimétriques
• Comment accéder à davantage de couleurs, d’espaces et de résultats de débogage
  • Revue des espaces colorimétriques classiques
  • Découvrir les nouveaux espaces de couleur du web
  • Interpolation des couleurs
  • Clamping de gamut
  • Choisir un espace colorimétrique
• Migrer vers les couleurs CSS HD
  • Vérifier la prise en charge des gamuts et des espaces colorimétriques
  • Déboguer les couleurs avec les outils de développement Chrome
• Conclusion