Convertisseur de codes couleur
Convertissez entre HEX, RGB, HSL, HSV et CMJN, et vérifiez le contraste du texte
Chargement de l’outil…
Saisissez une couleur dans l’un des formats HEX, RGB, HSL, HSV, CMYK, OKLCH ou nom CSS, et les autres formats se mettent à jour aussitôt. Utilisez-le pour reporter une couleur d’une maquette dans du CSS ou pour vérifier qu’un texte est assez contrasté par rapport à son fond.
Mode d’emploi
- Choisissez une couleur avec « Choisir une couleur » ou tapez une valeur dans un champ comme HEX ou RGB. Les autres champs suivent ; copiez n’importe lequel avec le bouton à côté.
- Réglez l’« Opacité » pour ajouter de la transparence ; le HEX passe alors à 8 chiffres et le RGB devient rgba.
- Sélectionnez une pastille sous « Plus clair et plus foncé » ou « Harmonies de couleurs » pour passer à cette couleur.
- Dans le « Vérificateur de contraste », réglez la « Couleur du texte » et la « Couleur de fond », et lisez le « Rapport de contraste » ainsi que les résultats AA et AAA.
Fonctionnement
- Le HEX écrit les valeurs de rouge, de vert et de bleu (de 0 à 255) avec deux chiffres hexadécimaux chacune. Par exemple, rgb(255, 99, 71) donne #FF6347.
- Rapport de contraste = (luminance relative de la couleur la plus claire + 0,05) ÷ (luminance relative de la couleur la plus foncée + 0,05), évalué selon les critères de succès 1.4.3 et 1.4.6 des WCAG 2.2. Le rapport est arrondi à l’inférieur.
- Le CMYK utilise une formule simple sans profil d’impression : la couleur réellement imprimée sera donc différente. Les couleurs récentes et la dernière couleur sont enregistrées sur cet appareil.
Questions fréquentes
- Comment convertir un code HEX en RGB ?
- Découpez le code en paires et convertissez chaque paire de l’hexadécimal en décimal. #3B82F6 donne 3B = 59, 82 = 130 et F6 = 246, soit rgb(59, 130, 246). Tapez-le dans le champ HEX pour le voir aussitôt.
- Quel rapport de contraste faut-il pour un texte ?
- Le niveau AA des WCAG demande 4,5:1 pour un texte normal et 3:1 pour un grand texte ; le niveau AAA demande 7:1 et 4,5:1. Un grand texte fait au moins 24 px, ou 18,66 px en gras.
- Qu’est-ce qu’un code HEX à 3 chiffres ?
- Une forme abrégée du code à 6 chiffres dans laquelle chaque chiffre est doublé. #F80 est la même couleur que #FF8800.
- Peut-il m’indiquer le nom d’une couleur ?
- Si la couleur correspond à l’un des 148 noms de couleurs CSS, ce nom s’affiche ; sinon, le nom CSS le plus proche et sa valeur HEX apparaissent.