Comment faire des versions plus claires et plus sombres d'une couleur ?
Générateur de nuances et teintes : teintes (mélangées avec blanc) à gauche, base au milieu, nuances (mélangées avec noir) à droite.
L'interpolation OKLCH préserve la teinte pendant le mélange : le bleu devient plus clair/plus sombre mais reste lisible comme bleu, pas gris.
Super pour les états hover/active, les variantes de boutons, les paires dark mode. Tout en local.
Comment l'utiliser
- Choisis une couleur de base (HEX, picker natif, pipette d'écran).
- Choisis le nombre de paliers : 3 (subtil), 5 (équilibré), 7 (détaillé), 10 (rampe style Tailwind).
- À droite : teintes (avec blanc) → base ★ → nuances (avec noir). Clique pour copier le HEX.
- En dessous : variables CSS prêtes à déposer dans `:root`.
- Astuce : sortie 10 paliers → très proche du Tailwind 100/200/.../900 de ta couleur de marque.
Quand c'est utile
Là où nuances et teintes paient, usages typiques :
- États hover / active : base de bouton + teinte pour hover (plus clair) + nuance pour active (plus sombre).
- Boutons ghost / outline : tint-300 en fond, base en bordure, shade-700 en texte.
- Dark mode : shade-700 et shade-800 sont candidates pour les fonds dark-mode.
- État disabled : tint-200 comme bouton « ghosté ».
- Cartes avec élévation : tint-100 comme fond de carte sur un corps blanc.
- Cohérence de marque : quand la couleur de marque #ef4444 est trop vive pour un en-tête, utilise shade-300 comme alternative plus équilibrée.
- Pédagogie : remarque que « bleu pur 50 % » en OKLCH paraît perceptuellement 50 %, en HSL non : c'est pour ça que nos teintes/nuances paraissent espacées régulièrement.
Questions et réponses
Teinte = couleur d'origine + blanc (version plus claire). Nuance = couleur d'origine + noir (version plus sombre). Différent du « ton » (original + gris) qu'on ne génère pas parce qu'il est rarement utilisé.