Couleur

Podcast CSS – 006: Color Part One

La couleur est une partie importante de tout site web et dans CSS, il existe de nombreuses options de types de couleurs, fonctions et traitements.

Comment choisissez-vous le 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 comporte différents types de données, comme les chaînes et les nombres. La couleur est l'un de ces types et en utilise d'autres, telles que des chiffres pour leurs propres définitions.

Couleurs numériques

Il est très probable que la première exposition aux couleurs dans CSS s'effectue 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 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'il est utilisé dans une séquence de six chiffres, elles sont traduites en plages numériques RVB (0-255) qui correspondent 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. Dans le code hexadécimal, vous ajoutez deux autres chiffres à la séquence de six chiffres, formant une séquence de huit chiffres. Par exemple, pour définir le noir dans le code hexadécimal, écrivez #000000. Pour ajouter une transparence de 50 %, remplacez-la par #00000080.

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

  • Une valeur alpha de 0 % (qui est totalement transparente) est égale à 00: #00000000
  • 50% d'alpha correspond à 80: #00000080
  • L'alpha à 75% correspond à BF: #000000BF

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

  1. B est égal à 11, et multiplié par 16 équivaut à 176
  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 à l'aide des attributs Fonction de couleur rgb(), en utilisant des nombres ou des pourcentages comme paramètres. Les valeurs doivent être comprises entre 0 et 255, et les pourcentages doivent être compris entre 0% et 100%. Le RVB fonctionne sur l'échelle 0-255, 255 équivaut à 100%, et 0 à 0%.

Pour définir le noir en RVB, définissez-le sur rgb(0 0 0), 0 rouge, 0 vert et 0 bleu. Le noir peut également être défini comme rgb(0%, 0%, 0%). Le blanc est exactement le contraire: rgb(255, 255, 255) ou rgb(100%, 100%, 100%).

Une valeur alpha est définie dans rgb() de deux manières. Ajoutez un / après les paramètres rouge, vert et bleu. ou utiliser 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 récents, saisissez rgb(0 0 0 / 50%) ou rgb(0 0 0 / 0.5). Pour une meilleure compatibilité, utilisez la fonction rgba(). écriture: rgba(0, 0, 0, 50%) ou rgba(0, 0, 0, 0.5).

TSL (teinte, saturation, luminosité)

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

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

Cercle chromatique avec des étiquettes pour les valeurs en degrés par incréments de 60 degrés pour vous aider à visualiser ce que chaque valeur d'angle représente

La saturation indique l'intensité 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 de lumière ajoutée (du blanc au noir). Une luminosité de 100% vous donnera toujours du blanc.

Avec la fonction de couleur hsl(), vous définissez un "vrai noir" en écrivant hsl(0 0% 0%), ou même hsl(0deg 0% 0%). En effet, le paramètre de teinte définit le degré de la roue chromatique, Si vous utilisez le type numérique, cette valeur est 0-360. Vous pouvez également utiliser le type d'angle, à savoir (0deg) ou (0turn). La saturation et la luminosité sont définies par des pourcentages.

Fonction de couleur TSL décomposée visuellement. La teinte utilise la roue chromatique. La saturation apparaît en gris se fondant en bleu canard. La luminosité passe du noir au blanc.

Alpha est défini dans hsl(). de la même manière que rgb() en ajoutant une / après les paramètres de teinte, de saturation et de luminosité ou en utilisant les 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. Ce sont des noms anglais simples tels que violet, tomate et verge d'or. Certains des noms les plus populaires, d'après l'almanach du Web, sont noir, blanc, rouge, bleu et gris. Nos préférées incluent la verge d'or, l'aliceblue et le rose épicé.

Outre les couleurs standards, 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 contextuelle de la propriété color. Si la couleur du texte est red, puis que vous définissez border-color sur currentColor, il sera également rouge. Si aucune valeur n'est définie pour color dans l'élément pour lequel vous définissez currentColor, currentColor sera calculé par la cascade à la place

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

Si une propriété CSS accepte l'attribut <color> en tant que valeur, il accepte toutes les méthodes ci-dessus pour exprimer la couleur. Pour appliquer un style au texte, utilisez les propriétés color, text-shadow et text-decoration-color. qui acceptent tous 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. Les couleurs peuvent également être utilisées dans les dégradés, comme linear-gradient. Un dégradé est un type d'image qui peut être défini de manière programmatique dans CSS. Les dégradés acceptent deux couleurs ou plus 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 comme valeur.

Testez vos connaissances

Tester vos connaissances sur les couleurs

Parmi les couleurs suivantes, lesquelles sont valides ?

rbga(400 0 1)
rbga est une faute de frappe de rvba et 400 est plus volumineux qu'il ne l'accepterait de toute façon, ce qui le rend non valide.
#0f08
🎉
#OOFZ2
Il ne s'agit pas d'une valeur hexadécimale, il ne s'agit que de 5 chiffres et inclut un Z, ce qui la rend non valide.
rgb(255, 0, 0)
🎉
hsl(180deg 50% 50%)
🎉
hotpink
🎉

Repérez la couleur CSS non valide.

hsl(5, 0%, 90%)
Il s'agit d'une valeur Hsl valide.
hsl(.5turn 40% 60%)
Il s'agit d'une valeur Hsl valide.
hsl(0, 0, 0)
🎉 Vous l'avez trouvé, les 2e et 3e valeurs devraient être des pourcentages.
hsl(2rad 50% 50%)
Il s'agit d'une valeur Hsl valide.
hsl(0 0% 0% / 20%)
Il s'agit d'une valeur Hsl valide.

Ressources