Quatre champs synchronisés pour une seule couleur : saisissez un code HEX, une valeur rgb(), une valeur hsl() ou des pourcentages CMJN et les trois autres se mettent à jour aussitôt. Le panneau prend un voile discret de la teinte choisie afin que la valeur soit toujours vue en contexte, et l’échantillon indique son rapport de contraste WCAG face au texte noir ou blanc. Sous les champs, un nuancier de teintes et d’ombres ainsi que les harmonies complémentaire, triade et analogue : cliquez sur une pastille pour l’adopter comme nouvelle couleur de base.
Comment convertir une couleur
- 1 Saisissez une valeur dans n’importe quel champ — HEX, RGB, HSL ou CMJN — ou ouvrez le sélecteur depuis l’échantillon.
- 2 Les autres formats se mettent à jour instantanément, normalisés en notation CSS standard.
- 3 Explorez les variations avec le nuancier et les harmonies ; cliquez sur une pastille pour l’adopter.
- 4 Copiez la notation voulue grâce au bouton placé à côté de chaque champ.
Ce que les conversions calculent réellement
HEX et RGB décrivent la même chose dans deux notations : trois valeurs de canal de 0 à 255, écrites en décimal ou par paires de chiffres hexadécimaux. Passer de l’un à l’autre relève du pur formatage. L’analyseur accepte les quatre formes HEX courantes — #rgb, #rgba, #rrggbb et #rrggbbaa — et développe les formes courtes en doublant chaque chiffre : #f0c devient #ff00cc.
HSL est en revanche une véritable transformation. Il redécrit la même couleur en teinte (un angle de 0 à 360 sur la roue chromatique), saturation et luminosité. C’est pourquoi les designers y recourent : pour éclaircir une couleur, on change un seul nombre, alors qu’en RGB il faut déplacer les trois d’une manière facile à rater. Le CMJN est un modèle soustractif destiné à l’impression, et la conversion proposée ici est l’arithmétique standard : suffisante pour communiquer une couleur, mais sans gestion des couleurs. Un vrai travail d’imprimerie exige un profil ICC propre à la presse et au papier, et les valeurs fournies par l’imprimeur différeront.
Le contrôle de contraste applique la formule de luminance relative des WCAG, qui pondère les trois canaux différemment parce que la vision humaine est bien plus sensible au vert qu’au bleu. C’est pourquoi un bleu moyen et un vert moyen de « luminosité » RGB identique offrent des contrastes très différents sur blanc, et pourquoi juger le contraste à l’œil n’est pas fiable.
Où chaque format est nécessaire
Transmettre des couleurs aux développeurs
Les designers travaillent en HSL ; le CSS accepte les deux. Convertir une palette en HEX ou RGB donne aux développeurs des valeurs à coller directement dans une feuille de style ou un fichier de jetons de design.
Construire teintes et nuances
Une palette cohérente naît de la variation de luminosité sur une teinte fixe, non du choix de couleurs voisines à l’œil. Générer teintes et nuances depuis une base donne les variantes survol, désactivé et bordure qui vont réellement ensemble.
Vérifier l’accessibilité
Les WCAG imposent un rapport de contraste d’au moins 4,5:1 pour le texte courant et 3:1 pour le grand texte. Vérifier avant de figer une palette coûte bien moins cher que de la refaire après un audit d’accessibilité.
Préparer un fichier d’impression
Un logo défini en RGB doit passer en CMJN pour l’impression. La conversion ici fournit les valeurs de départ à discuter avec l’imprimeur, qui les ajustera à sa presse.
Pourquoi convertir les couleurs
Chaque étape du flux de travail parle une langue de couleur différente : les outils de design livrent du HEX, les variables CSS et le canvas préfèrent le RGB, ajuster la luminosité et les thèmes est bien plus simple en HSL, et tout ce qui part à l’impression réclame du CMJN. La conversion manuelle est source d’erreurs, et la plupart des sélecteurs en ligne sont des pages lourdes truffées de traceurs. Celui-ci ne pèse que quelques kilo-octets de mathématiques pures — canal alpha de #rrggbbaa et de rgba()/hsla() compris — exécutées en local : instantané et disponible hors ligne.
Là où les nombres cessent d’être exacts
La couleur est plus compliquée que l’arithmétique, et deux de ces formats cachent de vraies réserves :
- La conversion CMJN n’est pas gérée en couleur. Elle applique la formule standard sans profil ICC et ne peut donc tenir compte des encres, de la presse et du papier précis. Considérez la sortie comme une approximation et confirmez avec votre imprimeur.
- Beaucoup de couleurs RGB vives sont tout simplement non imprimables. Les verts et cyans lumineux d’écran sortent du gamut CMJN, et la conversion vous donnera silencieusement la couleur imprimable la plus proche sans vous avertir.
- La luminosité HSL n’est pas perceptuelle. Deux couleurs de même valeur L peuvent paraître nettement différentes : un jaune à 50 % semble bien plus lumineux qu’un bleu à 50 %. Les espaces perceptuellement uniformes comme OKLCH résolvent cela ; HSL non.
- Les arrondis s’accumulent. Convertir du RGB vers HSL puis revenir peut décaler un canal d’une unité : gardez un format comme référence plutôt que de convertir en boucle.
- Les rapports de contraste sont un seuil, pas une garantie. Franchir 4,5:1 ne rend pas confortable un texte gris clair et fin sur fond blanc.
Dépannage
- Mes valeurs CMJN semblent fausses face à mon épreuve d’impression
- Attendu sans gestion des couleurs. La formule standard ignore tout de votre presse, de votre jeu d’encres et de votre papier, qui décalent tous le résultat. Utilisez ces valeurs comme point de départ et laissez l’imprimeur fournir les valeurs corrigées, surtout pour des couleurs de marque où la précision compte.
- La même luminosité HSL donne des clartés visiblement différentes
- C’est HSL qui fonctionne comme prévu, pas un bug. La luminosité en HSL est un milieu mathématique et non perceptuel, et l’œil est bien plus sensible à certaines teintes qu’à d’autres. S’il vous faut des échantillons d’égale clarté apparente, ajustez à l’œil ou passez à un modèle perceptuel.
- Ma couleur échoue au test de contraste mais paraît correcte
- Paraître correcte sur un bon écran dans une pièce bien éclairée n’est pas le test. Les seuils WCAG tiennent compte des écrans anciens, des reflets et des lecteurs à sensibilité au contraste réduite. Assombrir le texte de quelques crans règle généralement la question sans changement visible.
Questions fréquentes
Quels formats puis-je coller ?
HEX à trois, quatre, six et huit chiffres (avec ou sans #), rgb() et rgba(), hsl() et hsla(), ainsi que des pourcentages CMJN. L’alpha est conservé dès que le format cible le permet.
La conversion CMJN est-elle fidèle à l’impression ?
Elle utilise la formule standard indépendante du périphérique, celle qu’affichent les outils de design à l’écran. Le rendu exact en machine dépend du profil ICC de votre papier et de vos encres : validez toujours par une épreuve pour un travail professionnel.
Que représente le rapport affiché sur l’échantillon ?
Le rapport de contraste WCAG entre la couleur et le plus lisible du texte noir ou blanc. Visez au moins 4,5:1 pour le corps de texte et 3:1 pour les grands caractères.
De quel rapport de contraste ai-je réellement besoin ?
Le niveau WCAG AA impose 4,5:1 pour le texte courant et 3:1 pour le grand texte — 18 pt, ou 14 pt gras et au-delà. Le niveau AA pour les composants d’interface et les objets graphiques est aussi de 3:1. Le AAA porte le texte courant à 7:1, souhaitable pour la lecture longue mais rarement l’exigence légale.
Quand utiliser HSL plutôt que HEX ?
Utilisez HSL dès que vous créez des variations d’une couleur au lieu d’en spécifier une. Construire un état de survol, un état désactivé ou une série de teintes revient à ajuster la luminosité de quelques pour cent : évident à lire en HSL et opaque en HEX, où la parenté entre #4a7c59 et #3d6749 est invisible.
Pourquoi ne puis-je pas reproduire exactement ma couleur d’écran à l’impression ?
Les écrans émettent de la lumière, les imprimantes la réfléchissent : les deux reproduisent des gammes de couleurs fondamentalement différentes. Les couleurs d’écran les plus saturées n’ont pas d’équivalent imprimable, raison pour laquelle les chartes de marque indiquent en général des valeurs RGB et CMJN distinctes plutôt qu’une conversion de l’une vers l’autre.
Le canal alpha survit-il à la conversion ?
Entre HEX, RGB et HSL, oui : les trois disposent de notations qui portent l’alpha. Le CMJN n’a aucune notion de transparence, l’alpha y est donc abandonné ; si votre visuel en dépend, cela se règle dans la mise en page et non dans la valeur de couleur.