Générateur de palette de couleurs

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 dégradé CSS compose un dégradé CSS visuellement et vous donne le code à copier. Choisissez un dégradé linéaire, radial ou conique et ajoutez de deux à huit points de couleur, chacun avec une couleur HEX et une position de 0 à 100 pour cent. Pour un dégradé linéaire, vous réglez l'angle en degrés ; pour un dégradé conique, vous réglez l'angle de départ ; pour les dégradés radiaux et coniques, vous choisissez une position comme centre ou haut gauche, et un dégradé radial peut être dessiné en cercle ou en ellipse. Un grand aperçu et le CSS généré se mettent à jour en direct pendant que vous travaillez, et tout est composé dans votre navigateur à partir de valeurs validées, si bien que vos couleurs, vos points et le CSS ne sont jamais envoyés ni stockés. Les couleurs se modifient sous forme de codes HEX à côté d'un sélecteur de couleur natif. C'est différent du Générateur de palette de couleurs, qui produit un ensemble d'échantillons distincts plutôt qu'un fond continu. Les couleurs d'un dégradé ne garantissent pas automatiquement un contraste suffisant pour le texte — vérifiez le contraste texte/fond séparément avec le Vérificateur de contraste WCAG.

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.