Comment convertir une couleur
- Choisissez une couleur ou saisissez-la en HEX (#0071e3), RGB, HSL ou CMJN.
- Tous les formats s’affichent d’un coup. Cliquez sur Copier à côté de celui qu’il vous faut.
- Plus bas : palettes assorties, versions plus claires et plus foncées, et vérification du contraste du texte.
Comment ça marche
Tous les formats sont calculés à partir de la même valeur RGB : ils concordent toujours. HSL et HSV décrivent une couleur par sa teinte, sa saturation et sa luminosité, ce qui facilite les harmonies : les complémentaires sont à 180° sur le cercle chromatique, les triades à 120°. Les teintes et ombres gardent teinte et saturation et ne changent que la luminosité.
Le vérificateur utilise la formule de luminance relative de WCAG 2, celle des audits d’accessibilité.
Un exemple
Notre bleu #0071e3 correspond à rgb(0, 113, 227), hsl(210, 100 %, 44,5 %) et environ cmjn(100 %, 50 %, 0 %, 11 %). Sur blanc, il atteint un contraste de 4,70:1, juste au-dessus des 4,5:1 exigés par WCAG AA pour le texte courant.
Le gris classique #767676 sur blanc donne 4,54:1 et passe ; un cran plus clair, #777777, donne 4,48:1 et échoue. Voilà pourquoi les designers vérifient au lieu d’estimer. L’orange vif #ff9f0a sur blanc plafonne à 2,06:1 : correct pour une grande icône, pas pour du texte.
Quand l’utiliser
Pour traduire une couleur de charte graphique en valeurs CSS, Android ou impression. Pour composer une palette pour des diapositives, un site ou un logo. Pour vérifier qu’un texte de bouton est lisible avant publication. Pour trouver une nuance plus foncée pour le survol.
Pour colorer un QR code, utilisez Créer un QR code. Pour du texte sur une image, Générateur de mèmes a ses propres réglages de couleur.
Limites
- Les valeurs CMJN sont une conversion mathématique simple, sans profil d’impression. Pour une impression professionnelle, demandez le profil de l’imprimeur.
- Les couleurs sont en sRGB. Les couleurs à gamut étendu (Display P3) sont ramenées au sRGB.
- Le contraste suppose un fond uni ; un texte sur photo doit être vérifié autrement.
Questions fréquentes
Comment convertir du HEX en RGB ?
Coupez les six chiffres en trois paires et lisez chacune en hexadécimal : #0071e3 → 00, 71, e3 → 0, 113, 227. L’outil le fait pendant la saisie.
Quel contraste faut-il ?
WCAG AA demande au moins 4,5:1 pour le texte courant et 3:1 pour le grand texte (environ 24 px, ou 19 px en gras). AAA demande 7:1.
La valeur CMJN est-elle prête pour l’impression ?
C’est un bon point de départ, mais la couleur imprimée dépend du papier et des encres. Pour une couleur de marque, demandez une épreuve à l’imprimeur.
Quel format utiliser en CSS ?
Tous fonctionnent. Le HEX est le plus courant ; hsl() est pratique pour ajuster la luminosité à la main.