Encyclopédie CSS: color

Modèle:Programmation La propriété color en CSS définit la couleur du texte d'un élément. Elle sert à styliser le contenu textuel et accepte aussi bien des noms de couleurs simples que des formats plus précis : HEX, RGB, RGBA, HSL, HSLA et variables CSS.

Formats de couleur

La propriété color peut recevoir plusieurs types de valeurs :

Noms de couleurs: noms prédéfinis comme red, blue ou green.
Code HEX: notation hexadécimale, par exemple #ff0000 pour le rouge.
RGB: format rgb(255, 0, 0).
RGBA: similaire à RGB, avec un canal de transparence, par exemple rgba(255, 0, 0, 0.5).
HSL: couleur définie par teinte, saturation et luminosité.
HSLA: format HSL avec transparence.
Variables CSS: valeurs réutilisables, par exemple var(--couleur-principale).

Exemple d'utilisation

L'exemple ci-dessous montre comment la propriété color définit la couleur du texte avec un nom de couleur, une valeur HEX, rgb() et rgba() avec transparence.

CSS : propriété color

HTML

<div class="color-demo">
    <p class="example1">Ce texte est rouge.</p>
    <p class="example2">Ce texte est bleu.</p>
    <p class="example3">Ce texte est vert.</p>
    <p class="example4">Ce texte est orange avec transparence.</p>
</div>

CSS

.color-demo {
    padding: 18px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    background: #f7f9fc;
    border: 1px solid #d6e0ea;
}

.color-demo p {
    margin: 0 0 10px;
    font-weight: 600;
}

.example1 {
    color: red;
}

.example2 {
    color: #0000ff;
}

.example3 {
    color: rgb(0, 128, 0);
}

.example4 {
    color: rgba(255, 140, 0, 0.8);
}

Résultat

Compatibilité avec les navigateurs

La propriété color est une propriété CSS fondamentale et fonctionne dans tous les navigateurs modernes, y compris sur mobile.

Notes

La couleur du texte peut être héritée de l'élément parent si elle n'est pas définie explicitement.
Pour des effets plus complexes, comme les dégradés, on utilise généralement background ou background-image.
Le contraste entre le texte et l'arrière-plan doit être vérifié pour préserver la lisibilité.

Exemple avec des variables

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
}

h1 {
    color: var(--primary-color);
}

p {
    color: var(--secondary-color);
}

Les variables CSS facilitent l'organisation de la palette de couleurs d'un site. Si la couleur principale change, il suffit de modifier la variable à un seul endroit.

Conclusion

La propriété color est l'un des outils de base pour contrôler l'apparence du texte en CSS. La prise en charge de plusieurs formats la rend utile aussi bien pour des exemples simples que pour des systèmes de design complets.

Autres articles sur le CSS

Modèle:Encyclopédie CSS/Nav Modèle:Navigation/CSS