Couleur

Podcast CSS – 006: Color, partie 1

La couleur est une partie importante de tout site Web. En CSS, il existe de nombreuses options pour les types de couleurs, les fonctions et les traitements.

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

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

Couleurs numériques

Il est très probable que votre première exposition aux couleurs dans CSS ait lieu via des couleurs numériques. Nous pouvons travailler avec des valeurs de couleur numériques sous différentes formes.

Couleurs hexadécimales

h1 {
  color: #b71540;
}

La notation hexadécimale (souvent abrégée en hexadécimal) est une syntaxe abrégée pour le 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'elles sont utilisées dans une séquence de six chiffres, elles sont traduites en plages numériques RVB, qui sont comprises entre 0 et 255, correspondant respectivement aux canaux rouge, vert et bleu.

Vous pouvez également définir une valeur alpha avec n'importe quelle couleur numérique. Une valeur alpha est un pourcentage de transparence. En code hexadécimal, vous ajoutez deux autres chiffres à la séquence de six chiffres, ce qui donne une séquence de 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 0-9 et A-F, les valeurs de transparence ne sont probablement pas celles que vous attendiez. Voici quelques valeurs clés courantes ajoutées au code hexadécimal noir, #000000:

• La valeur alpha de 0 % (qui est entièrement transparente) correspond à 00: #00000000
• La valeur alpha 50% correspond à 80: #00000080
• 75% alpha correspond à BF: #000000BF

Pour convertir un hexadécimal à deux chiffres en décimal, prenez le premier chiffre et multipliez-le par 16 (car l'hexadécimal est la base 16), puis ajoutez le deuxième chiffre. En utilisant l'exemple BF comme exemple pour une valeur alpha à 75 % :

1. B est égal à 11, qui équivaut à 176 lorsque 16 est multiplié par 16
2. F est égal à 15
3. 176 + 15 = 191
4. La valeur alpha est comprise entre 191 et 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(), en utilisant des nombres ou des pourcentages comme paramètres. Les valeurs doivent être comprises entre 0-255 et les pourcentages entre 0% et 100%. Le RVB fonctionne sur l'échelle de 0 à 255, donc 255 équivaut à 100 % et 0 à 0%.

Pour définir le noir en RVB, définissez-le comme rgb(0 0 0), qui correspond à 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 tout le contraire: rgb(255, 255, 255) ou rgb(100%, 100%, 100%).

Une valeur alpha est définie 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(). La valeur alpha peut être définie avec un pourcentage ou un nombre décimal compris entre 0 et 1. Par exemple, pour définir un noir alpha à 50% dans les navigateurs modernes, saisissez rgb(0 0 0 / 50%) ou rgb(0 0 0 / 0.5). Pour une prise en charge plus large, à l'aide de la fonction rgba(), écrivez rgba(0, 0, 0, 50%) ou rgba(0, 0, 0, 0.5).

TSL (teinte, saturation, luminosité)

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

HSL signifie teinte, saturation et luminosité. La teinte décrit la valeur indiquée sur la roue chromatique, de 0 à 360 degrés, en commençant par le rouge (0 et 360). Une teinte de 180 ou 50% correspondrait à la plage bleue. C'est l'origine de la couleur que nous voyons.

La saturation indique l'éclat de la teinte sélectionnée. Une couleur entièrement désaturée (avec une saturation de 0%) apparaîtra en nuances de gris. Enfin, la luminosité est le paramètre qui décrit l'échelle du blanc au noir de la lumière supplémentaire. Une luminosité de 100% donne toujours du blanc.

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

Alpha est défini dans hsl(), de la même manière que rgb() en ajoutant une / après les paramètres de teinte, saturation et luminosité, ou à l'aide de la fonction hsla(). La valeur alpha peut être définie avec un pourcentage ou 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).

Mots clés de couleur

Il existe 148 couleurs nommées en CSS. Il s'agit de noms anglais simples tels que violet, tomate et verge d'or. Selon l'almanach du Web, certains des noms les plus populaires sont le noir, le blanc, le rouge, le bleu et le gris. Nos coups de cœur incluent la verge d'or, l'aliceblue et le hotpink.

Outre les couleurs standards, des mots clés spécifiques sont également disponibles:

• transparent est une couleur totalement transparente. C'est aussi la valeur initiale de background-color.
• currentColor est la valeur dynamique contextuelle calculée de la propriété color. Si vous utilisez une couleur de texte red et que vous définissez border-color sur currentColor, il sera également rouge. Si l'élément pour lequel vous définissez currentColor n'a pas de valeur pour color définie, currentColor sera calculé par la cascade à la place.

Où utiliser la couleur dans les règles CSS ?

Si une propriété CSS accepte le type de données <color> en tant que valeur, elle accepte toutes les méthodes d'expression de couleur ci-dessus. 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 couleur dans la valeur.

Pour les arrière-plans, vous pouvez définir une couleur comme valeur pour background ou background-color. Vous pouvez également utiliser des couleurs dans les dégradés, comme linear-gradient. Les dégradés sont un type d'image qui peut être défini de façon programmatique en CSS. Les dégradés acceptent au moins deux couleurs dans n'importe quelle combinaison de formats de couleurs (hex, rvb ou hsl, par exemple).

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

Testez vos connaissances

Tester vos connaissances sur les couleurs

Ressources

• Démonstration pratique montrant comment utiliser les angles avec HSL
• Un guide complet sur les couleurs
• Un guide complet sur la large gamme de couleurs
• [vidéo] Explication de la lecture des codes hexadécimaux
• Fonctionnement des codes hexadécimaux