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 les types, les fonctions et les traitements de couleur.
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 propose 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.
Couleurs numériques
Il est très probable que vous ayez découvert les couleurs dans CSS via les couleurs numériques. Nous pouvons travailler avec des valeurs de couleur 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 % :
- B est égal à 11, ce qui donne 176 lorsqu'il est multiplié par 16.
- F est égal à 15
- 176 + 15 = 191
- 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)
.
Pour une compatibilité plus large, utilisez la fonction rgba()
et é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 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)
.
Mots clés de couleur
Le CSS compte 148 couleurs nommées. Il s'agit de noms en anglais courant, tels que "purple" (violet), "tomato" (tomate) et "goldenrod" (verge d'or). Selon l'Almanach Web, certains des noms les plus populaires sont le noir, le blanc, le rouge, le bleu et le gris. Nos favoris incluent le jaune doré, le bleu clair et le rose vif.
En plus des 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 debackground-color
.currentColor
est la valeur dynamique calculée de manière contextuelle de la propriétécolor
. Si la couleur de texte estred
et que vous définissezborder-color
surcurrentColor
, elle sera également rouge. Si aucune valeur pourcolor
n'est définie pour l'élément sur lequel vous définissezcurrentColor
,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>
comme valeur, elle accepte l'une des méthodes ci-dessus pour exprimer la couleur.
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 le format 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
Quelles couleurs sont valides ?
rbga(400 0 1)
#0f08
hsl(180deg 50% 50%)
rgb(255, 0, 0)
hotpink
#OOFZ2
Repérez la couleur HSL non valide.
hsl(0, 0, 0)
hsl(5, 0%, 90%)
hsl(0 0% 0% / 20%)
hsl(2rad 50% 50%)
hsl(.5turn 40% 60%)