Hex, RGB, HSL : Un guide rapide pour tous les autres
Codes couleur décodés pour les développeurs et non-designers qui ont juste besoin de la bonne nuance de bleu.
Un designer t'envoie une couleur : #3B82F6. Tu en as besoin en RGB pour une bibliothèque. Ou tu veux une version légèrement plus foncée. Ou tu essaies de comprendre pourquoi elle a l'air différente sur ton écran.
Les systèmes de couleur ne sont pas compliqués, mais personne ne les explique bien. Voici ce que tu dois vraiment savoir.
HEX : Le standard du web
#3B82F6 se décompose comme ça :
3B= Rouge (59 en décimal)82= Vert (130 en décimal)F6= Bleu (246 en décimal)
Chaque paire est un nombre hexadécimal de 00 à FF (0-255 en décimal). Plus = plus brillant. #000000 est noir. #FFFFFF est blanc.
Une notation courte existe : #FFF = #FFFFFF, #09C = #0099CC. Trois caractères s'étendent à six en doublant chacun.
RGB : L'évident
rgb(59, 130, 246) est la même couleur, juste écrite différemment. Rouge 59, Vert 130, Bleu 246.
Certains formats veulent des pourcentages : rgb(23%, 51%, 96%). Même chose, notation différente.
RGBA ajoute la transparence : rgba(59, 130, 246, 0.5) est ce bleu à 50% d'opacité.
HSL : Celui qui est vraiment utile
hsl(217, 91%, 60%) décrit la couleur différemment :
- Teinte (217) : Position sur le cercle chromatique. 0=rouge, 120=vert, 240=bleu.
- Saturation (91%) : Intensité. 0%=gris, 100%=vif.
- Luminosité (60%) : Clarté. 0%=noir, 50%=pur, 100%=blanc.
Pourquoi HSL compte : ajuster les couleurs est intuitif.
Tu veux une version plus foncée ? Baisse la luminosité. Tu veux une version atténuée ? Baisse la saturation. Tu veux une couleur complètement différente avec la même "sensation" ? Change la teinte, garde saturation et luminosité.
En HEX ou RGB, ces ajustements nécessitent des calculs ou des devinettes. En HSL, ce sont des changements de nombres uniques.
Convertir entre eux
Les nombres représentent la même couleur différemment. #3B82F6 = rgb(59, 130, 246) = hsl(217, 91%, 60%).
Utilise un convertisseur quand tu as besoin d'un format spécifique. La plupart des outils de design montrent les trois. CSS accepte les trois.
Situations courantes
"Rends cette couleur plus foncée" Convertis en HSL, réduis la luminosité de 10-20%, reconvertis.
"J'ai besoin de variations pour les états hover" Convertis en HSL. Bouton : 60% de luminosité. Hover : 55%. Actif : 50%.
"Cette couleur a l'air délavée" La saturation est peut-être trop basse. Essaie de l'augmenter en HSL.
"Correspondre exactement à la couleur de la marque" Obtiens le code hex des directives de marque. Ne l'estime pas à l'œil.
"La couleur a l'air différente sur différents écrans" Bienvenue dans l'enfer de la calibration des couleurs. Utilise le même code hex ; accepte que les moniteurs varient.
Note d'accessibilité
Le contraste des couleurs compte. Texte clair sur fond clair = illisible pour beaucoup de gens.
Il y a un ratio : 4.5:1 pour le texte normal, 3:1 pour le texte large. Des outils existent pour vérifier ça. En cas de doute, plus de contraste est mieux.
Texte blanc sur ce bleu #3B82F6 ? Le ratio de contraste est d'environ 4.6:1—tout juste passable. Un bleu plus foncé serait plus sûr pour le corps du texte.
Tu n'as pas besoin d'être designer. Tu as juste besoin de convertir entre les formats et savoir que HSL rend les ajustements plus faciles. Tout le reste, ce sont des détails.