Étape 1 — Point de départ
Une couleur. Un système entier.
Choisissez une teinte de marque : l'outil en déduit une échelle complète, des couleurs complémentaires cohérentes, une typographie et un thème sombre. Vous restez libre de tout déplacer — l'outil vous dit simplement quand vous quittez l'harmonie.
Mode expert — 6 harmonies, 11 niveaux, valeurs oklch, verrouillage des teintes, contrôle du rayon, de la densité et de l’élévation, contrastes WCAG et export CSS · Tailwind · JSON · SCSS.
Couleur de marque
Tout le système part d'ici. Réglez la teinte, l'intensité, ou partez d'une ambiance.
Complémentaire divisée
L'opposé, mais dédoublé (150° et 210°). On garde la tension du complémentaire en évitant sa brutalité — le meilleur compromis par défaut.
Faites glisser la pastille principale pour tourner tout le nuancier, ou une pastille secondaire pour vous écarter de l'harmonie. Le cadenas fige une teinte pendant les générations.
Étape 2 — Échelles
Les rampes générées
Onze niveaux par couleur, avec la même clarté et la même saturation d'une rampe à l'autre : seule la teinte change. C'est ce qui donne l'impression que les couleurs sortent du même moule. Cliquez sur un niveau pour copier sa valeur.
Étape 3 — Typographie & rythme
Charte typographique
Une police pour les titres, une pour le texte courant. L'échelle est modulaire : chaque taille est la précédente multipliée par un même rapport.
Étape 4 — Vérification
Vos composants, en direct
Si le nuancier tient ici, il tiendra partout. Chaque élément consomme un token sémantique, jamais une couleur en dur.
Titre de carte
Le dégradé mélange la marque et ses complémentaires — un test rapide de cohabitation des trois teintes.
Étape 5 — Export
Emporter la charte
Les tokens sont prêts à coller dans votre projet. Le lien de partage encode le nuancier entier — aucun compte, aucune base de données.
:root {
--brand-50: oklch(0.972 0.014 205);
--brand-100: oklch(0.942 0.032 205);
--brand-200: oklch(0.885 0.058 205);
--brand-300: oklch(0.812 0.088 205);
--brand-400: oklch(0.715 0.112 205);
--brand-500: oklch(0.665 0.126 205);
--brand-600: oklch(0.62 0.130 205);
--brand-700: oklch(0.53 0.114 205);
--brand-800: oklch(0.43 0.090 205);
--brand-900: oklch(0.325 0.062 205);
--brand-950: oklch(0.24 0.046 205);
--accent-50: oklch(0.972 0.014 355);
--accent-100: oklch(0.942 0.032 355);
--accent-200: oklch(0.885 0.058 355);
--accent-300: oklch(0.812 0.088 355);
--accent-400: oklch(0.715 0.112 355);
--accent-500: oklch(0.665 0.126 355);
--accent-600: oklch(0.62 0.130 355);
--accent-700: oklch(0.53 0.114 355);
--accent-800: oklch(0.43 0.090 355);
--accent-900: oklch(0.325 0.062 355);
--accent-950: oklch(0.24 0.046 355);
--accent-2-50: oklch(0.972 0.014 55);
--accent-2-100: oklch(0.942 0.032 55);
--accent-2-200: oklch(0.885 0.058 55);
--accent-2-300: oklch(0.812 0.088 55);
--accent-2-400: oklch(0.715 0.112 55);
--accent-2-500: oklch(0.665 0.126 55);
--accent-2-600: oklch(0.62 0.130 55);
--accent-2-700: oklch(0.53 0.114 55);
--accent-2-800: oklch(0.43 0.090 55);
--accent-2-900: oklch(0.325 0.062 55);
--accent-2-950: oklch(0.24 0.046 55);
--radius: 10px;
--font-heading: 'Inter', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--text-xs: 10.2px;
--text-sm: 12.8px;
--text-base: 16px;
--text-lg: 20px;
--text-xl: 25px;
--text-2xl: 31.3px;
--text-3xl: 39.1px;
--space: 24px;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #080d0e;
--foreground: #e8eeef;
--brand: #3ccfde;
}
}