Mode d’emploi
- Saisissez une couleur de base ou choisissez-en une. « Nouvelle couleur de base aléatoire » en sélectionne une pour vous.
- Choisissez une harmonie. « Nuances » crée une échelle de 11 paliers, du plus clair au plus foncé.
- Verrouillez les couleurs que vous souhaitez conserver, puis continuez à explorer d’autres couleurs de base.
- Choisissez HEX, propriétés personnalisées CSS ou JSON, définissez un nom, puis copiez le code.
Fonctionnement
Les harmonies sont obtenues en faisant pivoter la teinte sur le cercle chromatique : l’harmonie complémentaire ajoute la teinte opposée (180°), l’harmonie analogue ajoute les teintes voisines à 30° et 60° de chaque côté, l’harmonie triadique utilise trois teintes espacées de 120°, l’harmonie tétradique en utilise quatre espacées de 90°, et l’harmonie complémentaire divisée utilise les deux teintes voisines de la complémentaire (150° et 210°).
La rotation se fait dans OKLCH plutôt qu’en HSL. OKLCH maintient une luminosité perçue constante : un jaune et un bleu de la même palette semblent ainsi aussi lumineux l’un que l’autre, au lieu que le jaune soit éblouissant. Lorsqu’une couleur obtenue par rotation se situe hors de la gamme affichable sur les écrans sRGB, sa chroma est réduite jusqu’à ce qu’elle y entre, tout en conservant sa luminosité et sa teinte.
L’échelle de nuances utilise des paliers fixes de luminosité OKLCH, numérotés de 50 à 950, selon une convention semblable à celle de Tailwind CSS. La chroma est réduite près du blanc et du noir afin que les nuances les plus claires ne paraissent pas fluo. Les harmonies sont un point de départ : avant de les utiliser dans du contenu, vérifiez le contraste entre les textes et les arrière-plans.
Exemples
Une couleur de marque et une couleur d’accent
Avec la couleur de base #3366cc, l’option « Complémentaire » ajoute #8c6500, un ocre chaud de même luminosité OKLCH. Les associations de bleu et de jaune orangé sont souvent choisies pour créer des accents à côté d’une identité visuelle bleue.
Des jetons de conception pour une bibliothèque de composants
Choisissez « Nuances », définissez le nom sur « primary », puis exportez les variables CSS. Vous obtenez --primary-50 à --primary-950, prêtes à être utilisées pour les arrière-plans (50–100), les bordures (200–300) et le texte (700–900).
Garder une couleur tout en explorant
Verrouillez la deuxième couleur d’une palette triadique, puis essayez différentes couleurs de base. L’échantillon verrouillé conserve sa valeur HEX tandis que les autres changent.
Foire aux questions
Pourquoi mes couleurs diffèrent-elles de celles d’un outil HSL basé sur le cercle chromatique ?
Cet outil fait pivoter la teinte dans OKLCH, un espace colorimétrique perceptuel. Les angles de teinte ne correspondent pas exactement à ceux de HSL. La couleur « opposée » peut donc légèrement différer de celle obtenue avec un outil HSL.
Puis-je utiliser le JSON avec Tailwind CSS ?
Le JSON associe des noms à des valeurs HEX, selon le format accepté par Tailwind pour les couleurs de sa configuration de thème. Avec Tailwind 4, vous pouvez aussi coller les variables CSS dans un bloc @theme, après les avoir renommées au format --color-…
Les palettes générées sont-elles accessibles ?
Pas automatiquement. Une harmonie ne garantit pas le contraste entre le texte et l’arrière-plan. Vérifiez chaque paire que vous comptez utiliser avec le Vérificateur de contraste.
Confidentialité
Les palettes sont générées dans votre navigateur. Vos couleurs ne sont ni envoyées ni stockées.