Couleur

The CSS Podcast - 006: Color Part One

La couleur est un élément important de tout site Web. Dans CSS, il existe de nombreuses options pour spécifier et manipuler les couleurs.

Comment choisissez-vous le type de couleur à utiliser ? Comment rendre vos couleurs semi-transparentes ? Dans cette leçon, vous allez découvrir les options à votre disposition pour vous aider à prendre les bonnes décisions pour votre projet et votre équipe.

Le CSS comporte différents types de données, tels que les chaînes et les nombres. La couleur est l'un de ces types et utilise d'autres types, tels que les nombres, pour ses propres définitions.

Choisir des couleurs

Couleurs nommées

Le moyen le plus simple de choisir une couleur consiste à sélectionner l'une des 148 couleurs nommées en CSS. Il s'agit de noms en anglais courant, tels que purple, tomato et goldenrod. Selon l'Almanach Web, certains des noms les plus populaires sont black, white, red, blue et gray. Nos favoris incluent goldenrod, aliceblue et hotpink.

Couleurs numériques

Bien que les couleurs nommées puissent être pratiques, vous devrez probablement utiliser des couleurs spécifiques qui ne sont pas disponibles dans cet ensemble. Vous pouvez spécifier des couleurs avec des valeurs numériques de différentes manières.

Couleurs hexadécimales

h1 {
  color: #b71540;
}

La notation hexadécimale (souvent abrégée en "hexa") est une syntaxe abrégée du RVB, qui attribue une valeur numérique au rouge, au vert et au bleu, qui sont les trois couleurs primaires.

Les plages hexadécimales sont 0-9 et A-F. Lorsqu'ils sont utilisés dans une séquence à six chiffres, ils sont convertis en plages numériques RVB, qui vont de 0 à 255 et correspondent respectivement aux canaux de couleur rouge, vert et bleu.

Vous pouvez également définir une valeur alpha avec n'importe quelle couleur numérique. Une valeur alpha correspond à un pourcentage de transparence. Dans le code hexadécimal, vous ajoutez deux autres chiffres à la séquence à six chiffres, ce qui donne une séquence à huit chiffres. Par exemple, pour définir le noir en code hexadécimal, écrivez #000000. Pour ajouter une transparence de 50 %, remplacez-la par #00000080.

Étant donné que l'échelle hexadécimale est comprise entre 0 et 9, et A et F, les valeurs de transparence ne correspondent probablement pas tout à fait à ce que vous attendez. Voici quelques valeurs clés et courantes ajoutées au code hexadécimal noir, #000000:

• La valeur alpha de 0 % (transparence totale) est 00: #00000000
• Un alpha de 50% correspond à 80: #00000080
• L'alpha à 75% est BF: #000000BF

Pour convertir un nombre hexadécimal à deux chiffres en décimal, prenez le premier chiffre et multipliez-le par 16 (car le système hexadécimal est basé sur 16), puis ajoutez le deuxième chiffre. Prenons BF comme exemple pour une version alpha à 75 % :

1. B est égal à 11, ce qui donne 176 lorsqu'il est multiplié par 16.
2. F est égal à 15
3. 176 + 15 = 191
4. La valeur alpha est de 191, soit 75% de 255.

RVB (rouge, vert, bleu)

h1 {
  color: rgb(183 21 64);
}

Les couleurs RVB sont définies avec la fonction de couleur rgb(), à l'aide de nombres ou de pourcentages comme paramètres. Les nombres doivent être compris entre 0 et 255, et les pourcentages entre 0% et 100%. Le RVB fonctionne sur l'échelle de 0 à 255. Par conséquent, 255 équivaut à 100 % et 0 à 0%.

Pour définir le noir en RVB, définissez-le sur rgb(0 0 0), soit zéro rouge, zéro vert et zéro bleu. Le noir peut également être défini comme rgb(0% 0% 0%). Le blanc est l'opposé exact: rgb(255 255 255) ou rgb(100% 100% 100%).

Un alpha est défini dans rgb() de l'une des deux manières suivantes. Ajoutez un / après les paramètres rouge, vert et bleu, ou utilisez la fonction rgba(). L'alpha peut être défini sous la forme d'un pourcentage ou d'un nombre décimal compris entre 0 et 1. Par exemple, pour définir un noir alpha de 50% dans les navigateurs modernes, écrivez rgb(0 0 0 / 50%) ou rgb(0 0 0 / 0.5).

TSL (teinte, saturation, luminosité)

h1 {
  color: hsl(344 79% 40%);
}

TSL signifie teinte, saturation et luminosité. La teinte décrit la valeur sur la roue des couleurs, de 0 à 360 degrés, en commençant par le rouge (qui correspond à la fois à 0 et à 360). Une teinte de 180 degrés, soit 50 %, se situe dans la plage de bleu. C'est l'origine de la couleur que nous voyons.

La saturation indique l'intensité de la teinte sélectionnée. Une couleur entièrement désaturée (avec une saturation de 0%) s'affiche en niveaux de gris. Enfin, la luminosité est le paramètre qui décrit l'échelle de luminosité ajoutée, du blanc au noir. Une luminosité de 100% donne toujours du blanc.

À l'aide de la fonction de couleur hsl(), vous définissez un noir véritable en écrivant hsl(0 0% 0%), voire hsl(0deg 0% 0%). En effet, le paramètre de teinte définit le degré sur la roue chromatique, qui est 0-360 si vous utilisez le type de nombre. Vous pouvez également utiliser le type d'angle, qui est (0deg) ou (0turn). La saturation et la luminosité sont définies en pourcentages.

L'alpha est défini dans hsl(), de la même manière que rgb() en ajoutant un / après les paramètres de teinte, de saturation et de luminosité ou à l'aide de la fonction hsla(). L'alpha peut être défini sous la forme d'un pourcentage ou d'un nombre décimal compris entre 0 et 1. Par exemple, pour définir un noir alpha à 50 %, utilisez hsl(0 0% 0% / 50%) ou hsl(0 0% 0% / 0.5). À l'aide de la fonction hsla(), écrivez: hsla(0, 0%, 0%, 50%) ou hsla(0, 0%, 0%, 0.5).

Couleurs haute définition

Le RVB et le TSL définissent les couleurs dans la gamme sRVB. Les moniteurs plus récents acceptent beaucoup plus de couleurs que ne peuvent le décrire ces formats, et en dehors de la gamme sRGB. Vous pouvez choisir ces couleurs à l'aide de différentes fonctions CSS.

Fonction color()

h1 {
  color: color(srgb 0.9 0.2 0.4);
}

La fonction CSS color() vous permet de choisir une couleur dans un espace colorimétrique spécifique. Le premier argument est l'espace de couleurs à utiliser, qui définit les options pour les canaux suivants. Comme pour rgb(), vous pouvez définir le canal alpha en définissant un nombre compris entre 0 et 1, ou un pourcentage, après un /.

Par exemple, la couleur RVB rouge foncé de l'extrait de code précédent, qui est définie comme rgb(183 21 64), peut être définie avec des pourcentages en tant que rgb(72% 8% 25%). Vous pouvez utiliser la fonction color() avec le mot clé srgb pour spécifier la même couleur avec color(srgb .72 .08 .25).

srgb définit l'espace colorimétrique et nous indique que les trois arguments suivants sont le rouge, le vert et le bleu. Les valeurs vont de 0 à 1 au lieu de 0 à 255.

Comme pour rgb(), nous pouvons définir l'alpha avec un / et un pourcentage, ou un nombre décimal compris entre 0 et 1.

Vous pouvez utiliser de nombreux espaces de couleurs avec la fonction color(), chacun avec des avantages et des cas d'utilisation différents.

Display P3

h1 {
  color: color(display-p3 0.9 0.2 0.4);
}

La gamme Display P3 contient 50% de couleurs en plus que le sRVB. Vous pouvez spécifier toutes les couleurs de la gamme Display P3 avec l'espace colorimétrique Display P3 à l'aide de la fonction color().

Pour définir le noir dans Display P3, définissez-le sur color(display-p3 0 0 0). Après avoir spécifié l'espace colorimétrique display-p3 pour la fonction color(), vous disposez de trois canaux: rouge, vert et bleu, comme pour color(srgb). Toutefois, comme les valeurs de canal représentent des coordonnées dans un espace colorimétrique plus large, les mêmes valeurs de canal auront des significations différentes.

