Les trois formats de couleur CSS
En CSS, une même couleur peut s’écrire de trois façons courantes. Le HEX (#3498db) note les composantes rouge, vert et bleu en hexadécimal. Le RGB (rgb(52, 152, 219)) les exprime de 0 à 255. Le HSL (hsl(204, 70%, 53%)) décrit la teinte (0 à 360°), la saturation et la luminosité, plus intuitif pour créer des variantes plus claires ou plus sombres.
Exemple de conversion
Le bleu #3498db correspond à rgb(52, 152, 219) : 34 en hexadécimal vaut 52, 98 vaut 152 et db vaut 219. En HSL, cela donne une teinte de 204°, une saturation de 70 % et une luminosité de 53 %.
Formats acceptés
- HEX à 3 ou 6 chiffres, avec ou sans le dièse (#fff, 3498db).
- rgb(r, g, b) avec des valeurs entières de 0 à 255.
- hsl(h, s%, l%) avec la teinte de 0 à 360.
Conseils de design
Pour créer une nuance plus foncée d’une couleur, conservez la teinte et diminuez la luminosité en HSL. Vérifiez toujours le contraste entre texte et fond : un rapport d’au moins 4,5:1 est recommandé pour l’accessibilité. Les valeurs sont arrondies à l’entier le plus proche, ce qui peut produire un écart minime lors d’un aller-retour.