Valeurs de couleur CSS

Les couleurs nommées suffisent pour démarrer. Marques et designs ont besoin de valeurs exactes — un teal précis, un voile doux, une teinte que l’on peut décaler un peu. Cela vient des formats de valeur de couleur : hex, rgb() / rgba() et hsl() / hsla().

Qu’est-ce qu’une valeur de couleur ?

Une valeur de couleur est ce que vous écrivez après une propriété qui accepte une couleur — par exemple après color: ou plus tard background-color:. La même propriété qu’avant ; des façons plus riches d’écrire la couleur. Les mots-clés nommés restent des valeurs. Aujourd’hui s’ajoutent les formats numériques que vous utiliserez chaque semaine.

Formats en un coup d’œil

Choisissez le format selon la tâche. Pas besoin de toute la syntaxe le premier jour — apprenez la carte, puis pratiquez les trois du quotidien.

Couleurs hex

Les valeurs hex commencent par # puis des chiffres hex (0–9, a–f). Formes courantes : six chiffres #rrggbb (complet) et trois #rgb (court — chaque chiffre se double). La casse n’importe pas.

Lire #0f766e

Les paires sont rouge, vert, bleu : 0f / 76 / 6e. Les apps de design exportent souvent cette chaîne — collez-la telle quelle dans CSS et gardez le #.

rgb() et rgba()

rgb() mélange les canaux rouge, vert et bleu de 0 à 255 (ou en pourcentages en syntaxe moderne). Ajoutez l’alpha avec rgba() ou une quatrième valeur pour une couleur partiellement transparente.

L’alpha en une phrase

L’alpha est la transparence de cette couleur — 1 (ou 100%) est opaque ; des valeurs plus basses laissent voir ce qui est derrière. Ce n’est pas retirer l’élément du layout.

hsl() pour penser en teinte

hsl() utilise la teinte (angle sur la roue), la saturation (%) et la luminosité (%). Pratique quand vous voulez « même famille, un peu plus clair » sans recalculer hex à la main.

Habitude d’ajustement

Gardez la teinte, montez la luminosité pour un texte plus calme, ou baissez-la pour un titre plus fort. La saturation contrôle le caractère vif de la couleur.

Quel format choisir ?

• Hex — par défaut en copiant depuis un fichier design ou une palette de marque
• rgb() / rgba() — quand les canaux comptent ou qu’il faut de l’alpha vite
• hsl() — en explorant ou en réglant une famille de couleurs liées
• Nommée — encore bien pour croquis et démos pédagogiques
  Tous sont valides aujourd’hui sur color ; vous les réutiliserez sur les fonds ensuite.

Essayez vous-même

1. Page avec h1, .lead et .note.
2. Titre en hex (#0f172a), lead en rgb(51, 65, 85), note en #0f766e.
3. Ajoutez .badge avec hsl(174, 77%, 28%) et une bordure HSL plus foncée de même teinte.
4. Adoucissez une étiquette avec rgba(15, 118, 110, 0.75) — elle doit paraître moins opaque que 1.
5. Optionnel : forme courte seulement si les paires se doublent vraiment ; sinon gardez six chiffres.

Erreurs fréquentes

• Oublier # avant hex (0f766e seul n’est pas une couleur valide)
• Lettres hors de a–f en hex
• Canaux RGB hors de 0–255 (ou unités mélangées)
• S’attendre à ce que l’alpha retire l’espace de layout comme display: none
• Traiter chaque format comme « plus spécifique » dans la cascade — le format ne change pas la spécificité

En bref

• Les valeurs de couleur sont des formats pour les mêmes propriétés qui acceptent une couleur
• Hex est le format quotidien à coller depuis le design
• rgb() / rgba() exposent canaux et alpha
• hsl() aide à penser teinte, saturation et luminosité
• Les couleurs nommées restent valides ; choisissez selon le besoin
• Pratiquez hex plus un format fonctionnel (rgba ou hsl) jusqu’à ce que les deux soient naturels