Générateur de palettes de couleurs
Partez de votre couleur de marque et obtenez une gamme complète de 50 à 950, perceptuellement uniforme et prête pour votre design system, ainsi que des combinaisons harmonieuses. Votre couleur d’origine est conservée à l’identique sur le palier correspondant.
Traité à 100 % dans votre navigateur
Comment le vérifier ?
Vos fichiers ne sont jamais envoyés : ils sont traités sur votre appareil. Vérifiez par vous-même : chargez la page, coupez le Wi-Fi et l’outil continue de fonctionner. Ou ouvrez les outils de développement du navigateur (F12), onglet « Réseau » : aucun fichier ne quitte votre appareil.
Ctrl + Enter exécuterCtrl + C copier le résultat
Comment l’utiliser
- 1Saisissez votre couleur de base dans n’importe quel format ou cliquez sur « Aléatoire ».
- 2Donnez un nom à la palette (par exemple « brand » ou « primary »).
- 3Choisissez une harmonie pour voir les couleurs qui s’accordent avec votre base.
- 4Exportez la gamme en variables CSS, Tailwind, SCSS ou JSON, ou cliquez sur une nuance pour la copier.
Cas d’usage
- Créer la gamme de couleurs d’un design system ou d’un thème Tailwind CSS.
- Générer états de survol, fonds doux et bordures à partir d’une seule couleur de marque.
- Trouver des couleurs secondaires et d’accent assorties.
- Partager une palette avec votre équipe via un lien.
Questions fréquentes
Pourquoi calculer la gamme en OKLCH plutôt qu’en HSL ?
En HSL, un jaune et un bleu de même « luminosité » paraissent très différents. L’OKLCH est perceptuel : chaque palier a la même clarté apparente quelle que soit la teinte, comme les palettes de Tailwind CSS v4.
Que signifient les nombres 50 à 950 ?
C’est la convention des design systems modernes : 50 est la nuance la plus claire (fonds), 500–600 sont généralement les principales (boutons) et 900–950 les plus foncées (texte).
Ma couleur d’origine apparaît-elle dans la palette ?
Oui. Elle est placée exactement sur le palier de luminosité la plus proche, marqué d’un point, et les autres nuances sont générées autour avec la même teinte.
Comment utiliser la palette dans Tailwind CSS ?
Avec Tailwind v4, collez le bloc @theme dans votre CSS ; avec Tailwind v3, ajoutez l’objet dans theme.extend.colors de tailwind.config.js. Utilisez ensuite des classes comme bg-brand-500 ou text-brand-900.