Couleur - Astuces CSS

Anonim

La colorpropriété en CSS définit la couleur du texte et des décorations de texte.

p ( color: blue; )

Valeurs

La colorpropriété peut accepter n'importe quelle valeur de couleur CSS.

  • Couleurs nommées: par exemple, «aqua».
  • Couleurs hexadécimales: par exemple, # 00FFFF ou # 0FF.
  • Couleurs RVB et RVBa: par exemple, rgb (0, 255, 255) et rgba (0, 255, 255, .5).
  • Couleurs HSL et HSLa: par exemple, hsl (180, 100%, 50%) et hsla (180, 100%, 50%, .5).

Couleurs nommées

p ( color: aqua; )

Les couleurs nommées sont également appelées couleurs de mots-clés, couleurs X11 ou couleurs SVG. Toutes les couleurs nommées sont opaques par défaut sauf transparent, qui est totalement transparente ou «claire». Consultez notre extrait de code Couleurs nommées et équivalents hexadécimaux pour obtenir la liste des couleurs nommées.

Couleurs hexagonales

Les couleurs hexadécimales, ou couleurs hexadécimales, sont spécifiées avec des valeurs alphanumériques. La première paire de caractères représente la valeur rouge, la deuxième paire représente la valeur verte et la troisième paire représente la valeur bleue, le tout dans une plage de 00 à FF.

p ( color: #00FFFF; )

Si les paires de valeurs rouge, bleue et verte sont toutes doubles, vous pouvez abréger la valeur hexadécimale en un raccourci à 3 caractères - par exemple, # 00FFFF peut être abrégé en # 0FF.

.full-hex ( color: #00FFFF; /* aqua */ ) .abbreviated-hex ( color: #0FF; /* also aqua */ )

Couleurs RVB et RVBa

Les couleurs RVB sont spécifiées avec une liste séparée par des virgules de trois valeurs numériques (allant de 0 à 255) ou des valeurs en pourcentage (allant de 0% à 100%). La première valeur représente la valeur rouge, la seconde représente la valeur verte et la troisième représente la valeur bleue. Les couleurs RVB sont opaques par défaut.

p ( color: rgb(0, 255, 255); )

RGBa ajoute une quatrième valeur pour le canal alpha, qui définit l'opacité de la couleur. La valeur alpha est un nombre compris entre 0,0 (totalement transparent) et 1 (totalement opaque).

p ( color: rgba(0, 255, 255, .5); )

Couleurs HSL et HSLa

Les couleurs TSL sont spécifiées avec une liste de trois valeurs séparées par des virgules: le degré de teinte (un nombre allant de 0 à 360), un pourcentage de saturation (allant de 0% à 100%) et un pourcentage de luminosité (allant de 0% à 100%). Les couleurs HSL sont opaques par défaut.

p ( color: hsl(180, 100%, 50%); )

HSLa ajoute une quatrième valeur pour le canal alpha pour contrôler l'opacité de la couleur. La valeur alpha est un nombre compris entre 0,0 (totalement transparent) et 1 (totalement opaque).

p ( color: hsla(180, 100%, 50%, .5); )

Démo

Voir les valeurs de couleur du stylo par CSS-Tricks (@ css-tricks) sur CodePen.

Notes d'utilisation

La colorpropriété cascades. Si vous le définissez sur le corps, tous les éléments descendants hériteront de cette couleur, à moins qu'ils n'aient leur propre jeu de couleurs dans la feuille de style de l'agent utilisateur.

Les bordures héritent colorsauf si une valeur de couleur est spécifiée dans la borderdéclaration.

La colorpropriété s'applique aux text-decorationlignes. Dans les navigateurs prenant en charge la text-decoration-colorpropriété, vous pouvez spécifier différentes couleurs pour le texte et ses lignes de décoration.

colors'applique également aux marqueurs d'élément de liste (comme les puces et les numéros). Vous ne pouvez pas définir une couleur distincte pour un marqueur d'élément de liste, mais vous pouvez le remplacer par une image avec la list-stylepropriété.

Bien que les couleurs nommées et les couleurs hexadécimales n'aient pas de canaux alpha, vous pouvez définir leur opacité avec la opacitypropriété dans tous les navigateurs actuels et IE9 +.

En rapport

  • font
  • text-decoration-color
  • opacity

Plus d'information

  • color dans la spécification W3C
  • color chez MDN
  • Article CSS-Tricks Yay pour HSLa

Prise en charge du navigateur

Chrome Safari Firefox Opéra C'EST À DIRE Android iOS
Tout Tout Tout Tout Tout * Tout Tout

* HSL, HSLa et RGBa sont pris en charge dans IE9 +.