É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 simple — 3 harmonies, 6 niveaux par rampe, export CSS. Passez en Expert pour l’intensité, les écarts d’harmonie, les cadenas, les 11 niveaux, le rayon, la densité, l’élévation et les 4 formats d’export.
Couleur de marque
Tout le système part d'ici. Réglez la teinte, l'intensité, ou partez d'une ambiance.
Complémentaire
Deux teintes opposées sur la roue (180°). Le contraste est maximal : c'est le duo qui fait le mieux ressortir un bouton unique sur une page calme.
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 25);
--accent-100: oklch(0.942 0.032 25);
--accent-200: oklch(0.885 0.058 25);
--accent-300: oklch(0.812 0.088 25);
--accent-400: oklch(0.715 0.112 25);
--accent-500: oklch(0.665 0.126 25);
--accent-600: oklch(0.62 0.130 25);
--accent-700: oklch(0.53 0.114 25);
--accent-800: oklch(0.43 0.090 25);
--accent-900: oklch(0.325 0.062 25);
--accent-950: oklch(0.24 0.046 25);
--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;
}
}