Guide des couleurs CSS haute définition

Avec CSS Color 4, vous disposez sur le Web d'outils et de fonctionnalités de coloriage offrant une large gamme d'options: plus des couleurs, des fonctions de manipulation et de meilleurs dégradés.

Depuis plus de 25 ans, sRGB (rouge vert standard) était la seule couleur gamme pour les dégradés et couleurs CSS, avec espace colorimétrique comme rgb(), hsl() et hex. C'est la couleur la plus courante des fonctionnalités de gamme d'écrans ; un dénominateur commun. Nous nous sommes développés habitué à spécifier les couleurs qu'il contient.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

À mesure que les écrans sont capables d'afficher un large éventail de couleurs, le CSS a besoin d'un moyen de spécifier des couleurs à partir de ces plages plus larges. Formats de couleurs actuels aucune langue n'est disponible pour les plages de couleurs étendues.

Si le code CSS n'est jamais mis à jour, il reste bloqué indéfiniment dans les plages de couleurs des années 90 et est forcé. ne correspondent jamais à l'offre large que proposent les images et les vidéos. Trappé, affiché uniquement 30% des couleurs que l'œil humain peut percevoir. Merci aux CSS Color Level 4 (Niveau de couleur 4) de nous avoir aidés à nous échapper, rédigé principalement par Lea Verou et Chris Liley.

Chrome est compatible avec les gammes CSS Color 4 et des espaces colorimétriques. Le CSS est désormais compatible avec le HD (haute définition) d'écrans, en spécifiant les couleurs de la gamme HD tout en offrant des espaces colorimétriques ou spécialisations.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

.

Ce guide comporte trois parties. Poursuivez votre lecture pour vous remémorer l'arrivée de la couleur. Ensuite, lisez l'évolution de la couleur et comment gérer les couleurs à l'avenir en migrant vers la couleur HD ;

Présentation

Les navigateurs compatibles proposent 50% de couleurs en plus. Si vous pensez que 16 millions de couleurs sonnaient beaucoup, attendez de voir combien de couleurs certaines ces nouveaux espaces peuvent s'afficher. Pensez aussi à tous ces gradients bandé, car il n'y avait pas assez la profondeur de bits, c'est aussi résolu.

Outre davantage de couleurs, sans doute les couleurs les plus vives possibles avec l'écran, les nouveaux espaces colorimétriques offrent des outils et des méthodes uniques pour gérer et créer systèmes de couleurs. Par exemple, nous avions auparavant canal, qui était le meilleur des développeurs Web. En CSS, nous avons maintenant la "légèreté perceptuelle" de LCH.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

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, d'interpolation et moins de bandes.

L'image suivante illustre certaines mises à niveau mixtes.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

.

Le problème avec les couleurs et le Web est que le CSS n'est pas compatible avec la haute définition. tandis que les présentoirs que la plupart des gens ont dans leurs poches, leurs longueurs ou encore fixés aux murs sont compatibles avec des couleurs à large gamme et en haute définition. Capacité colorimétrique des écrans s'est développée plus vite que le CSS, le CSS rattrape son retard.

Il y a bien plus que « plus de couleurs ». À la fin de ces documents, vous pourrez spécifier plus de couleurs, améliorer les dégradés et choisir le meilleur des espaces de couleur et des gammes de couleurs pour chaque tâche.

Qu'est-ce qu'une gamme de couleurs ?

Une gamme représente la taille d'un élément. L’expression « millions de couleurs » est un des commentaires sur la gamme d'un écran ou la gamme de couleurs qu'il peut choisir ; Dans l'image suivante, trois gammes sont comparées, et plus la taille est grande, plus il offre de couleurs.

Une gamme de couleurs peut également avoir un nom. comme un match de basket-ball, un match de base-ball ou tasse à café vente par rapport à une grande un nom pour la taille peut aider les gens communiquer. Apprendre ces noms de gamme de couleurs vous aide à communiquer et rapidement comprendre une gamme de couleurs.

Cet article passe en revue la palette de couleurs précédente. Pour en savoir plus sur les sept nouvelles gammes dans Accédez à plus de couleurs et de nouveaux espaces.

Gamme visuelle humaine

La gamme de couleurs est souvent comparée à la gamme visuelle humaine. l'intégralité de une couleur que nous croyons que l'œil humain peut voir. HVS est souvent représenté avec un diagramme de chromaticité, comme ceci:

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

La forme la plus externe est celle que nous pouvons voir en tant qu'êtres humains, et le triangle intérieur est le Plage de fonctions rgb(), également appelée espace colorimétrique sRVB.

Comme vous avez vu les triangles ci-dessus et que vous comparez des tailles de gamme, vous trouverez donc des triangles ci-dessous. C'est la façon du secteur de communiquer sur les gammes de couleurs et les comparer.

Qu'est-ce qu'un espace colorimétrique ?

