CSS : color - Web Formation

Description

La propriété color permet de définir la couleur du texte à l’intérieur d’un élément HTML.

Elle s’applique à tout texte : paragraphes, titres, liens, spans, listes, et peut être héritée par les éléments enfants.

color : définit la couleur du texte.
currentcolor : mot-clé spécial utilisé par d’autres propriétés CSS pour réutiliser la couleur définie par color.

Voici les valeurs les plus courantes utilisables pour color :

Type	Exemple	Description
Noms de couleurs	`red`, `blue`, `gold`	Liste de couleurs prédéfinies par CSS.
Hexadécimal	`#3498db`, `#fff`	Format le plus courant (3, 6 ou 8 caractères).
RGB / RGBA	`rgb(255, 0, 0)` `rgba(255, 0, 0, 0.5)`	Couleur précise + gestion de la transparence.
HSL / HSLA	`hsl(200, 70%, 50%)`	Format intuitif basé sur la teinte, saturation et luminosité.
currentcolor	`currentcolor`	Réutilise la couleur définie par `color`, pratique pour les bordures ou les ombres.

Démonstration interactive : color

Choisissez une valeur

Aperçu

Lorem ipsum

Langage naturel

Code HTML & CSS

<p class="demo">Lorem ipsum</p>

<p class="demo">Lorem ipsum</p>

.demo {
    color: blue /* Langage naturel */
}

.demo {    color: blue /* Langage naturel */}

.demo {
    color: #ff0035 /* Couleur hexadécimale */
}

.demo {    color: #ff0035 /* Couleur hexadécimale */}

.demo {
    color: rgb(15, 190, 210) /* Couleur RGB */
}

.demo {    color: rgb(15, 190, 210) /* Couleur RGB */}

La propriété color est héritée par les éléments enfants : modifier un conteneur affecte tout son texte.
Éviter les contrastes insuffisants (important pour l’accessibilité). Un bon contraste garantit une meilleure lisibilité.