CSS vous permet de spécifier des couleurs 24 bits (c'est 16,777,216 couleurs!) Pour les propriétés telles que la couleur du texte, couleur de fond et couleur de la bordure pour agrémenter vos créations. Vous pouvez soit utiliser des noms de couleur, hexadécimal ou RVB (rouge, vert, bleu) de notation.
Pour rendre les choses plus faciles, CSS comprend 16 noms de couleur standard en anglais courant ainsi que plus de 100 noms de couleurs étendue. Voici une liste des plus standard:
| Nom de couleur | Sortie |
|---|---|
| aqua | |
| black | |
| blue | |
| fuchsia | |
| gray | |
| green | |
| lime | |
| maroon | |
| navy | |
| olive | |
| purple | |
| red | |
| silver | |
| teal | |
| white | |
| yellow |
En outre, vous pouvez définir une valeur de couleur soit à aucun ou transparents pour empêcher l'élément de tirer n'importe quelle couleur (d'autres éléments à l'origine il montrera à travers).
Bien que les noms de couleurs devenir assez pratique parfois, ils sont bien trop rares pour convenir à chaque conception. Afin de puiser dans la gamme des couleurs 24 bits, vous pouvez utiliser les valeurs hexadécimales.
Les couleurs hexadécimales sont constituées d'un signe dièse # suivi d'un numéro à 6 chiffres hexadécimaux comme #ff065c . Les 2 premiers chiffres représentent la composante de couleur rouge, la seconde paire est le vert et le troisième est la composante bleue. Leur valeur peut varier de 00 à FF, #000000 être noir et #ffffff être blanc.
| Hexadécimal de la couleur | Sortie |
|---|---|
| #000 | |
| #3b948d | |
| #aed527 | |
| #ff7612 | |
| #fff |
Peut-être avez-vous remarqué que j'ai écrit #000 au lieu de #000000 pour l'affichage de couleur noire. Il s'agit d'une notation abrégée qui indique le chiffre de chaque paire une seule fois, si chaque paire se compose des mêmes chiffres. Par exemple #eeeeee peut être écrite comme #eee , #3399cc comme #39c et ainsi de suite. Utilisez cette mesure du possible de réduire la taille de votre code CSS.
Last but not least, vous pouvez également spécifier les valeurs de couleur en utilisant le modèle RVB (rouge, vert, bleu). C'est fondamentalement comme des couleurs hexadécimal mais au lieu de paires hex vous utilisez des valeurs décimales de 0 à 255 pour chaque composant de couleur comme rgb(red,green,blue) .
| Couleur RGB | Sortie |
|---|---|
| rgb(0,0,0) | |
| rgb(59,148,141) | |
| rgb(174,213,39) | |
| rgb(255,118,18) | |
| rgb(255,255,255) |
Vous pouvez déjà voir que la notation RVB produit plus de code que la notation hexadécimale tout en faisant exactement la même chose. Pour cette raison RVB est rarement utilisé sur hexadécimal. La plupart des graphiques couleurs de logiciels à la fois dans un format hexadécimal RVB et affichage de toute façon.
Le color propriété peut être utilisée pour changer la couleur du texte. Il peut être appliqué à n'importe quel élément HTML qui contient du texte.
Le background-color propriété ne peut être utilisé pour changer la couleur de fond de presque n'importe quel élément HTML.