Générateur de teintes et nuances

Comment utiliser le générateur de teintes et nuances

1. Choisissez une Couleur de base avec la pastille, ou saisissez une valeur dans Code couleur : #1E90FF, rgb(30 144 255), hsl(210 100% 56%) ou un nom CSS comme teal.
2. Sélectionnez un Pas : 5 %, 10 %, 20 % ou 25 %. Avec 10 %, vous obtenez des teintes à 10 %, 20 %… jusqu’à 100 %, et autant de nuances.
3. Choisissez Mélanger en : OKLCH (perceptuel) ou sRGB (classique). Les deux rangées se mettent à jour aussitôt : Teintes (mélange avec du blanc) et Nuances (mélange avec du noir), chacune partant de la base.
4. Cliquez sur Copier sous une pastille pour copier son code HEX.
5. Sous Exporter en, choisissez Variables CSS, Configuration Tailwind (v3), Tailwind @theme (v4), Variables SCSS ou JSON, indiquez un Nom comme primary ou marque, puis cliquez sur Copier ou Télécharger.

Teintes, nuances et tons

En théorie des couleurs, une teinte (tint en anglais) est une couleur mélangée à du blanc, une nuance (shade) une couleur mélangée à du noir, et un ton une couleur mélangée à du gris. Le pourcentage indique la part de blanc ou de noir ajoutée : une teinte à 30 % contient 70 % de couleur de base et 30 % de blanc. À 100 %, on obtient du blanc ou du noir pur ; c’est pourquoi la dernière pastille de chaque rangée est toujours #FFFFFF ou #000000, elle marque la fin de l’échelle.

C’est la façon la plus rapide de bâtir un nuancier cohérent à partir d’une seule couleur de marque : fonds clairs et états de survol avec les teintes, bordures, états enfoncés et textes foncés avec les nuances.

Mélange OKLCH ou sRGB ?

Le mode sRGB (classique) mélange directement les valeurs rouge, verte et bleue. C’est ce que font la plupart des anciens générateurs, et cela correspond à color-mix(in srgb, …) en CSS. Pour une teinte, la formule est simplement canal + (255 − canal) × p, et pour une nuance canal × (1 − p). Le résultat est prévisible, mais les paliers ne sont pas réguliers à l’œil : les bleus virent au violet en s’éclaircissant, et les nuances sombres paraissent souvent ternes.

Le mode OKLCH (perceptuel) mélange dans l’espace OKLCH conçu par Björn Ottosson en 2020, comme color-mix(in oklch, …). Luminosité, chroma et teinte sont interpolées séparément. Le blanc et le noir n’ayant pas de teinte, celle de la base est conservée jusqu’au bout, et chaque palier modifie la luminosité d’une quantité visuellement comparable. Les couleurs qui sortiraient du gamut sRGB y sont ramenées en réduisant la chroma plutôt qu’en écrêtant les canaux : la teinte reste stable. Pour un design system, on obtient en général des échelles plus propres et plus régulières.

Utiliser l’export

• Variables CSS produit un bloc :root avec des variables comme --primary-tint-20 et --primary-shade-40, à coller dans une feuille de style.
• Configuration Tailwind (v3) fournit un objet colors pour theme.extend.colors ; vous écrivez ensuite bg-primary-tint-20 ou text-primary-shade-60. La clé DEFAULT contient la base, donc bg-primary fonctionne aussi.
• Tailwind @theme (v4) donne des variables --color-… pour la configuration en CSS de Tailwind 4.
• Variables SCSS et JSON conviennent aux autres outils de build et aux design tokens.

Les noms sont mis en minuscules et les espaces deviennent des tirets : « Bleu Marque » devient bleu-marque.