Couleur CSS

Définition de la propriété color

La propriété color définit la couleur du texte (couleur de premier plan en général) d'un élément.

Par exemple, la propriété color spécifiée dans le sélecteur body définit la couleur du texte par défaut pour toute la page. Essayons l'exemple suivant pour voir comment cela fonctionne :

body {
    color: #ff5722;
}

Remarque : La propriété color hérite normalement de la valeur de couleur de son élément parent, sauf dans le cas des éléments des liens . Par exemple, si vous spécifiez color pour l'élément body, il sera automatiquement transmis aux titres, paragraphes, etc.

Définition des valeurs de color

Les couleurs en CSS sont le plus souvent spécifiées dans les formats suivants :

• un mot-clé de couleur - comme "rouge", "vert", "bleu", "transparent", etc.
• une valeur HEX - comme "#ff0000", "#00ff00", etc.
• une valeur RVB - comme "rgb(255, 0, 0)"

CSS3 a introduit plusieurs autres formats de couleurs tels que HSL, HSLA et RGBA qui prennent également en charge la transparence alpha. Nous les découvrirons plus en détail dans le chapitre sur les couleurs CSS3 .

Pour l'instant, restons-en aux méthodes de base de définition des valeurs de couleur :

Mots clés de couleur

CSS définit quelques mots-clés de couleur qui vous permettent de spécifier facilement les valeurs de couleur.

Ces mots clés de couleur de base sont : aqua, noir, bleu, fuchsia, gris, vert, citron vert, marron, bleu marine, olive, violet, rouge, argent, bleu sarcelle, blanc et jaune. Les noms de couleurs ne sont pas sensibles à la casse.

h1 {
    color: red;
}
p {
    color: purple;
}

Cependant, les navigateurs Web modernes prennent pratiquement en charge beaucoup plus de noms de couleurs que ceux définis dans la norme CSS, mais pour plus de sécurité, vous devez plutôt utiliser des valeurs de couleur hexadécimales.

Voir la référence sur les noms de couleurs CSS , pour une liste complète des noms de couleurs possibles.

Valeurs de couleur HEX

Hex (abréviation de Hexadecimal) est de loin la méthode la plus couramment utilisée pour définir la couleur sur le Web.

Hex représentent les couleurs à l'aide d'un code à six chiffres, précédé d'un caractère dièse, comme #rrggbb, dans lequel rr, gg, et bb représentent respectivement les composants rouge, vert et bleu de la couleur.

La valeur de chaque composant peut varier de 00 (pas de couleur) à FF (pleine couleur) en notation hexadécimale, ou de 0 à 255 en notation décimale équivalente. Ainsi #ffffff représente la couleur blanche et #000000r eprésente la couleur noire. Prenons l'exemple suivant :

h1 {
    color: #ffa500;
}
p {
    color: #00ff00;
}

Remarque : Hexadécimal ou Hex fait référence à un schéma de numérotation qui utilise 16 caractères comme base. Il utilise les chiffres de 0 à 9 et les lettres A, B, C, D, E et F qui correspondent respectivement aux nombres décimaux 10, 11, 12, 13, 14 et 15.

Conseil : Si le code hexadécimal d'une couleur a des paires de valeurs, il peut également être écrit en notation abrégée pour éviter une frappe supplémentaire, par exemple, la valeur de couleur hexadécimale #ffffff peut également être écrite comme #fff, #000000 comme #000, # 00ff00 comme #0f0, #ffcc00 comme #fc0, et ainsi de suite.

Valeurs de couleur RVB

Les couleurs peuvent être définies dans le modèle RVB (rouge, vert et bleu) à l'aide de la notation fonctionnelle rgb().

La fonction rgb() accepte trois valeurs séparées par des virgules, qui spécifient la quantité de composant rouge, vert et bleu de la couleur. Ces valeurs sont généralement spécifiées sous forme d'entiers compris entre 0 et 255, où 0 représente aucune couleur et 255 représente une couleur complète ou maximale .

L'exemple suivant spécifie la même couleur que dans l'exemple précédent mais en notation RVB.

h1 {
    color: rgb(255, 165, 0);
}
p {
    color: rgb(0, 255, 0);
}

Remarque : Vous pouvez également spécifier des valeurs RVB dans la fonction rgb() en pourcentage, où 100 % représente la pleine couleur et 0 % ( pas simplement 0 ) représente l'absence de couleur. Par exemple, vous pouvez spécifier la couleur rouge sous la forme rgb(255, 0, 0) ou rgb(100%, 0%, 0%).

Conseil : Si R, G et B sont tous définis sur 255, c'est-à-dire rgb(255, 255, 255), la couleur serait blanche. De même, si tous les canaux sont réglés sur 0, c'est-à-dire rgb(0, 0, 0), la couleur serait noire. Jouez avec les valeurs RVB dans la démonstration suivante pour comprendre comment cela fonctionne réellement.

Manipuler les couleurs ici

Effet de la propriété de couleur sur les bordures et les contours

La propriété color n'est pas seulement pour le contenu du texte, mais pour tout ce qui se trouve au premier plan et qui prend une valeur de couleur. Par exemple, si la valeur border-color ou outline-color n'a pas été définie explicitement pour l'élément, la valeur de color sera utilisée à la place. Voyons un exemple :

p.one {
    color: #0000ff;
    border: 2px solid;
}
p.two {
    color: #00ff00;
    outline: 2px solid;
}