Skip to main content

Color

Les couleurs jouent un rôle essentiel dans la conception de sites web en CSS. Elles permettent de donner vie à votre contenu et d'attirer l'attention des utilisateurs. Ce tutoriel explique comment utiliser les couleurs en CSS pour styliser vos éléments HTML.

Prédéfinies​

CSS propose une variété de couleurs prédéfinies qu'on peu utiliser directement.
Elles ont toutes une valeur hexadécimale mais peuvent être utilisé par leur nom.

/* Utilisation d'une couleur prédéfinie */
div {
    background-color: red; /* Fond rouge */
    color: blue; /* Texte bleu */
}

Hexadécimales​

Il est aussi possible de définir des couleurs en utilisant leur code hexadécimal.
Ces codes représentent la quantité de rouge, vert et bleu dans la couleur.

/* Utilisation d'une couleur hexadécimale */
span {
    background-color: #ff0000; /* Fond rouge */
    color: #00ff00; /* Texte vert */
}

RGBA​

Les couleurs RGBA (Red, Green, Blue, Alpha) permettent de définir une couleur en spécifiant les niveaux de rouge, vert et bleu.
En plus de celà il est possible d'indiquer la transparence. La valeur de cette transparence va de 0 (complètement transparent) à 1 (complètement opaque).

/* Utilisation d'une couleur RGBA */
p {
    background-color: rgba(255, 0, 0, 0.5); /* Fond rouge semi-transparent */
    color: rgba(0, 255, 0, 0.8); /* Texte vert semi-transparent */
}

HSL​

HSL (Hue, Saturation, Lightness) est un système de couleurs qui permet de spécifier une couleur en fonction de sa teinte, de sa saturation et de sa luminosité.

/* Utilisation de valeurs HSL */
a {
    color: hsl(120, 100%, 50%); /* Texte vert */
    background-color: hsla(240, 100%, 50%, 0.5); /* Fond bleu semi-transparent */
}

Dégradé​

Les dégradés CSS permettent de créer des transitions entre deux ou plusieurs couleurs.

/* Utilisation de dégradés */
div {
    background-image: linear-gradient(to right, red, yellow); /* Dégradé de rouge à jaune */
}