Convertisseur de couleurs et vérificateur de contraste
Convertissez entre HEX, RGB, HSL, HWB et OKLCH, et vérifiez le contraste.
Notations
- hex
#3b82f6- rgb
rgb(59 130 246)- hsl
hsl(217.2 91.2% 59.8%)- hwb
hwb(217.2 23.1% 3.5%)- oklch
oklch(62.3% 0.188 259.8)
Contraste
- Niveau WCAG
- AA
- Couleur de texte lisible
- Noir
- Luminance relative
- 0.2355
Lit une couleur dans n'importe quelle notation qu'une feuille de style peut contenir et vous donne toutes les autres, ainsi que le ratio de contraste par rapport au noir et au blanc. OKLCH est inclus car c'est la notation qui permet à une variante plus claire ou plus foncée de ressembler réellement à la même couleur — ce que HSL fait notoirement mal, puisque deux couleurs HSL avec la même luminosité peuvent différer énormément en apparence de clarté.
Comment ça marche
- La saisie accepte hex, rgb(), hsl(), hwb() et les noms de couleurs CSS, à la fois avec la syntaxe à virgules et la syntaxe moderne séparée par des espaces.
- Le contraste est le ratio WCAG 2.1, et la note est celle qu'obtiendrait un élément de la taille d'un texte de corps.
- Tout est recalculé pendant que vous tapez, dans la page ; aucune couleur n'est jamais envoyée où que ce soit.
Où vont vos données
Nulle part. Cet outil s’exécute entièrement dans votre navigateur : le texte collé est traité par la page, jamais transmis à un serveur ni consigné dans un journal.
Lorsqu’une exécution coûte des points, un résumé d’une ligne est enregistré dans votre propre historique pour que vous puissiez le retrouver. Ce résumé garde la forme de l’exécution — tailles, nombres, valeurs recherchées — jamais le contenu collé.
Ce que ça coûte
Cet outil est gratuit, sans connexion ni points.
Questions fréquentes
- Pourquoi la luminosité HSL ne correspond-elle pas à la clarté perçue d'une couleur ?
- Parce que la luminosité HSL est une simple moyenne des canaux les plus grands et les plus petits, pas un modèle de la vision humaine. hsl(60 100% 50%) est jaune et hsl(240 100% 50%) est bleu ; les deux prétendent avoir 50 % de luminosité, et le jaune est environ six fois plus lumineux à l'œil. La luminosité d'OKLCH est perceptuelle, c'est pourquoi la même valeur L semble aussi lumineuse sur toutes les teintes.
- De quel ratio de contraste ai-je réellement besoin ?
- 4,5:1 pour le texte de corps et 3:1 pour le texte à 18 pt ou 14 pt en gras pour respecter WCAG AA ; 7:1 respecte AAA. Les composants d'interface et les graphiques porteurs de sens nécessitent 3:1. En dessous de 3:1, rien ne passe.
- Puis-je utiliser OKLCH en production ?
- Oui. Tous les navigateurs actuels le prennent en charge, et il se dégrade proprement derrière une règle @supports ou une déclaration hex précédente pour les plus anciens. Cela vaut la peine de passer à OKLCH spécifiquement pour générer des échelles de couleurs, où HSL produit des étapes qui semblent inégales.
L’open source derrière
Cet outil est une implémentation autonome, sans bibliothèque tierce. Qix-/color-convert (MIT) fait le même travail sous forme de bibliothèque : pour l’intégrer à votre programme, commencez par là plutôt que d’appeler une page web.
Qix-/color-convertAussi appelé
- convertisseur couleur
- hex vers rgb
- rgb vers hex
- convertisseur hsl
- convertisseur oklch
- vérificateur contraste
- contraste wcag