Sélecteur de couleur et convertisseur

Saisissez ou choisissez une couleur, lisez-la dans douze notations, générez un schéma d’harmonie et une échelle 50-900, et vérifiez son contraste WCAG.

Comment copier la couleur

1
Choisissez une couleur ou collez une valeur
Saisissez n’importe quelle notation reconnue par un navigateur : un code hexadécimal, rgb(), hsl(), oklch(), même un nom de couleur CSS. Le champ de texte est le contrôle principal ; l’échantillon et la pipette sont des raccourcis vers la même valeur.
2
Copiez-la dans n’importe quel format
Les douze notations s’affichent en même temps avec un bouton de copie à côté de chacune. Rien n’est caché dans un menu déroulant, donc convertir HEX en RGB prend un clic plutôt que trois.
3
Exportez la palette en CSS ou en JSON
La couleur de base, son échelle en dix étapes et toutes les couleurs extraites d’une image sortent ensemble sous forme de propriétés personnalisées CSS, de fragment de thème Tailwind, de variables SCSS ou de simple JSON.

Pourquoi l’espace de travail est OKLCH

HSL a un avantage pratique et un défaut sérieux. L’avantage est que la teinte, la saturation et la luminosité sont trois nombres distincts sur lesquels vous pouvez raisonner. Le défaut est que sa luminosité ne correspond pas à ce que vous voyez : hsl(60 100% 50%) est un jaune vif et hsl(240 100% 50%) est un bleu foncé, alors que les deux indiquent cinquante pour cent. C’est pour cela qu’en faisant tourner la teinte en HSL, on obtient des schémas d’harmonie où un échantillon ressort et un autre disparaît. OKLCH corrige ce problème. Sa clarté suit la perception humaine, donc déplacer uniquement la teinte maintient réellement la même luminosité. Chaque schéma et chaque échelle de cette page sont calculés dans cet espace puis reconvertis en sRGB pour la sortie.

Ce que signifient les valeurs de contraste

WCAG exprime le contraste comme un rapport entre la luminance relative de deux couleurs, de 1:1 pour des couleurs identiques à 21:1 pour du noir sur blanc. Le texte courant doit atteindre 4,5:1 pour satisfaire AA. Le texte large (18,66 px et plus, ou 14 px en gras) et les éléments d’interface comme les icônes et les bordures de champs doivent atteindre 3:1. AAA demande 7:1 pour le texte courant. Ce ne sont pas des préférences graphiques : c’est la différence entre une page lisible au soleil ou avec une vue imparfaite, et une page qui ne l’est pas. Quand une paire est en dessous, le bouton à côté du verdict réduit la clarté en OKLCH jusqu’à ce que le seuil soit atteint. Vous obtenez ainsi la version conforme la plus proche de votre propre couleur plutôt qu’une couleur différente.

Palettes extraites d’une photographie

Envoyez une image et ses couleurs dominantes sont extraites par découpe médiane : le nuage de pixels est divisé à plusieurs reprises selon le canal qui varie le plus, et la moyenne de chaque boîte obtenue devient un échantillon. Les doublons proches sont ensuite supprimés à l’aide de CIEDE2000, la mesure de distance perceptive, ce qui donne six couleurs distinctes plutôt que six nuances du même ciel. L’image est réduite à 400 pixels au préalable et ne quitte jamais votre navigateur.

Couleurs et images restent dans cet onglet

Chaque conversion est un calcul arithmétique effectué en JavaScript sur votre propre appareil ; il n’y a aucun appel d’API derrière. Une image que vous déposez pour une palette est décodée, réduite et échantillonnée localement, et n’est jamais envoyée ni stockée. Fermez l’onglet et il ne reste rien.

Questions fréquentes

Pourquoi OKLCH est-il meilleur que HSL ?

Parce que sa clarté correspond à ce que votre œil perçoit. En HSL, deux couleurs avec la même valeur de luminosité peuvent sembler très différentes en intensité, ce qui ruine les schémas d’harmonie et les rampes tonales. OKLCH est perceptuellement uniforme par construction, donc des pas égaux se voient comme égaux.

Pourquoi la valeur CMYK n’est-elle qu’indicative ?

Une vraie séparation CMJN dépend de la presse, de l’encre et du papier, décrits ensemble par un profil ICC. La valeur affichée ici vient d’une conversion arithmétique simple, utile pour se faire une idée mais fausse pour un tirage. Demandez à votre imprimeur les valeurs corrigées par le profil.

Comment lire un ratio de contraste comme 4,5:1 ?

Il compare la luminance de deux couleurs. 4,5:1 est le minimum WCAG AA pour le texte courant, 3:1 couvre le texte large et les éléments d’interface, et 7:1 correspond à AAA. Plus le rapport est élevé, plus la lecture est facile ; 21:1 correspond à du noir sur blanc.

La pipette fonctionne-t-elle dans Safari et Firefox ?

Pas encore. L’API EyeDropper est une fonctionnalité de Chromium. Dans les autres navigateurs, le bouton vous le signale et vous oriente vers la méthode par image : envoyez une photo et prenez la couleur dans la palette produite.

Comment obtenir une palette à partir d’une photo ?

Ouvrez les réglages, choisissez une image et indiquez combien de couleurs vous voulez, entre trois et douze. Les couleurs dominantes apparaissent en échantillons que vous pouvez copier individuellement ou exporter avec le reste.

Mon image est-elle envoyée quelque part ?

Non. Elle est décodée par votre navigateur, dessinée dans un canvas à 400 pixels et échantillonnée à cet endroit. Aucune partie n’est transmise et le fichier n’est jamais écrit sur un support de stockage.

À quoi sert l’échelle 50-900 ?

C’est la rampe tonale attendue par les systèmes de design et par Tailwind : dix pas d’une même teinte du presque blanc au presque noir. La chroma est adoucie aux deux extrémités, car une saturation maximale à des clartés très élevées ou très basses sort de sRGB et revient terne.