Générateur de dégradé CSS

Le convertisseur de couleur HEX / RGB / HSL affiche une couleur dans les trois notations CSS. Saisissez un code HEX (3 ou 6 chiffres, avec ou sans #), utilisez le sélecteur de couleur natif, ou entrez des canaux RGB ou des valeurs HSL : les autres formats suivent. Les nombres HSL sont arrondis au degré et au pour-cent entiers, si bien qu'un aller-retour HEX vers HSL puis retour peut arriver à un pas de son point de départ. Il ne gère que les couleurs opaques — pas de canal alpha, donc ni #RRGGBBAA, ni rgba(), ni hsla() — et pas de couleurs nommées comme « rebeccapurple », ni CMJN, LAB, LCH ou OKLCH. La sortie est un #rrggbb en minuscules, rgb(r, g, b) et hsl(h, s%, l%), chacune copiable. Pour vérifier une paire texte/fond selon WCAG, utilisez le vérificateur de contraste WCAG ; pour décliner une couleur en un ensemble, utilisez le générateur de palette.

Vérifiez le ratio de contraste WCAG entre une couleur de texte et une couleur de fond, avec un aperçu en direct et un résultat clair de réussite ou d'échec selon les seuils WCAG 2.2 AA et AAA, pour le texte normal comme pour le texte large. C'est l'outil à utiliser pour choisir des combinaisons de couleurs accessibles sur un site, une application ou un document, car un texte à faible contraste est l'une des défaillances d'accessibilité les plus fréquentes et peut rendre un contenu illisible pour les personnes malvoyantes ou daltoniennes, ou en plein soleil sur un écran de téléphone. Le ratio est calculé localement avec la formule exacte de luminance relative de la spécification WCAG, si bien que les résultats correspondent à ceux d'un audit d'accessibilité automatisé, sans jamais rien envoyer à un serveur.

Le générateur de palette de couleurs décline une seule couleur HEX de base en onze échantillons en faisant tourner sa teinte et en modifiant sa luminosité. La ligne d'harmonie, c'est la base, son complément (teinte +180°), deux teintes analogues (±30°) et deux teintes triadiques (±120°). La ligne de nuances reprend la teinte et la saturation de la base et fixe la luminosité à cinq valeurs fixes — 20, 35, 50, 65 et 80 — ce sont donc des paliers de luminosité absolus, pas des teintes claires ou foncées relatives à la base. La saturation n'est jamais modifiée. La sortie est des codes HEX à copier ; il n'y a aucun contrôle d'accessibilité ou de contraste sur les paires, vérifiez donc les combinaisons texte et fond séparément avec le vérificateur de contraste WCAG. Une couleur HEX de base invalide ne produit tout simplement aucune palette.

Prévisualisez le rendu approximatif d'une image PNG, JPEG ou WebP pour des personnes ayant une déficience de la vision des couleurs, entièrement dans votre navigateur. Chargez une image locale et comparez l'original côte à côte avec une simulation approchée de la protanopie (sensibilité au rouge réduite), de la deutéranopie (sensibilité au vert réduite), de la tritanopie (sensibilité au bleu réduite) ou de l'achromatopsie (absence de couleur, calculée à partir de la luminance perceptuelle et non d'une simple moyenne des canaux). Chaque pixel est transformé localement sur un canvas ; l'image n'est jamais téléversée et rien n'est conservé après la fermeture de l'onglet. Le canal alpha est recopié tel quel, les zones transparentes restent donc transparentes, et vous pouvez exporter la vue simulée en PNG pour vos notes de conception ou vos rapports de bogue. La simulation est une approximation destinée à la conception et à la vérification visuelle, pas un diagnostic médical, et elle ne détecte ni ne mesure la vision de qui que ce soit. Le résultat dépend aussi de votre écran : la gestion des couleurs du navigateur et le calibrage de l'affichage varient d'un appareil à l'autre. Cet outil répond à une question différente de celle du Vérificateur de contraste WCAG, qui note le rapport entre deux couleurs précises, et de celle du Sélecteur de couleur d'image, qui lit la valeur exacte d'une couleur sous un point.