CSS Color 4 propose sur le Web une large gamme d'outils de couleur et de fonctionnalités: plus de couleurs, des fonctions de manipulation et de meilleurs dégradés.
Depuis plus de 25 ans, sRGB (bleu-vert standard) est la seule gamme de couleurs pour les dégradés et couleurs CSS, avec des espaces de couleur tels que rgb(), hsl() et hexadécimal. Il s'agit de la fonctionnalité de gamme de couleurs la plus courante parmi les écrans. Il s'agit d'un dénominateur commun. Nous sommes devenus habitués à spécifier les couleurs qu'il contient.
À mesure que les écrans deviennent plus capables d'afficher une large gamme de couleurs, CSS a besoin d'un moyen de spécifier des couleurs dans ces plages plus larges. Les formats de couleurs actuels n'ont pas de langue pour les larges gammes de couleurs.
Si le CSS n'était jamais mis à jour, il resterait indéfiniment bloqué dans les plages de couleurs des années 90, ne jamais correspondre aux offres très larges des images et des vidéos. Piraté, n'affichant que 30% des couleurs que l'œil humain peut voir. Remerciez le CSS Color Level 4 pour nous avoir aidés à nous échapper, principalement écrit par Lea Verou et Chris Lilley.
Chrome est compatible avec les gammes et les espaces de couleur CSS Color 4. Le CSS est désormais compatible avec les affichages HD (haute définition), en spécifiant les couleurs des gammes HD tout en proposant des espaces colorimétriques avec des spécialisations.
Essayer vous-même
Ce guide comporte trois parties. Lisez la suite pour vous rappeler où la couleur est passée. Ensuite, découvrez où évolue la couleur et comment gérer les couleurs à l'avenir en migrant vers la couleur HD.
Présentation
Dans les navigateurs compatibles, vous pouvez faire votre choix parmi 50% de couleurs supplémentaires. Si vous pensez que 16 millions de couleurs vous semblait beaucoup, attendez de voir combien de couleurs certains de ces nouveaux espaces peuvent afficher. Pensez également à tous les gradients qui ont été représentés par bandes, car la profondeur de bits était insuffisante. Le problème est résolu.
En plus de l'ajout de couleurs (sans doute les couleurs les plus vives possible pour l'écran), les nouveaux espaces de couleurs offrent des outils et des méthodes uniques pour gérer et créer des systèmes de couleurs. Par exemple, nous disposions auparavant de HSL et de son canal "léger", qui était les meilleurs développeurs Web. En CSS, nous avons maintenant la "luminosité perceptuelle" de LCH.
De plus, les dégradés et le mélange bénéficient de quelques améliorations: prise en charge de l'espace colorimétrique, options d'interpolation de teinte et réduction des bandes.
L'image suivante illustre certaines améliorations apportées à la combinaison.
https://codepen.io/web-dot-dev/pen/poZgXQb
Le problème avec la couleur et le Web est que le CSS n'est pas compatible avec la haute définition, alors que les écrans que la plupart des utilisateurs ont dans leur poche, sur leurs tours ou sur des murs ont une large gamme et sont compatibles avec les couleurs haute définition. La capacité des couleurs des écrans s'est développée plus rapidement que CSS. Le CSS peut désormais rattraper son retard.
Il y a bien plus que « plus de couleurs ». À la fin de ces documents, vous serez en mesure de spécifier plus de couleurs, d'améliorer les dégradés et de choisir les espaces de couleur et les gammes de couleurs les mieux adaptés à chaque tâche.
Qu'est-ce qu'une gamme de couleurs ?
Une gamme représente la taille de quelque chose. L'expression "millions de couleurs" est un commentaire sur la gamme d'un écran ou la gamme de couleurs dans laquelle il doit choisir. Dans l'image ci-dessous, trois gammes sont comparées. Plus la taille est grande, plus elle offre de couleurs.
Une gamme de couleurs peut également avoir un nom. Comme un ballon de basket contre une balle de base-ball ou une tasse de café vente contre un grand ; un nom pour la taille peut aider les gens à communiquer. L'apprentissage de ces noms de gamme de couleurs vous aide à communiquer et à comprendre rapidement une gamme de couleurs.
Cet article passe en revue les gammes de couleurs précédentes. Pour en savoir plus sur les sept nouvelles gammes, consultez Accéder à plus de couleurs et d'espaces.
La gamme visuelle humaine
Les gammes de couleurs sont souvent comparées à la gamme visuelle de l'humain, c'est-à-dire la totalité des couleurs que nous pensons que l'œil humain peut voir. Le HVS est souvent représenté à l'aide d'un diagramme de chromaticité, comme celui-ci:
La forme la plus externe est ce que nous pouvons voir en tant qu'êtres humains, et le triangle intérieur correspond à la plage de fonctions rgb(), également appelée espace de couleurs sRVB.
Comme vous avez vu des triangles ci-dessus, en comparant les tailles de gammes, vous trouverez des triangles ci-dessous. C'est la façon dont l'industrie communique et compare les gammes de couleurs.
Qu'est-ce qu'un espace colorimétrique ?
Les espaces de couleur sont des dispositions d'une gamme qui définissent une forme et une méthode d'accès aux couleurs. Nombre d'entre elles sont de simples formes 3D, comme des cubes ou des cylindres. Cette disposition des couleurs détermine quelles couleurs sont côte à côte, ainsi que le fonctionnement de l'accès aux couleurs et de l'interpolation.
Le RVB est comme un espace colorimétrique rectangulaire, dans lequel les couleurs sont accessibles en spécifiant des coordonnées sur 3 axes. Le TSL est un espace colorimétrique cylindrique dans lequel les couleurs sont accessibles selon un angle de teinte et des coordonnées sur 2 axes.
La spécification de niveau 4 introduit 12 nouveaux espaces de couleurs pour rechercher les couleurs. Ils s'ajoutent aux quatre espaces de couleurs précédemment disponibles:
Gamme de couleurs et résumé de l'espace colorimétrique
Un espace colorimétrique est un mappage de couleurs où une gamme de couleurs est une gamme de couleurs. Considérez une gamme de couleurs comme un total de particules et un espace de couleur comme une bouteille destinée à contenir cette gamme de particules.
Voici un visuel interactif d'Alexey Ardov qui illustre les espaces de couleur. Pointez le curseur, faites glisser votre doigt et zoomez autour dans cette démo. Modifiez l'espace colorimétrique pour visualiser les autres espaces.
- Utilisez la gamme de couleurs pour parler d'une gamme de couleurs, comme la gamme faible ou étroite par rapport à la gamme élevée ou large.
- Utilisez les espaces de couleur pour parler des dispositions de couleurs, de la syntaxe utilisée pour spécifier une couleur, manipuler des couleurs et effectuer des interpolations via la couleur.
Récapitulatif des espaces de couleurs classiques {#classic-color-spaces}
CSS Color 4 présente un grand nombre de nouvelles fonctionnalités et d'outils pour le CSS et la couleur. Tout d'abord, un récapitulatif de l'emplacement de la couleur avant ces nouvelles fonctionnalités.
Depuis les années 2000, vous pouvez utiliser les éléments suivants pour toutes les propriétés CSS qui acceptent une valeur de couleur: hexadécimal (nombres hexadécimaux), rgb(), rgba(), par nom comme hotpink ou avec des mots clés comme currentColor.
Vers 2010, selon votre navigateur, le CSS pouvait utiliser les couleurs hsl(). Puis, en 2017, hex avec alpha est apparu. Enfin, la compatibilité avec les navigateurs a commencé récemment pour hwb().
Tous ces espaces colorimétriques classiques font référence à des couleurs appartenant à la même gamme sRVB.
HEX
L'espace colorimétrique hexadécimal spécifie R, G, B et A avec des nombres hexadécimaux. Les exemples de code suivants montrent toutes les façons dont cette syntaxe peut spécifier l'opacité du rouge, du vert et du bleu plus.
.valid-css-hex-colors {
/* classic */
--3-digits: #49b;
--6-digits: #4499bb;
/* hex with opacity */
--4-digits-opaque: #f9bf;
--8-digits-opaque: #ff99bbff;
--4-digits-with-opacity: #49b8;
--8-digits-with-opacity: #4499bb88;
}
RVB
L'espace colorimétrique RVB offre un accès direct aux canaux rouge, vert et bleu. Il permet de spécifier une valeur comprise entre 0 et 255 ou un pourcentage entre 0 et 100. Cette syntaxe existait avant l'introduction de la normalisation dans les spécifications. Vous verrez donc des syntaxes avec virgule et sans virgule dans le monde réel. Désormais, les virgules ne sont plus nécessaires.
.valid-css-rgb-colors {
--classic: rgb(64, 149, 191);
--modern: rgb(64 149 191);
--percents: rgb(25% 58% 75%);
--classic-with-opacity-percent: rgba(64, 149, 191, 50%);
--classic-with-opacity-decimal: rgba(64, 149, 191, .5);
--modern-with-opacity-percent: rgb(64 149 191 / 50%);
--modern-with-opacity-decimal: rgb(64 149 191 / .5);
--percents-with-opacity-percent: rgb(25% 58% 75% / 50%);
--percents-with-opacity-decimal: rgb(25% 58% 75% / 50%);
--empty-channels: rgb(none none none);
}
TSL
L'un des premiers espaces de couleurs à s'orienter vers le langage et la communication humains, le HSL (teinte et luminosité) offre toutes les couleurs de la gamme sRVB sans demander à votre cerveau de savoir comment le rouge, le vert et le bleu interagissent. Tout comme le langage RVB, la syntaxe de la fonction comportait également des virgules, mais à l'avenir, les virgules ne sont plus obligatoires.
.valid-css-hsl-colors {
--classic: hsl(200deg, 50%, 50%);
--modern: hsl(200 50% 50%);
--classic-with-opacity-percent: hsla(200deg, 50%, 50%, 50%);
--classic-with-opacity-decimal: hsla(200deg, 50%, 50%, .5);
--modern-with-opacity-percent: hsl(200 50% 50% / 50%);
--modern-with-opacity-decimal: hsl(200 50% 50% / .5);
/* hueless and no saturation */
--empty-channels-white: hsl(none none 100%);
--empty-channels-black: hsl(none none 0%);
}
HWB
Le HWB (teinte, blanc et noir) est un autre espace de couleur de la gamme sRVB orienté vers la manière dont les humains décrivent la couleur. Les auteurs peuvent choisir une teinte et mélanger le blanc ou le noir pour trouver la couleur souhaitée.
.valid-css-hwb-colors {
--modern: hwb(200deg 25% 25%);
--modern2: hwb(200 25% 25%);
--modern-with-opacity-percent: hwb(200 25% 25% / 50%);
--modern-with-opacity-decimal: hwb(200 25% 25% / .5);
/* hueless and no saturation */
--empty-channels-white: hwb(none 100% none);
--empty-channels-black: hwb(none none 100%);
}
Étapes suivantes
Découvrez les nouveaux espaces de couleur, syntaxes et outils, puis découvrez comment migrer vers la couleur HD.
Les espaces de couleurs non-sRVB sur le Web n'en sont qu'à leurs débuts, mais nous constaterons une augmentation de leur utilisation par les concepteurs et les développeurs au fil du temps. Savoir sur quel espace colorimétrique, par exemple, créer un système de conception est un outil efficace pour faire partie de la ceinture d'outils des créateurs. Chaque espace colorimétrique offre des caractéristiques uniques ainsi qu'une raison pour laquelle il a été ajouté à la spécification CSS. Vous pouvez commencer petit avec ces caractéristiques et les ajouter si nécessaire.
Ressources
Lisez la suite de nos articles sur le niveau de couleur 5.
D'autres ressources sont également disponibles sur le Web:
- CSS Color Module Level 4 de W3C
CSS Color Module Level 5 de W3C
Mieux que la fonctionnalité expérimentale ? Réduction de la gamme: CIE Lab et OKLab
Okhsv et Okhsl: deux nouveaux espaces de couleur pour le choix des couleurs
Et outils: