L'outil de couleur s'appuie sur colord et ses greffons CMYK, accessibilité et mélange pour analyser les couleurs CSS, afficher HEX, RGB, HSL, HSV et CMYK, et générer 10 nuances vers le blanc et 10 vers le noir. S'y ajoutent un vérificateur de contraste premier plan/arrière-plan et, si le navigateur le prend en charge, la pipette d'écran EyeDropper.

1. 01Saisissez une couleur CSS : HEX, rgb(), hsl(), nom de couleur, ou passez par le sélecteur natif.
2. 02Copiez le format de couleur voulu, ou cliquez sur une nuance pour copier son HEX.
3. 03Dans la zone contraste, choisissez premier plan et arrière-plan, puis lisez le ratio et le verdict WCAG AA/AAA.
4. 04Sur un navigateur compatible EyeDropper, cliquez sur « pipette d'écran » ; annuler avec Esc ne déclenche aucune erreur.

• L'éventail accepté dépend du support de la syntaxe CSS par colord : ce n'est pas un analyseur complet de toutes les fonctions de couleur à venir des navigateurs.
• Les nuances sont le résultat algorithmique de colord.tints(10) / shades(10) et ne correspondent pas à la palette figée d'un design system.
• Le contrôle WCAG suit les seuils de contraste WCAG 2.0 implémentés par le greffon : AA texte normal 4.5, AA grand texte 3, AAA texte normal 7, AAA grand texte 4.5.
• EyeDropper n'est activé que dans les navigateurs qui prennent en charge cette API web ; il exige un clic de l'utilisateur et reste soumis aux permissions et au contexte sécurisé du navigateur.
• La pipette ne renvoie que le HEX sRGB sélectionné par l'utilisateur : aucune capture d'écran ni enregistrement continu.

Les calculs de couleur se font en local dans le navigateur ; la pipette EyeDropper ne renvoie une couleur unique qu'après un appel volontaire de l'utilisateur, et rien de l'écran n'est envoyé.