Studio de conversion de couleur
Saisissez un code hex, un mot-clé CSS ou une fonction oklch() complète et obtenez instantanément toutes les autres notations. Créez ensuite une gamme, vérifiez le contraste, simulez le rendu pour les personnes daltoniennes et emportez la palette avec vous.
L'hex à 3, 4, 6 ou 8 chiffres ainsi que rgb() et hsl() sont compris sans l'aide du navigateur.
Le CMJN affiché ici est la simple conversion arithmétique, pas une séparation ICC. Un CMJN prêt pour l'impression dépend du papier, de l'encre et du profil de sortie, et ne peut pas se déduire d'une valeur sRGB seule.
Grand titre à 24 pixels
Sous-titre à 16 pixels, demi-gras
Texte courant à 13 pixels. C'est cette taille qui décide si une paire de couleurs est réellement utilisable.
Inversé, le fond servant de couleur de texte : Lc -60.3
En dessous de ΔE 0,05, deux échantillons sont la même couleur pour cette personne : une palette qui repose sur leur distinction ne tient plus. La simulation suit Viénot, Brettel et Mollon (1999) et s'applique en lumière linéaire.
La distance est le ΔE en OKLab, où environ 0,02 correspond au moment où la plupart des gens voient deux échantillons comme des couleurs différentes. Cliquez sur une ligne pour aller à cette couleur exacte.
Comment ça marche
Apportez une couleur
Tapez n'importe quelle notation CSS, utilisez la pipette d'écran, collez une palette entière ou ouvrez une image et cliquez sur le pixel voulu.
Façonnez-la
Des curseurs de clarté, de chroma et de teinte qui se comportent pareil sur un jaune et sur un bleu, plus les gammes, les harmonies et le mélange.
Vérifiez-la
WCAG 2.1 et APCA sur n'importe quel fond, et une simulation du daltonisme qui vous prévient quand deux échantillons n'en font plus qu'un.
Emportez-la
Copiez une notation, exportez en CSS, Tailwind, SCSS, JSON, SVG ou planche d'échantillons, ou passez la palette à l'outil suivant.
Toutes les syntaxes de couleur CSS
Hex à 3, 4, 6 ou 8 chiffres, mots-clés, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color-mix() et display-p3. C'est l'analyseur du navigateur qui lit la valeur, donc rien n'est laissé de côté.
Des gammes au pas régulier
Onze paliers générés en OKLCH : chacun reste à une distance visuelle constante du précédent, au lieu des sauts irréguliers d'une gamme en HSL.
WCAG 2.1 et APCA
Le ratio classique et la valeur Lc signée du brouillon WCAG 3, mesurés sur le fond de votre choix et pas seulement sur du blanc et du noir.
Contrôle du daltonisme
Protanopie, deutéranopie et tritanopie simulées en lumière linéaire, avec la plus petite distance entre deux échantillons pour repérer une palette qui s'effondre.
Pipette et images
Prélevez une couleur partout à l'écran là où le navigateur l'autorise, ou ouvrez une image, zoomez sur le pixel sous le curseur et récupérez sa valeur exacte.
Harmonies et mélange
Ensembles complémentaire, analogue, triade, divisé, tétradique et monochrome pivotés en OKLCH, plus un mélange perceptuel le long du petit arc de teinte.
Exportez partout
Propriétés personnalisées CSS, bloc @theme de Tailwind, variables SCSS, JSON, planche d'échantillons en SVG ou PNG, et fichier de palette GIMP.
Rien ne quitte l'onglet
Aucun envoi, aucun appel d'API, aucun compte. Chaque conversion, chaque chiffre de contraste et chaque palette sont calculés par votre propre navigateur.
Traitement local instantané
Chaque conversion est une opération arithmétique sur trois nombres : il n'y a rien à attendre ni rien à envoyer où que ce soit. La lecture de votre saisie est confiée au moteur CSS du navigateur, ce qui explique que les mots-clés, color-mix() et les notations à large gamut soient compris plutôt que rejetés. Le travail perceptuel — gammes OKLCH, mappage de gamut, distances ΔE, simulation du daltonisme — représente quelques centaines d'opérations en virgule flottante, et même extraire une palette d'une grande photo se réduit à un passage de k-means sur une copie réduite, bouclé en bien moins d'une seconde.
Le plus pénible dans le travail de la couleur est rarement la conversion : c'est obtenir une échelle qui progresse régulièrement, prouver qu'une paire de couleurs est lisible et livrer le résultat dans la forme qu'attend votre code. Cet outil ancre une gamme de onze paliers sur la couleur que vous avez déjà, indique quels paliers ont dû revenir dans sRGB et de combien, nomme le mot-clé CSS et le jeton Tailwind les plus proches avec une distance mesurée, et exporte toute la palette en propriétés personnalisées, bloc de thème Tailwind, SCSS, JSON ou planche d'échantillons.
Cet outil n'a pas de partie serveur. Les couleurs que vous tapez, les palettes que vous collez et les images que vous ouvrez restent dans l'onglet : une image est décodée dans un canvas qui ne quitte jamais votre machine, et fermer l'onglet efface tout. La seule chose qui circule est ce que vous choisissez de mettre dans la barre d'adresse : la palette y est encodée pour que vous puissiez partager un lien, et rien d'autre de votre session n'est enregistré.
Questions fréquentes
QQuels formats de couleur puis-je coller ?+
Hex à 3, 4, 6 ou 8 chiffres, les 148 mots-clés CSS, rgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch(), oklab(), oklch(), color-mix() et color(display-p3 …). La saisie passe par l'analyseur CSS du navigateur : tout ce que votre navigateur accepte dans une feuille de style fonctionne ici. Sans cet analyseur, l'outil lit encore hex, rgb() et hsl().
QPourquoi l'outil préfère-t-il OKLCH à HSL ?+
En HSL, deux couleurs ayant la même valeur de luminosité peuvent paraître très différentes : un jaune à 50% semble bien plus clair qu'un bleu à 50%. OKLCH est construit pour que sa clarté corresponde à ce que l'œil perçoit, et c'est pourquoi les gammes, les harmonies et le mélange pivotent et interpolent dans cet espace.
QQue signifie le nombre ΔE ?+
C'est la distance entre deux couleurs en OKLab. Autour de 0,02, la plupart des gens commencent à voir deux échantillons comme des couleurs vraiment différentes : cela sert de règle graduée pour savoir de combien un palier a dérivé en revenant dans sRGB, à quel point le jeton Tailwind le plus proche l'est vraiment, et si deux couleurs de la palette survivent à une simulation de daltonisme.
QLe vérificateur de contraste est-il conforme WCAG ?+
Le ratio WCAG 2.1 est calculé exactement comme la spécification le définit, sur le fond de votre choix, et le badge distingue le texte courant du seuil plus souple réservé au grand texte au lieu d'afficher une simple mention « conforme ». À côté figure APCA, la mesure perceptuelle proposée pour WCAG 3 : utile en pratique, mais encore à l'état de brouillon et non un critère de conformité.
QLe CMJN produit est-il prêt pour l'impression ?+
Non, et celui d'aucun outil de navigateur ne l'est. Vous obtenez la conversion arithmétique standard, suffisante pour se faire une idée ou pour un logiciel qui attend ces quatre nombres. Une vraie séparation dépend du papier, des encres et d'un profil ICC de sortie : elle se fait dans votre logiciel de mise en page ou d'image.
QCe que je colle est-il envoyé quelque part ?+
Non. Il n'y a aucun composant serveur, aucune mesure d'audience sur vos couleurs et aucune requête réseau à un quelconque moment de la conversion. Les images sont décodées localement dans un canvas et abandonnées à la fermeture. La palette est écrite dans l'URL de la page pour que vous puissiez la partager ou la mettre en favori : c'est le seul endroit où vos couleurs sont conservées, et cela reste sur votre machine tant que vous n'envoyez pas le lien vous-même.