Générateur de nuances de couleur

Transformez une couleur HEX de base en une échelle OKLCH, HSL ou RGB avec paliers réglables, indications de contraste WCAG par palier et export CSS, Tailwind et JSON.

Chargement de l'outil…

Générateur de nuances de couleur — Saisissez une seule couleur de base en HEX et créez instantanément une échelle complète grâce à une interpolation perceptuellement régulière en OKLCH ou HSL — teinte stable et luminosité répartie uniformément — ou au mélange RGB linéaire classique, avec autant de paliers que vous voulez. Ajustez la teinte et la saturation, consultez une indication de contraste WCAG par palier montrant quels tons restent lisibles en texte sur blanc et sur noir, et copiez toute la gamme en propriétés personnalisées CSS, en configuration de couleur Tailwind ou en JSON. Tout s'exécute entièrement dans votre navigateur ; aucune couleur n'est jamais envoyée à un serveur.

Qu'est-ce que Générateur de nuances de couleur ?

Le Générateur de nuances de couleur transforme une couleur HEX de base en une échelle complète de teintes et de nuances prête pour un design system. Au lieu de mélanger uniquement de façon linéaire en RGB, il peut interpoler en OKLCH ou HSL pour que la teinte reste stable et la luminosité soit répartie uniformément, donnant une gamme perceptuellement équilibrée sans palier terne ni délavé. Vous choisissez combien de paliers il produit — de 2 à 24, ou une liste personnalisée d'étiquettes séparées par des virgules —, décalez la teinte ou ajustez la saturation, et lisez une indication de contraste WCAG par palier montrant quels tons fonctionnent en texte sur blanc et sur noir. L'échelle terminée se copie en propriétés personnalisées CSS, en objet de configuration de couleur Tailwind ou en JSON d'un seul clic.

Comment utiliser Générateur de nuances de couleur

  1. Saisissez une couleur de base dans le champ Couleur de base (HEX) au format #rrggbb ou #rgb, ou cliquez sur le grand échantillon pour la choisir visuellement.
  2. Choisissez un espace colorimétrique : OKLCH ou HSL pour une gamme perceptuellement régulière à teinte stable, ou RGB pour le mélange linéaire classique.
  3. Définissez le nombre de paliers voulu (2–24), ou ouvrez les Réglages pour saisir une liste de paliers personnalisée séparée par des virgules, décaler la teinte, ajuster la saturation et définir le nom de couleur de l'export.
  4. Lisez les deux cellules de contraste de chaque ligne — la lettre A sur blanc et sur noir —, mises en évidence quand ce ton atteint le WCAG AA pour le texte.
  5. Copiez le HEX d'un seul palier, ou copiez toute l'échelle en variables CSS, en config Tailwind ou en JSON avec les boutons de copie.

Exemples

Gamme OKLCH régulière à partir d'un bleu de marque

Choisissez OKLCH et gardez 11 paliers : l'échelle 50–950 répartit la luminosité uniformément tout en conservant la teinte bleue, si bien qu'aucun palier ne paraît terne ou délavé comme le mélange RGB linéaire peut le faire.

Config Tailwind personnalisée à cinq paliers

Saisissez 100, 300, 500, 700, 900 comme liste de paliers personnalisée pour n'émettre que cinq échantillons, puis copiez-les en objet de couleur Tailwind avec exactement ces étiquettes comme clés, ou en variables CSS et JSON.

Questions fréquentes

Quelle est la différence entre les options RGB, HSL et OKLCH ?
RGB mélange votre couleur linéairement vers le blanc et le noir, ce qui est rapide mais peut paraître irrégulier dans les tons moyens. HSL et OKLCH gardent au contraire la teinte stable et répartissent la luminosité uniformément ; OKLCH est perceptuellement uniforme, donc chaque palier semble un saut de luminosité identique. Choisissez OKLCH pour la gamme la plus équilibrée.
Combien de tons puis-je générer et puis-je les nommer ?
Réglez un nombre de paliers de 2 à 24. Une valeur de 11 utilise la numérotation Tailwind familière (50, 100…900, 950) ; les autres valeurs sont réparties uniformément de 50 à 950. Vous pouvez aussi saisir dans les Réglages une liste personnalisée d'étiquettes séparées par des virgules, qui remplace le nombre de paliers et nomme chaque palier exactement comme vous l'écrivez.
Comment l'indication de contraste WCAG est-elle calculée ?
Pour chaque ton, l'outil calcule le rapport de contraste WCAG face au blanc pur et au noir pur à partir de la luminance relative. Les deux petites cellules de chaque ligne affichent la lettre A sur blanc et sur noir et sont mises en évidence quand le rapport atteint 4,5:1 (AA pour le texte normal) ; survolez pour voir le rapport exact et s'il est AA ou AAA.
Mes données de couleur sont-elles téléchargées quelque part ?
Non. Les calculs de couleur, les vérifications de contraste et les trois exports s'exécutent entièrement dans votre navigateur, donc aucune valeur de couleur n'est jamais envoyée à un serveur. L'outil fonctionne hors ligne et garde votre palette privée.

Outils connexes

Code en image

Transformez un extrait de code en image avec coloration syntaxique dans votre navigateur, avec plus de 20 langages, des thèmes et fonds personnalisés, des numéros de ligne et un export PNG ou SVG.

Vérificateur de contraste des couleurs

Vérifiez le contraste WCAG 2.1 et le score APCA Lc entre texte et fond, voyez les badges AA, AAA et 3:1 et appliquez la couleur conforme la plus proche.

Mélangeur de couleurs

Mélangez deux couleurs HEX selon le ratio de votre choix, dans l'espace RGB ou Lab, et obtenez la couleur intermédiaire sous forme d'échantillon et de valeur HEX copiable.

Simulateur de daltonisme

Importez une image et prévisualisez son rendu en cas de protanopie, deutéranopie, tritanopie ou de daltonisme total, puis téléchargez le résultat simulé.