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 % :
- B est égal à 11, et multiplié par 16 équivaut à 176
- F est égal à 15
- 176 + 15 = 191
- 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.
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.
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 debackground-color
.currentColor
est la valeur dynamique calculée contextuelle de la propriétécolor
. Si la couleur du texte estred
, puis que vous définissezborder-color
surcurrentColor
, il sera également rouge. Si aucune valeur n'est définie pourcolor
dans l'élément pour 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 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)
#0f08
hsl(180deg 50% 50%)
hotpink
rgb(255, 0, 0)
#OOFZ2
Repérez la couleur CSS non valide.
hsl(.5turn 40% 60%)
hsl(2rad 50% 50%)
hsl(5, 0%, 90%)
hsl(0 0% 0% / 20%)
hsl(0, 0, 0)