Qu'est-ce que Palette Monochromatique ?

Choisissez une couleur de base et générez des nuances plus sombres et plus claires. Définissez le nombre de niveaux, puis exportez en variables CSS, configuration Tailwind, ou copiez les valeurs hex/RVB individuelles.

Choisissez n'importe quel HEX ou utilisez la pipette, définissez le nombre de clairs (plus lumineux), de tons (mélangés au gris) et de foncés (plus sombres), et la page interpole chaque échelle dans l'espace LAB pour des pas perceptuellement réguliers. Chaque échantillon affiche HEX, RGB et HSL avec copie en un clic, et Tout copier récupère toute l'échelle d'un coup. Filtrez la vue pour ne voir que les clairs, les tons ou les foncés, ou exportez toute l'échelle en variables CSS, en extrait de configuration Tailwind, en variables SCSS, en design tokens JSON ou en planche PNG.

Comment utiliser

1. Choisissez une couleur de base avec le sélecteur, saisissez un code hex, ou récupérez la couleur dominante d'un logo ou d'une photo avec Depuis une image.
2. Réglez combien de clairs (plus lumineux), de tons (mélange au gris) et de foncés (plus sombres) vous voulez, puis utilisez le filtre Afficher si vous n'avez besoin que d'une rangée.
3. Copiez les valeurs de couleurs individuelles, cliquez sur Tout copier pour récupérer tous les HEX d'un coup, ou exportez toute la palette sous forme de propriétés CSS personnalisées, d'un objet de configuration Tailwind, de variables SCSS, de design tokens JSON ou d'un nuancier image.

Quand l'utiliser

• Construire un design system UI qui demande neuf paliers cohérents de la couleur de marque pour les composants.
• Préparer une dataviz dont toutes les séries doivent partir de la même teinte (cartes de chaleur, barres séquentielles).
• Choisir des paires texte/fond : un fond -100 avec un texte -900 donne en général un contraste sûr.

Résultat

Vous concevez un tableau de bord et avez besoin d'une palette bleue pour la visualisation des données. Vous choisissez #3B82F6 comme base, générez 9 niveaux allant du quasi-blanc (#EBF2FE) au quasi-noir (#1A2744). Vous exportez en variables CSS et utilisez --color-blue-100 à --color-blue-900 dans tous vos graphiques.

FAQ

Qu'est-ce qu'une palette monochromatique, concrètement ?

C'est un ensemble de couleurs qui partagent la même teinte mais varient en saturation et en luminosité. Le rendu se lit comme une seule famille (nuances claires et foncées du même bleu, par exemple) et évite la cacophonie visuelle qu'on obtient en mélangeant des teintes différentes.

Combien de paliers générer ?

Neuf paliers est la norme en UI (Tailwind, Material et IBM Carbon utilisent des échelles 50-900). En dataviz, 5 à 7 suffisent souvent. Au-delà de 11 paliers ça ressemble à un dégradé et les voisins deviennent indissociables.

Quel format choisir à l'export ?

Les variables CSS se collent dans n'importe quelle feuille de style. L'extrait Tailwind se glisse dans theme.extend.colors et active des utilitaires comme bg-brand-500. Le SCSS vous donne à la fois les variables $brand-500 et une map Sass. Le JSON exporte l'échelle sous forme de design tokens structurés pour un style dictionary. La planche PNG est utile pour partager dans Figma ou une charte de marque.

Pourquoi les teintes les plus claires semblent délavées ?

À très haute luminosité, l'œil perçoit presque toute couleur saturée comme blanche. Si le -100 se confond avec le blanc, réduis le nombre de teintes claires ou rapproche le plafond de luminosité de la couleur de base, et les paliers redeviennent distincts.

Les couleurs générées sont-elles accessibles ?

Vous pouvez maintenant le vérifier ici même. Activez le badge de contraste WCAG et chaque nuance indique si le texte noir ou blanc atteint AA ou AAA dessus ; l'aperçu vision des couleurs recolore l'échelle telle que la verrait une personne atteinte de deutéranopie, protanopie ou tritanopie. Règle rapide : associez un palier -100/-200 à un -700/-800 et vous passerez généralement le niveau WCAG AA.

Outils similaires