Codification des Couleurs en CSS : Guide Complet

Les couleurs jouent un rôle essentiel dans la conception web. En CSS, il existe plusieurs façons de définir une couleur pour styliser un élément HTML. Cet article explore les différentes méthodes de codification des couleurs en CSS et comment les utiliser efficacement.

1. Utilisation des Couleurs Nominales

CSS permet d’utiliser des noms de couleurs prédéfinis pour appliquer une teinte à un élément. Il en existe 140 standards, tels que :

p {
    color: red; /* Rouge */
    background-color: blue; /* Bleu */
    border: 2px solid black; /* Noir */
}

Parmi les couleurs disponibles, on retrouve : red, blue, green, yellow, purple, cyan, white, black, gray, etc.

2. Notation Hexadécimale (#RRGGBB)

Le format hexadécimal est largement utilisé en CSS. Il consiste à définir la couleur avec un code composé de six caractères hexadécimaux (0-9, A-F) :

h1 {
    color: #ff0000; /* Rouge */
    background-color: #00ff00; /* Vert */
    border: 2px solid #0000ff; /* Bleu */
}

Une version abrégée existe lorsque chaque paire de caractères est identique :

div {
    color: #f00; /* Équivaut à #ff0000 */
    background-color: #0f0; /* Équivaut à #00ff00 */
    border-color: #00f; /* Équivaut à #0000ff */
}

3. Notation RGB (rgb(R, G, B)) et RGBA (rgba(R, G, B, A))

Le format rgb() définit une couleur en précisant l’intensité de chaque composante (Rouge, Vert, Bleu) sur une échelle de 0 à 255 :

p {
    color: rgb(255, 0, 0); /* Rouge */
    background-color: rgb(0, 255, 0); /* Vert */
    border-color: rgb(0, 0, 255); /* Bleu */
}

Le format rgba() ajoute un quatrième paramètre, la transparence (alpha), allant de 0 (transparent) à 1 (opaque) :

div {
    background-color: rgba(255, 0, 0, 0.5); /* Rouge à 50% de transparence */
}

4. Notation HSL (hsl(H, S, L)) et HSLA (hsla(H, S, L, A))

Le modèle HSL (Hue, Saturation, Lightness) est basé sur la teinte (H en degrés de 0 à 360), la saturation (S en pourcentage de 0% à 100%) et la luminosité (L en pourcentage de 0% à 100%).

h1 {
    color: hsl(0, 100%, 50%); /* Rouge pur */
    background-color: hsl(240, 100%, 50%); /* Bleu pur */
}

Le format hsla() ajoute un canal alpha (transparence) :

p {
    background-color: hsla(120, 100%, 50%, 0.5); /* Vert avec 50% de transparence */
}

5. Notation currentColor et transparent

• currentColor permet d’hériter dynamiquement de la couleur du texte pour d’autres propriétés :

    div {
        border: 2px solid currentColor; /* Utilise la couleur du texte */
    }
  

• transparent définit une couleur entièrement transparente (équivalent à rgba(0,0,0,0)) :

    div {
        background-color: transparent;
    }
  

6. Dégradés de Couleurs avec linear-gradient() et radial-gradient()

CSS permet également de créer des dégradés de couleurs dynamiques :

Dégradé linéaire

body {
    background: linear-gradient(to right, red, blue);
}

Dégradé radial

div {
    background: radial-gradient(circle, red, blue);
}

Conclusion

La codification des couleurs en CSS offre une grande flexibilité pour styliser les éléments web. En utilisant les différentes notations (nominale, hexadécimale, RGB, HSL, gradient), vous pouvez créer des designs attrayants et dynamiques.

💡 Astuce : Utilisez des outils comme Coolors ou l'inspecteur de couleurs des navigateurs pour choisir facilement vos palettes de couleurs.