Sélecteur de couleur
Trouvez le code exact de n'importe quelle couleur, dans tous les formats.
Vérification du contraste
- AA
- AA grand texte
- AAA
- AA
- AA grand texte
- AAA
Fonctionne dans votre navigateur. Rien de ce que vous tapez n'est envoyé nulle part.
- 5 formats de couleur
- Vérification du contraste WCAG
- Prise en charge de l'opacité
Comment choisir une couleur
- Faites glisser dans le carré pour régler saturation et luminosité, puis déplacez le curseur de teinte.
- Ou tapez un code dans n'importe quel format : HEX, RGB, HSL, HSV ou CMJN.
- Copiez le code voulu et vérifiez son contraste ci-dessous.
Les formats de couleur comparés
Chaque ligne ci-dessous décrit le même orange. Seule la notation change.
| Format | Exemple | Utilisé dans |
|---|---|---|
| HEX | #f08a3c | CSS, HTML, outils de design |
| RGB | rgb(240, 138, 60) | CSS, éditeurs d'image |
| HSL | hsl(24, 84%, 59%) | CSS, le plus simple à ajuster à l'œil |
| HSV/HSB | hsv(24, 75%, 94%) | Sélecteurs des applis de peinture et de design |
| CMJN | cmyk(0%, 43%, 75%, 6%) | Design d'impression et mélange d'encres |
Utilisez HEX ou RGB pour le web, HSL quand vous voulez ajuster la luminosité ou la saturation d'une couleur sans changer sa teinte, et CMJN comme point de départ pour l'impression.
Niveaux de contraste WCAG
La vérification de contraste ci-dessous compare votre couleur au blanc et au noir purs et note les deux selon les niveaux WCAG 2.
| Niveau | Texte normal | Grand texte |
|---|---|---|
| AA | 4,5:1 | 3:1 |
| AAA | 7:1 | 4,5:1 |
Grand texte veut dire environ 24 px, ou 19 px en gras. La plupart des sites n'ont besoin de passer que le niveau AA. AAA est une barre plus stricte surtout utilisée sur les sites gouvernementaux ou centrés sur l'accessibilité.
Conseils pour choisir des couleurs accessibles
- Gardez la teinte fixe et baissez la luminosité en HSL pour obtenir une teinte plus sombre de la même couleur pour les états survol et actif.
- Une couleur qui réussit le niveau AA sur blanc peut échouer sur un fond teinté, donc vérifiez le contraste par rapport au vrai fond de la page, pas seulement au blanc ou au noir.
- La pipette ne fonctionne que dans Chrome et Edge sur ordinateur. Firefox et Safari n'ont pas encore ajouté l'API EyeDropper.
- Obtenez une épreuve d'imprimerie avant de faire confiance à une valeur CMJN pour un tirage complet. Les mêmes chiffres peuvent rendre différemment sur du papier couché ou non couché.
FAQ Sélecteur de couleur
Comment obtenir le code d'une couleur affichée à l'écran ?
Dans Chrome et Edge sur ordinateur, cliquez sur Prélever à l'écran, puis cliquez n'importe où sur votre écran. Les autres navigateurs ne proposent pas encore cette fonction, faites alors une capture d'écran et ouvrez-la dans un sélecteur de couleur d'image.
Quelle est la différence entre HEX, RGB et HSL ?
Ils décrivent la même couleur de façons différentes. HEX et RGB donnent les quantités de rouge, de vert et de bleu (HEX les écrit en base 16), tandis que HSL donne la teinte, la saturation et la luminosité, plus simples à ajuster à la main.
Quel taux de contraste faut-il pour un texte lisible ?
Le niveau AA du WCAG demande au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte, soit environ 24 px, ou 19 px en gras. Le niveau AAA monte le texte normal à 7:1.
Les valeurs CMJN sont-elles exactes ?
Ce sont une conversion mathématique directe depuis le RGB. Les vraies couleurs d'impression dépendent des encres, du papier et du profil de l'imprimante, donc utilisez-les comme point de départ et vérifiez une épreuve d'impression.
Que change le curseur d'opacité ?
Il règle la transparence de 0 (invisible) à 100 (plein). En dessous de 100, le code HEX gagne deux chiffres de plus et RGB devient rgba(). Le contraste est vérifié pour la couleur telle qu'elle apparaît sur chaque fond.
À quoi sert le HSV que le RGB n'offre pas ?
Le HSV sépare la teinte d'une couleur de sa luminosité et de sa saturation perçues, ce qui explique pourquoi les sélecteurs de peinture et les éditeurs photo donnent un curseur pour la teinte et un autre pour la luminosité au lieu de mélanger rouge, vert et bleu à l'œil.
Puis-je obtenir une couleur Pantone ici ?
Non. Pantone est un système de couleurs à la touche sous licence, lié à des encres précises, pas une simple conversion mathématique depuis le RGB ou le CMJN. Utilisez la valeur CMJN comme point de départ et confirmez la correspondance exacte avec votre imprimeur.