Les couleurs s'expriment dans plusieurs formats selon le contexte. Comprendre HEX, RGB et HSL et savoir les convertir est indispensable pour tout designer ou développeur front-end.
Le format HEX
Le format hexadécimal (#RRGGBB) code chaque canal (rouge, vert, bleu) sur deux caractères de 00 à FF. C'est le format le plus utilisé en CSS et en design.
Exemple : #0ea5e9 = rouge 14, vert 165, bleu 233.
Le format RGB
RGB exprime chaque canal en décimal de 0 à 255 : rgb(14, 165, 233). Il est lisible et facile à manipuler mathématiquement. La variante RGBA ajoute un canal alpha pour la transparence.
Le format HSL
HSL décrit une couleur par sa teinte (hue, 0-360°), sa saturation et sa luminosité (0-100 %). Il est plus intuitif pour créer des variantes d'une couleur : changer la luminosité éclaircit ou assombrit sans modifier la teinte.
Exemple : hsl(199, 89%, 48%).
Quand utiliser quel format ?
- HEX : CSS, design tools, codes courts
- RGB/RGBA : transparence, calculs programmatiques
- HSL : palettes, variations de teinte, accessibilité
FAQ
Comment convertir un HEX en RGB ? Divisez le code hex en trois paires, convertissez chaque paire de base 16 en base 10.
Le HSL est-il meilleur que le RGB ? Non, ils sont équivalents. Le HSL est juste plus intuitif pour ajuster teinte et luminosité.
Conclusion
La conversion entre formats de couleur n'a plus de secret pour vous. Utilisez notre Color Converter pour convertir instantanément entre HEX, RGB et HSL.