Aller au contenu principal

Outils couleur

Ces outils de couleur convertissent, comparent et génèrent des couleurs dans votre navigateur à partir des véritables formules de la science des couleurs plutôt que des approximations : la vraie fonction de transfert du sRGB, la luminance relative WCAG 2.x, OKLab pour tout ce qui est perceptuel, et les matrices de Machado pour le daltonisme. Rien n’est envoyé nulle part, et chaque nombre affiché peut être vérifié à la main.

15 outils100 % local

Choisir

Valider

Convertir

Référence

Générer

Quand utiliser un outil couleur dans le navigateur ?

Les outils de couleur ont un mode de défaillance inhabituel. Un outil PDF défectueux produit un PDF défectueux et vous le constatez aussitôt. Un outil de couleur fausse en silence produit un nombre plausible, vous le collez dans une feuille de style, et rien ne vous alerte — ni le navigateur, ni le build, ni la relecture — jusqu’à ce qu’une personne malvoyante ne puisse lire votre bouton, ou que le bleu de la marque sur la brochure imprimée arrive avec une nuance d’écart.

Les erreurs sont précises et elles reviennent. Élever un canal à la puissance 2.2 au lieu d’utiliser la véritable fonction de transfert par morceaux du sRGB, ce qui décale légèrement chaque ratio de contraste et fait basculer les cas limites. Omettre le modulo dans la formule de teinte, si bien qu’un sixième de l’espace colorimétrique renvoie un angle négatif. Combiner un premier plan semi-transparent sur rien du tout et annoncer un ratio de contraste pour une couleur qui n’apparaît jamais à l’écran. Générer une palette en incrémentant la luminosité HSL. Chacune de ces erreurs produit un résultat d’apparence parfaitement raisonnable.

Les calculs sont donc écrits ici d’après les spécifications plutôt que d’après les approximations qui circulent. Le contraste est la luminance relative WCAG 2.x avec la fonction par morceaux, calculée après composition de l’alpha sur le fond réel. Tout ce qui est perceptuel — échelles, mélanges, dégradés, couleur la plus proche qui passe — s’exécute en OKLab, la révision 2020 de l’idée du Lab qui a enfin corrigé la dérive de teinte bleue dont souffraient les espaces plus anciens. La simulation du daltonisme utilise les matrices de Machado, Oliveira et Fernandes appliquées au RGB linéaire, pas aux valeurs encodées en gamma — c’est ce qui distingue une simulation d’un simple lavage de couleurs.

Les outils refusent aussi de deviner. Un hex de cinq chiffres est une faute de frappe, pas une couleur, et il est rejeté plutôt que complété en quelque chose de plausible ; un convertisseur qui renvoie du noir en silence sur une entrée fautive vous tend un échantillon dont vous n’avez aucune raison de douter. Là où une conversion ne peut réellement pas être exacte — CMYK sans profil de presse, coordonnée OKLCH hors du gamut sRGB — la page le dit au lieu d’imprimer le nombre avec la même assurance que les résultats exacts.

Rien de tout cela n’a besoin de serveur. Une conversion de couleur tient en quelques dizaines de lignes d’arithmétique sur trois nombres ; une simulation d’image est une boucle sur un canvas que votre navigateur possède déjà. La Content-Security-Policy du site définit connect-src 'self', si bien qu’une palette de marque ou une capture d’écran non publiée déposée dans le simulateur ne peut pas quitter l’onglet, même si quelque chose ici essayait de l’envoyer.

Par où commencer : le Sélecteur de couleurs pour une couleur et toute sa gamme, le Vérificateur de contraste quand une paire doit passer le niveau AA, le Convertisseur de couleurs pour passer d’un format à l’autre, les Codes couleur pour trouver l’hex d’une couleur nommée, et le Test de daltonisme pour voir votre interface telle que la voit environ un homme sur douze, qui ne perçoit pas le rouge et le vert comme vous.

Questions fréquentes

Quel format de couleur utiliser concrètement en CSS ?

