Convertisseur de couleur
Convertissez une couleur entre HEX, RGB, HSL et HSV, avec son contraste sur noir et sur blanc.
Fonctionne entièrement dans votre navigateur. Rien n'est envoyé, journalisé ni conservé.
Hexadécimal
#3498DB
- RGB
- rgb(52 152 219)
- HSL
- hsl(204.1 69.9% 53.1%)
- HSV
- hsv(204.1 76.3% 85.9%)
- Luminance relative
- 0,2830
- Contraste sur blanc
- 3,15:1
- Contraste sur noir
- 6,66:1
HEX, RGB, HSL et HSV sont quatre façons d'écrire la même couleur sRGB. Celle qui est pratique dépend de ce que vous faites : l'hexadécimal pour copier une valeur depuis une maquette, le HSL pour éclaircir légèrement sans changer la teinte.
Comment ça marche
L'entrée est lue en canaux rouge, vert et bleu de huit bits plus un alpha, et chaque sortie est calculée depuis ces canaux. Rien n'est converti depuis une autre sortie, donc une valeur ne peut pas dériver au fil d'une chaîne d'arrondis.
Les contrastes suivent WCAG 2.1 : chaque canal est linéarisé, pondéré selon ce que l'œil en retient, et le rapport vaut (le plus clair + 0,05) divisé par (le plus sombre + 0,05). L'échelle va de 1 pour deux couleurs identiques à 21 pour du noir sur du blanc.
Exemples
| Cas | Saisie | Résultat |
|---|---|---|
| Une valeur hexadécimale issue d'un fichier de maquette | #3498db | rgb(52 152 219), hsl(204 70% 53%) |
| La forme courte, qui répète chaque chiffre | #39d | #3399DD, not #039D |
| Avec transparence | rgb(52 152 219 / 0.5) | #3498DB80 |
Questions fréquentes
Un contraste de 4,5 signifie-t-il que mon texte est conforme ?
Cela dépend du texte, et c'est pourquoi le nombre est donné plutôt qu'un verdict. WCAG demande 4,5 pour du texte normal et 3 pour du grand texte, où grand veut dire au moins 18 points, ou 14 points en gras. Un outil qui ne voit que deux couleurs ne peut pas savoir quelle règle s'applique.
Pourquoi passer en HSL et revenir décale-t-il parfois d'un chiffre ?
Parce que l'hexadécimal a 256 pas par canal et que le HSL ne s'y divise pas également. L'aller-retour peut atterrir un pas à côté. Ici chaque notation est calculée depuis les canaux d'origine, donc les valeurs affichées sont toujours les plus proches de ce que vous avez saisi.
Quelle différence entre HSL et HSV ?
Ils partagent la teinte mais divergent sur le reste. En HSL, une luminosité de 100 % est du blanc et 50 % est la couleur pure. En HSV, une valeur de 100 % est la couleur pure et le blanc n'apparaît que si la saturation tombe à zéro. Les outils de design montrent souvent du HSV ; CSS parle HSL.
Les couleurs nommées comme « rebeccapurple » sont-elles gérées ?
Non. La liste des mots-clés CSS est une table d'environ 150 noms qui appartient à la spécification plutôt qu'à l'arithmétique, et cet outil convertit entre notations plutôt qu'il ne cherche des noms.
Bon à savoir
- Tout ici est en sRGB, l'espace que le web a toujours supposé. Les espaces plus larges qu'ajoute CSS Color 4 — lab, oklch, display-p3 — décrivent des couleurs que sRGB ne peut pas atteindre, et convertir vers eux demande une décision sur le sort de celles qui tombent en dehors. Cette décision n'est pas prise ici.
- Les contrastes sont des nombres, pas des verdicts. Qu'une paire passe dépend de la taille et de la graisse du texte, ce qu'une couleur seule ne connaît pas.