color(srgb 1 .5 0) est une couleur orange qui équivaut à color(display-p3 0.93596 0.52724 0.1983). Nous pouvons rendre l'orange encore plus éclatant en l'étendant au-delà de l'espace sRVB, jusqu'à color(display-p3 1 .5 0).

Oklab

Oklab est défini avec la fonction oklab(), avec les canaux de luminosité, a et b. Il est utile pour créer des dégradés fluides et pour ajuster la saturation d'une couleur, tout en conservant la teinte et la luminosité.

h1 {
  color: oklab(75% 0.1 0.1)
}

Le canal de luminosité va de 0 à 1 ou de 0% à 100%. Les couleurs dont la luminosité est de 0 seront toujours noires.

Le canal a va de -0.4 à 0.4 ou de 0% à 100%. Les valeurs inférieures sont plus vertes, et les valeurs supérieures sont plus rouges.

Le canal b va de -0.4 à 0.4 ou de 0% à 100%. Les valeurs inférieures sont plus bleues, et les valeurs supérieures sont plus jaunes.

OkLCh

OkLCh est la forme polaire ou cylindrique d'OKLab. Elle est définie avec les canaux de luminosité, de chroma et de teinte. Il est utile pour ajuster les couleurs de manière uniforme. Cela signifie que les modifications apportées à la teinte n'affecteront pas la luminosité ni la saturation d'une couleur.

h1 {
  color: oklch(80% 0.1 200)
}

Vous avez travaillé avec la luminosité et la teinte en HSL, et la chrominance est semblable à la saturation. Vous pouvez définir le noir avec oklch(0 0 0) et le blanc avec oklch(1 0 0).

Le canal de luminosité va de 0 à 1 ou de 0% à 100%. Les couleurs dont la luminosité est de 0 seront toujours noires.

Le canal chroma définit la vivacité d'une couleur : 0 ou 0% correspond à une désaturation, et les valeurs plus élevées correspondent à une couleur plus vive. Une valeur de 100% est identique à .4, mais il est possible de sortir rapidement de la gamme de couleurs avec des valeurs proches de .4.

La teinte est spécifiée en degrés, tout comme hsl().

OkLCh n'est pas limité par une gamme comme Display P3. Vous devez donc vous assurer de créer des couleurs pouvant être affichées. oklch(80% 50% 200) est un bleu vif qui semble numériquement être une couleur raisonnable, mais il se trouve en dehors de la gamme Display P3.

Autres espaces

Il existe de nombreuses façons de spécifier des couleurs en CSS, et vous n'avez pas besoin de les apprendre toutes. Les formats rgb() et hexadécimal sont couramment utilisés dans les outils de conception et dans le code existant. Il est utile de les connaître. Il est également utile de se familiariser avec un format qui peut être manipulé de manière prévisible. Vous pouvez modifier directement les valeurs hsl ou oklch et avoir une idée de la couleur obtenue.

Pour en savoir plus, consultez Accéder à plus de couleurs et à de nouveaux espaces.

Couleurs système

En plus des couleurs nommées comme le violet ou le turquoise, des mots clés spéciaux sont également disponibles:

• transparent est une couleur totalement transparente. Il s'agit également de la valeur initiale de background-color.
• currentColor est la valeur dynamique calculée de manière contextuelle de la propriété color. Si la couleur du texte est red, puis que vous définissez border-color sur currentColor, elle sera également red. Si aucune valeur de couleur n'est définie pour l'élément sur lequel vous définissez currentColor, currentColor sera calculé par la cascade.

Manipuler les couleurs

Même si vous avez une palette de couleurs à utiliser sur votre site, vous aurez peut-être besoin de variantes de ces couleurs pour les états de survol, les bordures et d'autres éléments d'interface utilisateur. Vous pouvez spécifier chaque couleur, mais le CSS permet également de transformer les couleurs pour créer ces variantes.

color-mix()

Pour utiliser le résultat du mélange de deux couleurs, vous pouvez utiliser la méthode color-mix(). Cela permet de mélanger une couleur avec du blanc ou du noir pour créer une variante plus claire ou plus sombre.

