Convertisseur et sélecteur de couleurs
HEX, RVB, TSL — et vérification du contraste
Saisie
Résultat
- HEX
#1FA89C - RGB
rgb(31, 168, 156) - HSL
hsl(175, 69%, 39%) - CMYK
cmyk(82%, 0%, 7%, 34%)
Teintes et nuances (cliquez pour basculer sur cette couleur)
WCAG : le corps de texte demande 4,5:1 (AA), 7:1 pour AAA. Le CMJN n’est qu’indicatif — il ignore les profils colorimétriques.
Les logiciels de design parlent HEX, les animations CSS veulent du TSL, et le code canvas veut des canaux RVB. Choisissez une couleur une fois et obtenez toutes les notations, avec les chiffres de contraste qui décident si un texte posé dessus sera lisible.
Mode d’emploi
- 1 Choisissez une couleur, ou collez un code dans n’importe quel format.
- 2 Toutes les autres notations apparaissent simultanément.
- 3 Utilisez l’échelle de teintes et de nuances pour bâtir une palette cohérente.
- 4 Vérifiez les rapports de contraste avant de placer du texte dessus.
Questions fréquentes
Quel rapport de contraste me faut-il ?
Le WCAG AA exige 4,5:1 pour le corps de texte et 3:1 pour les grands caractères. Le AAA demande 7:1. En dessous de 3:1, le texte est réellement difficile à lire pour beaucoup de gens, et pas seulement peu confortable.
Pourquoi utiliser le TSL plutôt que le HEX ?
Le TSL sépare la teinte de la saturation et de la luminosité : éclaircir une couleur de 10 % se fait avec un seul nombre au lieu de tâtonner sur trois canaux. C’est pour cela que les design systems construisent leurs échelles en TSL.
La valeur CMJN est-elle utilisable pour l’impression ?
Seulement à titre indicatif. Une vraie conversion dépend du papier, de l’encre et du profil colorimétrique. Pour tout ce qui part sous presse, demandez les valeurs à l’imprimeur plutôt qu’à une formule.