Convertisseur de couleurs
Une couleur en entrée, toutes les notations en sortie, plus nuances et contraste WCAG.
Entrée
Hex, rgb(), hsl(), hsv(), cmyk() ou un nom de couleur CSS. Dans les pourcentages, la virgule et le point fonctionnent.
Certaines valeurs sortaient de leur plage et ont été ramenées dans les limites, comme le fait CSS.
Cette couleur est translucide. Hex, rgb(), hsl() et hsv() gardent l’alpha ; CMJN et la palette n’en ont pas, il y est donc ignoré.
Dans toutes les notations
- HEX
- RGB
- HSL
- HSV
- CMJN
- Nom
Le CMJN vient de la formule simple, sans profil d’imprimante ; les encres imprimées rendront différemment.
Nuances et harmonies
La luminosité avance par paliers égaux vers le blanc et vers le noir ; la complémentaire se trouve à l’opposé sur le cercle chromatique, les analogues à 30° de chaque côté. Cliquez sur une pastille pour copier son hex.
Plus claires
Plus foncées
Complémentaire
Analogues
Vérificateur de contraste
Saisissez une couleur valide ci-dessus et une seconde ici pour mesurer le contraste.
La première couleur, translucide, a été fondue sur la seconde avant la mesure ; l’alpha de la seconde couleur est ignoré.
| Niveau WCAG | Minimum | Résultat |
|---|---|---|
| AA, texte normal | 4.5:1 | – |
| AA, texte large | 3:1 | – |
| AAA, texte normal | 7:1 | – |
| AAA, texte large | 4.5:1 | – |
Un texte large fait au moins 18 pt, ou 14 pt en gras (environ 24 px, ou 18,7 px en gras). Le rapport est jugé sur sa valeur exacte et affiché avec deux décimales.
Outils associés
-
Convertisseur d’unités
Saisissez une valeur et retrouvez ses équivalences dans huit familles d’unités. -
Texte en binaire
Passez du texte aux octets et inversement, en ASCII ou UTF-8. -
Convertisseur de chiffres romains
Passez des nombres aux chiffres romains, avec le détail. -
Convertisseur d’images
Un nouveau format, sans changer les dimensions. -
Calculateur de rapport d’image
Trouvez les proportions exactes et la dimension qui vous manque. -
Normaliser les icônes SVG
Une grille commune pour vos icônes, sans transformer les tracés en pixels.
Collez ou saisissez une couleur dans la notation que vous avez : un code hex avec ou sans #, rgb() ou rgba(), hsl(), hsv(), cmyk() ou l’un des 148 noms de couleur CSS. Le convertisseur l’affiche dans les autres notations pendant la saisie, et le sélecteur natif à côté du champ se synchronise dans les deux sens. En dessous, des nuances plus claires et plus foncées, la couleur complémentaire et deux analogues forment une palette rapide, et le vérificateur de contraste mesure le rapport WCAG face au blanc, au noir ou à toute autre couleur. Tout tourne dans votre navigateur ; la couleur n’est envoyée nulle part.
Mode d'emploi
- Saisissez ou collez une couleur : #1e90ff, rgb(30, 144, 255), hsl(210, 100%, 56%) ou dodgerblue.
- Lisez-la dans les autres notations et copiez celle qu’il vous faut ; Ctrl+Maj+C copie la valeur en cours.
- Déplacez le sélecteur à côté du champ pour ajuster la couleur ; le champ et les notations suivent.
- Choisissez blanc, noir ou une autre couleur dans le vérificateur et lisez le rapport avec ses mentions réussi ou échoué.
Ce qu'il prend en charge
- Accepte l’hex à 3, 4, 6 et 8 chiffres, rgb() en valeurs ou pourcentages, hsl(), hsv() ou hsb(), cmyk(), les listes comme 30, 144, 255 et les 148 noms de couleur CSS.
- Conserve l’alpha dans hex, rgb(), hsl() et hsv() ; CMJN et la palette n’en ont pas, et une note le signale.
- Ramène les valeurs hors plage dans leurs limites comme CSS et le dit ; la teinte fait le tour du cercle.
- Comprend la virgule décimale dans les pourcentages comme 55,9% quand la liste est séparée par des espaces.
- Affiche chaque verdict de contraste en toutes lettres et par un symbole, jamais par la couleur seule.
FAQ
Quelle différence entre HSL et HSV ?
Les deux décrivent une couleur par teinte, saturation et un troisième axe. En HSL, c’est la luminosité : 100 % est toujours blanc, 50 % la teinte pure à pleine saturation. En HSV, ou HSB, c’est la valeur : 100 % est la teinte pure, et le blanc s’obtient en baissant la saturation. Les logiciels de création utilisent souvent HSV, CSS utilise HSL ; le convertisseur calcule les deux.
Pourquoi le CMJN rend-il différemment à l’impression ?
Le CMJN affiché vient de la formule simple : le noir prend la part la plus sombre de la couleur et les trois autres encres remplissent le reste, sans profil ICC. L’impression réelle dépend du papier, des encres et du profil de l’imprimeur, dont le logiciel convertit la couleur RGB à travers ce profil ; ses pourcentages différeront donc. Prenez ce CMJN comme point de départ, pas comme valeurs définitives.
Quel rapport de contraste faut-il pour du texte ?
WCAG 2 demande au moins 4,5:1 entre un texte normal et son fond au niveau AA, et 3:1 pour un texte large, soit 18 points ou 14 points en gras, environ 24 px ou 18,7 px en gras. Le niveau AAA monte à 7:1 et 4,5:1. Le vérificateur calcule le rapport à partir de la luminance relative définie par la norme et juge la valeur exacte : 4,4999 échoue même si l’écran affiche 4,50.
La couleur saisie est-elle envoyée quelque part ?
Non. La lecture, la conversion et le calcul du contraste se font dans la page elle-même : rien ne quitte votre appareil et la page fonctionne hors connexion. La dernière couleur et la seconde couleur du vérificateur restent dans ce navigateur, et la couleur principale figure dans la barre d’adresse sous la forme ?c= pour qu’un lien copié l’ouvre. Effacer supprime les deux.
Mis à jour le