Convertisseur de couleurs
Convertissez une couleur entre HEX, RGB, HSL, HSV et CMJN (CMYK), et vérifiez si deux couleurs ont assez de contraste pour un texte lisible.
Fonctionne entièrement dans votre navigateur
- HEX
- RGB
- HSL
- HSV / HSB
- CMJN (CMYK)
- Nom CSS
Vérificateur de contraste
Rapport de contraste –
| Usage | Minimum | Résultat |
|---|---|---|
| Texte normal, AA | 4,5:1 | |
| Texte normal, AAA | 7:1 | |
| Grand texte, AA | 3:1 | |
| Grand texte, AAA | 4,5:1 | |
| Icônes et éléments d'interface, AA | 3:1 |
Lit le HEX (3, 4, 6 ou 8 chiffres), rgb(), hsl(), hsv(), cmyk() et les noms de couleurs CSS ; les autres syntaxes de couleur CSS sont lues par votre navigateur quand il le peut. HSL, HSV et CMJN sont affichés avec une décimale.
Comment convertir une couleur
- Tapez ou collez une couleur dans n'importe quel format courant, comme
#1636a3,rgb(22, 54, 163),hsl(226, 76%, 36%)ounavy, ou choisissez-en une avec le sélecteur de couleur. - Copiez le format dont vous avez besoin dans la liste. Les valeurs se mettent à jour pendant la saisie.
- Sous Vérificateur de contraste, saisissez une couleur de texte et une couleur d'arrière-plan pour voir leur rapport de contraste et savoir si elles respectent les niveaux WCAG AA et AAA.
Formats de couleur et contraste
Un convertisseur de couleurs passe d'une notation à l'autre. HEX et RGB décrivent une couleur d'écran par des quantités de rouge, de vert et de bleu de 0 à 255 ; le HEX écrit simplement chaque quantité en deux chiffres hexadécimaux, avec une paire supplémentaire facultative pour l'opacité. HSL et HSV décrivent les mêmes couleurs par la teinte (un angle sur le cercle chromatique), la saturation, et la luminosité ou la valeur, ce qui facilite le choix d'une version plus claire ou plus terne d'une couleur. Ce sont des coordonnées différentes pour les mêmes couleurs sRGB : la conversion entre elles est donc exacte, aux arrondis près.
Le CMJN (CMYK en anglais) est différent : il décrit de l'encre, et la vraie conversion dépend du procédé d'impression. La valeur affichée vient de la formule naïve (le noir vaut 1 moins le canal le plus lumineux, et les autres encres complètent le reste), utile pour un travail approximatif mais qui ne remplace pas un profil d'impression.
Le vérificateur de contraste applique la formule de contraste WCAG 2, celle des audits d'accessibilité et des outils de développement des navigateurs. Il mesure uniquement le contraste de luminance : il ne peut donc rien dire des paires problématiques pour les daltoniens, comme du rouge sur du vert, et les polices très fines ou très petites peuvent nécessiter plus de contraste que le minimum.
Astuces
- Besoin de la couleur d'un pixel dans une photo ou une capture d'écran ? Utilisez la Pipette de couleur pour image.
- Vous créez un QR code aux couleurs de votre marque ? Le Générateur de QR code vous avertit quand le contraste est trop faible pour la lecture.
- Vous convertissez des nombres hexadécimaux qui ne sont pas des couleurs ? Essayez le Convertisseur de base numérique.
Questions fréquentes
La valeur CMJN convient-elle pour l'impression ?
Seulement de façon approximative. Le CMJN affiché ici vient de la formule simple qui convertit le RGB d'écran sans profil colorimétrique, celle qu'utilisent la plupart des convertisseurs en ligne. Les imprimeurs travaillent avec des encres et des papiers précis, décrits par un profil ICC : pour l'impression, convertissez dans un logiciel de PAO avec le profil fourni par votre imprimeur.
Comment le rapport de contraste est-il calculé ?
Avec la formule WCAG 2 : la luminance relative de chaque couleur est calculée à partir de ses valeurs sRGB, et le rapport vaut (plus claire + 0,05) divisé par (plus foncée + 0,05). Il va de 1:1 (aucun contraste) à 21:1 (noir sur blanc). Le texte actuel des WCAG utilise un seuil de 0,04045 dans la formule ; les anciennes versions indiquaient 0,03928, ce qui donne le même résultat pour toutes les couleurs 8 bits.
Quels rapports exigent les niveaux AA et AAA ?
Le texte normal exige 4,5:1 pour AA et 7:1 pour AAA. Le grand texte, c'est-à-dire au moins 24 px en normal ou environ 18,7 px en gras, exige 3:1 pour AA et 4,5:1 pour AAA. Les icônes, les bordures de champs et les autres éléments d'interface exigent 3:1 (WCAG 1.4.11). Un rapport n'est pas arrondi au supérieur : 4,49:1 échoue au niveau AA pour du texte normal.
Que se passe-t-il avec les couleurs transparentes ?
Une couleur de texte partiellement transparente est d'abord mélangée à l'arrière-plan, comme l'affiche un écran, et c'est la couleur obtenue qui est mesurée. Un arrière-plan partiellement transparent est supposé posé sur du blanc. Les canaux sont arrondis à des nombres entiers après le mélange, comme un écran les afficherait.
Pourquoi les valeurs HSL changent-elles légèrement après un aller-retour ?
Les couleurs d'écran ont 256 niveaux par canal : la plupart des valeurs HSL et HSV ne tombent donc pas exactement sur l'un d'eux. Le convertisseur garde une précision complète en interne et n'arrondit que pour l'affichage : HEX et RGB en nombres entiers, HSL, HSV et CMJN à une décimale.
L'outil connaît-il les noms de couleurs CSS ?
Oui, les 148 couleurs nommées de CSS, comme rebeccapurple et cornflowerblue. Tapez un nom pour le convertir ; quand une couleur correspond exactement à un nom, ce nom est aussi affiché. Certaines couleurs ont deux noms, comme aqua et cyan.