Hex pour une valeur que vous tapez une fois et ne retouchez plus — c’est compact, universellement compris et sans perte. HSL quand un humain va la modifier à la main, car « un peu plus sombre » et « moins saturé » n’y changent qu’un seul nombre. OKLCH quand c’est un programme qui calcule la couleur : une échelle générée, un dégradé, un état de survol interpolé. OKLCH est le seul des trois dont le chiffre de luminosité correspond à ce que rapporte l’œil, si bien que des nombres régulièrement espacés donnent à voir des couleurs régulièrement espacées.

Pourquoi deux outils me donnent-ils des valeurs HSL différentes pour le même hex ?

Presque toujours un arrondi plutôt qu’un désaccord. HSL, tel qu’on l’écrit habituellement — une teinte en nombre entier et un dixième de pourcent — contient moins de valeurs distinctes que les 16.7 millions qu’un hex peut exprimer, si bien que plusieurs valeurs hex se replient sur le même HSL et que la conversion inverse tombe sur celle que la formule produit. Là où les outils diffèrent vraiment, c’est dans le rendu d’un gris : la teinte d’une couleur à chroma nulle n’est pas définie, et certains affichent 0 quand d’autres affichent le résultat brut de l’arithmétique.

Le ratio de contraste calculé ici est-il le même que celui de Lighthouse ?

Oui. C’est la formule WCAG 2.x : linéariser chaque canal avec la fonction de transfert par morceaux du sRGB, les pondérer par 0.2126, 0.7152 et 0.0722, ajouter 0.05 aux deux luminances et diviser la plus grande par la plus petite. L’erreur la plus courante dans une implémentation maison consiste à élever les canaux à la puissance 2.2 à la place — proche, mais ce décalage suffit à faire basculer une paire limite de la réussite à l’échec. Le chiffre APCA affiché à côté vient d’un modèle entièrement différent et n’est qu’indicatif : ce n’est pas une norme à laquelle revendiquer une conformité.

Peut-on se fier aux valeurs CMYK d’un outil Web pour l’impression ?

Comme point de départ, pas comme spécification. Le CMYK dépend du périphérique : la même couleur sRGB devient des pourcentages d’encrage différents sur papier couché et sur papier non couché, et différents encore sur une autre presse avec d’autres encres. C’est ce qu’encode un profil ICC, et aucune page Web ne possède celui de votre imprimeur. Envoyez à l’imprimeur la référence sRGB ou Pantone et laissez-le convertir avec le profil du travail.

Quelle est la fiabilité d’un test de daltonisme en ligne ?

C’est une indication de dépistage, pas un diagnostic. Un résultat clinique vient d’un anomaloscope, sous un éclairage contrôlé, sur un écran étalonné — aucune de ces conditions n’est réunie sur votre bureau. Ce qu’un test en ligne peut honnêtement faire, c’est vous dire si vous lisez les mêmes figures qu’une personne à la vision des couleurs typique, ce qui suffit à mériter un suivi. Les planches ici sont générées à partir de paires de confusion trouvées par simulation plutôt que numérisées depuis un jeu de planches protégé, ce qui élimine la plus grande source d’erreur de la version en ligne habituelle : un JPEG d’une impression de 1917, recompressé, avec la fidélité chromatique — quelle qu’elle soit — du scanner.

Pourquoi les teintes et les nuances générées ici paraissent-elles plus régulières que celles obtenues ailleurs ?

Parce qu’elles sont générées en OKLCh plutôt qu’en incrémentant la luminosité HSL. HSL pondère les trois canaux également alors que la vision humaine pèse le vert environ dix fois plus que le bleu, si bien qu’une gamme construite dessus paraît claire dans les jaunes et sombre dans les bleus, à nombres identiques. Incrémenter la luminosité OKLCh sur une courbe, en gardant la teinte fixe et en réduisant le chroma aux deux extrémités, produit des paliers aussi réguliers à l’œil qu’à la mesure — et chaque palier est ramené dans le gamut sRGB, si bien qu’aucun ne se rend comme une couleur écrêtée et plate.

Que trouve-t-on d'autre sur ToolsByUs ?

ToolsByUs — Outils couleur