Les espaces de couleurs sont des dispositions d'une gamme, établissant une forme et une méthode de accéder aux couleurs. Il s'agit souvent de simples formes 3D, comme des cubes ou des cylindres. Cette couleur la disposition détermine les couleurs qui sont côte à côte et comment l'accès et l'interpolation des couleurs fonctionnera.

RVB est comme un espace de couleurs rectangulaire, où les couleurs sont accessibles en spécifiant sur trois axes. Le TSL est un espace colorimétrique cylindrique. où les couleurs sont accessibles selon un angle de teinte et des coordonnées sur 2 axes

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

La spécification de niveau 4 introduit 12 nouveaux espaces colorimétriques pour rechercher des couleurs. Ils s'ajoutent aux quatre couleurs espaces précédemment disponibles:

• Hex
• RVB
• HSL
• HWB

Résumé de la gamme de couleurs et de l'espace colorimétrique

Un espace colorimétrique est un mappage de couleurs où une gamme de couleurs est une plage de couleurs. Considérez une gamme de couleurs comme un total de particules et un espace colorimétrique comme une bouteille conçu pour contenir cette gamme de particules.

Voici un visuel interactif d'Alexey Ardov qui illustre des espaces colorimétriques. Pointez, faites glisser et zoomez dans cette démo. Modifier l'espace colorimétrique pour visualiser d'autres espaces.

• Utilisez la gamme de couleurs pour parler d'une gamme de couleurs (faible ou étroite, par exemple). gamut, high-range ou wide gamut.
• Utilisez les espaces de couleurs pour parler des dispositions de couleurs, de la syntaxe utilisée pour spécifier une de la couleur, de manipuler la couleur et d'interpoler à l'aide de la couleur.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Avis sur les espaces de couleur classiques {#classic-color-spaces}

La couleur CSS 4 présente de nombreuses et des outils pour CSS et la couleur. Tout d'abord, un récapitulatif de la situation où se trouvait 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 couleur comme valeur: hexadécimale (nombres hexadécimaux), rgb(), rgba(), par comme hotpink, ou par des mots clés comme currentColor

Vers 2010, selon votre navigateur, les CSS pourraient utiliser hsl() couleurs. Puis en 2017, hexadécimal avec alpha est apparu. Pour finir, seulement récemment, hwb() a commencé à obtenir dans les navigateurs.

Tous ces espaces de couleurs classiques font référence à la couleur dans la même gamme, sRVB.

HEX

L'espace colorimétrique hexadécimal spécifie R, V, B et A avec hexadécimaux. Les éléments suivants : les exemples de code montrent toutes les façons dont cette syntaxe peut spécifier le rouge, le vert et le bleu plus l'opacité.

.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. Elle permet de spécifier un montant compris entre 0 et 255 ou un pourcentage compris entre 0 et 100. Cette syntaxe existait avant la normalisation de la syntaxe . Vous verrez donc des syntaxes avec des virgules et sans virgule. En mouvement 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 couleur à s’orienter vers le langage humain et communication, la technique TSL (saturation et luminosité) propose toutes les couleurs de la gamme sRVB sans que votre cerveau ne sache comment le rouge, le vert et le bleu d'interagir. Comme le RVB, la syntaxe comportait également des virgules, mais le déplacement les virgules ne sont plus nécessaires.

.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

Un autre espace colorimétrique de gamme sRVB orienté sur la façon dont les humains décrivent la couleur est HWB. (teinte, blanc, noir). 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 colorimétriques non sRVB sur le Web n'en sont qu'à leurs débuts, mais nous verrons une augmentation de l'utilisation de la part des concepteurs et des développeurs au fil du temps. Le fait de savoir l’espace colorimétrique sur lequel construire un système de conception, par exemple, est un outil puissant à une boîte à outils pour les créateurs. Chaque espace colorimétrique offre des caractéristiques uniques et une raison pour laquelle il a été à la spécification CSS. Vous pouvez commencer petit avec ces valeurs et ajouter si nécessaire.

Ressources

Lisez la suite de nos articles sur le niveau de couleur 5.

• Syntaxe des couleurs relatives CSS
• Mélange de couleurs CSS

D'autres ressources sont également disponibles sur le Web:

• Module de couleur CSS niveau 4 du W3C

• Module de couleur CSS niveau 5 du W3C

• Couleurs LCH en CSS: quoi, pourquoi et comment ?

• Mieux que Lab ? Réduction de l'entrée: CIE Lab & OKLab

• Vers des couleurs plus riches sur le Web

• Okhsv et Okhsl: deux nouveaux espaces de couleur pour la sélection des couleurs

• Vers des couleurs plus riches dans Chromium (PDF)

• LCH est le meilleur espace colorimétrique !

• Concevoir des systèmes de couleur accessibles

• Espaces colorimétriques, par Hannah Weller

• Wide Gamut Color en CSS avec Display-P3

• Espace colorimétrique CIE 1931

• Formats de couleur en CSS

• Color Spaces de Bartosz Ciechanowski

Et les outils:

• afc163.github.io/color3d/
• Visualisation Gamut
• Générateur de dégradés de couleurs vives