Pour utiliser color-mix(), vous devez définir les deux couleurs, la manière dont elles doivent se mélanger (la méthode d'interpolation) et la quantité de chaque couleur.

Pour les espaces de couleurs qui ont une teinte, vous pouvez également choisir le sens dans lequel vous souhaitez faire le tour de la roue de couleurs. Par défaut, le chemin shorter est utilisé, mais vous pouvez également choisir longer, ou increasing et decreasing.

L'espace de couleurs et la direction constituent ensemble la méthode d'interpolation.

Vous pouvez également indiquer la quantité de chaque couleur à mélanger.

Syntaxe des couleurs relatives

Vous pouvez également travailler plus directement avec une couleur à l'aide de la syntaxe de couleur relative, qui vous permet de prendre n'importe quelle couleur et d'effectuer des calculs dessus pour créer une nouvelle couleur.

h1 {
  color: oklch(from red l c h);
}

L'utilisation de la fonction oklch() signifie que vous allez travailler avec les canaux de luminosité, de chromie et de teinte. Après le mot clé from, vous pouvez spécifier n'importe quelle couleur dans n'importe quelle syntaxe. Vous obtenez alors chaque valeur de canal à utiliser comme lettre. La couleur rouge s'affichera, sans aucun ajustement.

Pour effectuer des ajustements, vous pouvez utiliser la fonction calc() pour modifier les valeurs du canal ou simplement le remplacer complètement. Ici, nous utilisons la même couleur red, mais nous la définissons avec oklch(62% 0.25 29).

h1 {
  color: oklch(from oklch(62% 0.25 29) calc(l / 2) c 180);
}

Le canal de luminosité est 62% / 2 ou 31%. Le canal de chrominance n'est pas modifié, il est donc 0.25. Le canal de teinte est 180. La couleur oklch(31% 0.25 180), une couleur vert foncé, est alors créée.

Vous utiliserez souvent une propriété personnalisée comme couleur d'entrée. Vous pouvez ainsi créer des variations de couleur de manière dynamique.

Vous pouvez le faire avec n'importe quelle fonction de couleur. Il est utile de le faire avec des fonctions de couleur qui ont des canaux qui décrivent les modifications que vous souhaitez apporter. Par exemple, si vous souhaitez ajuster la luminosité d'une couleur, choisissez oklch ou hsl, car vous pouvez modifier directement le canal de luminosité.

h1 {
  color: oklch(from var(--primary-color) calc(l * 0.9) c h);
}

La syntaxe de couleur relative (RCS, Relative Color Syntax) vous permet de créer une palette de couleurs à utiliser pour votre site.

Couleurs hors du gamut

Vos contenus seront affichés sur différents écrans qui peuvent ou non être compatibles avec les couleurs à large gamme. Si vous spécifiez une couleur qui n'est pas compatible avec un écran, un processus appelé mappage de la gamme de couleurs est appliqué pour trouver une couleur similaire pouvant être affichée à l'écran. Si vous souhaitez définir des couleurs spécifiques dans ces cas, vous pouvez utiliser la requête multimédia color-gamut.

Où utiliser la couleur dans les règles CSS

Si une propriété CSS accepte le type de données <color> comme valeur, elle accepte toutes les méthodes d'expression de la couleur décrites précédemment. Pour styliser le texte, utilisez les propriétés color, text-shadow et text-decoration-color, qui acceptent toutes la couleur comme valeur ou comme partie de la valeur.

Pour les arrière-plans, vous pouvez définir une couleur comme valeur pour background ou background-color. Les couleurs peuvent également être utilisées dans des dégradés, comme linear-gradient. Les dégradés sont un type d'image qui peut être défini par programmation en CSS. Les dégradés acceptent deux couleurs ou plus dans n'importe quelle combinaison de formats de couleur, tels que hexadécimal, RVB ou HSL.

Enfin, border-color et outline-color définissent la couleur des bordures et des contours de vos cases. La propriété box-shadow accepte également la couleur comme valeur.

Vérifier vos connaissances

Tester vos connaissances sur les couleurs

Ressources

• Démonstration pratique montrant comment utiliser des angles avec HSL
• Guide complet sur les couleurs
• Guide complet sur la gamme de couleurs étendue
• [vidéo] Comment lire les codes hexadécimaux
• Fonctionnement des codes hexadécimaux