Générateur de teintes et nuances, gratuit

Teintes et nuances

Les teintes sont obtenues en mélangeant une couleur avec du blanc, la rendant progressivement plus claire. Les nuances sont obtenues en mélangeant avec du noir, la rendant plus foncée. Ensemble, elles forment une échelle tonale complète, utile pour le design d'interface, les dégradés, les états de survol et les systèmes de couleurs accessibles.

Questions fréquentes

Comment utiliser ces nuances ?

Utilisez les teintes claires pour les arrière-plans, les états de survol et les bordures. Utilisez les nuances foncées pour le texte, les états actifs et la mise en valeur. Cliquez sur « Tout copier comme variables CSS » pour obtenir un extrait CSS prêt à l'emploi.

Puis-je copier les couleurs individuellement ?

Oui ! Cliquez sur un échantillon pour copier sa valeur HEX dans le presse-papiers.

Teinte, nuance et ton, les définitions formelles

Trois termes sont employés de façon approximative ; la théorie classique des couleurs les distingue précisément :

• Teinte = couleur de base + blanc. Plus claire et plus pâle. Le rose est une teinte de rouge ; le bleu ciel est une teinte de bleu.
• Nuance = couleur de base + noir. Plus foncée et plus profonde. Le bordeaux est une nuance de rouge ; le bleu marine est une nuance de bleu.
• Ton = couleur de base + gris. Moins saturé, plus atténué. Ajoute de la nuance sans beaucoup changer la luminosité.

Ce générateur produit des teintes (plus claires que la base) et des nuances (plus foncées). Les tons (ajout de gris plutôt que de blanc ou de noir) sont utiles pour des palettes atténuées et sophistiquées (pensez aux systèmes de couleurs du design d'intérieur des années 1970), mais rarement nécessaires pour le travail d'interface typique.

Pourquoi les systèmes de design modernes utilisent des échelles numériques

Tailwind CSS a popularisé l'échelle numérique 50-100-200-…-900-950 par couleur, l'arrêt « 500 » étant conventionnellement considéré comme la base. Material Design utilise un système parallèle 50-100-…-900 ; Bootstrap 5 utilise 100-…-900 ; IBM Carbon utilise 10 arrêts par échantillon. L'idée commune : une seule couleur de marque suffit rarement, les interfaces ont besoin de variantes cohérentes pour les états de survol, les arrière-plans, les bordures, les anneaux de focus, les états désactivés, les badges et les équivalents en mode sombre. Une échelle numérique prévisible vous donne ces variantes d'une manière portable entre les composants, remaniable quand la marque évolue, et repérable pour quiconque lit la base de code.

Comment différents algorithmes calculent l'échelle

Il existe trois façons courantes de calculer une échelle de teintes/nuances, avec des résultats visuels différents :

• Mélange RGB avec du blanc / noir. La définition issue de la théorie de l'art. Produit des teintes et nuances fidèles, mais ne tient pas compte de l'uniformité perceptuelle, les jaunes se désaturent rapidement, les bleus restent riches.
• Ajustement de la luminosité HSL. Rapide et facile : poussez le canal L vers le haut pour les teintes, vers le bas pour les nuances. L'approche la plus courante dans les anciens outils. L'inconvénient, c'est que la luminosité de HSL n'est pas perceptuellement uniforme, le jaune à 50 % de L paraît bien plus clair que le bleu à 50 % de L, donc une palette construite par paliers HSL paraît inégale d'une teinte à l'autre.
• Mise à l'échelle de la luminosité OKLCH ou CIELAB. L'approche moderne, perceptuellement uniforme. Le L dans OKLCH est calibré de sorte que « 200 → 300 → 400 » donne l'impression du même pas, quelle que soit la teinte. Tailwind v4 (sorti en janvier 2025) a reconstruit toutes ses palettes par défaut autour d'OKLCH pour exactement cette raison.

Si votre échelle paraît un jour « plate » (des pas de jaune qui se délavent, des pas de bleu qui se lisent tous comme le même bleu foncé), c'est presque toujours parce que les calculs sous-jacents reposent sur HSL plutôt que sur OKLCH. Le CSS moderne (CSS Color Module Level 4) expose oklch(), lab() et color-mix(in oklch, …) directement, faisant des échelles perceptuellement uniformes une seule ligne de code sans aucun outil externe.

Cas d'usage

• Amorcer un système de design à partir d'une seule couleur de marque. Choisissez le HEX de la marque, générez l'échelle, copiez les variables CSS, expédiez.
• Personnaliser une table colors de Tailwind. Remplacez la couleur de marque par défaut par votre propre échelle de 11 arrêts.
• États de survol et de focus de l'interface. Un schéma courant : le fond du bouton utilise le 500, le survol utilise le 600, l'état actif utilise le 700, l'anneau de focus utilise le 400 à faible opacité.
• Arrière-plans et élévation. Les fonds de carte utilisent le 50 ; les bordures subtiles utilisent le 200 ; le texte désactivé utilise le 400.
• Équivalents en mode sombre. De nombreux systèmes génèrent une échelle parallèle en mode sombre plutôt que d'inverser mathématiquement celle en mode clair, les couleurs qui paraissent équilibrées sur du blanc ne le paraissent pas toujours sur du presque-noir.
• Variations de maquette. Comparez rapidement trois couleurs de marque candidates en générant l'échelle de chacune et en les déposant dans la même maquette d'interface.
• Nuanciers d'impression. Contrôlez en amont une palette d'impression pour voir à quel point les pas paraissent subtils une fois côte à côte.

Accessibilité et contraste

Une échelle générée n'est utile que dans la mesure des paires texte-sur-fond qu'elle produit. Les minimums WCAG 2.1 à garder à l'esprit :

• Texte courant normal : 4,5 : 1 par rapport à son fond (niveau AA).
• Texte large ou gras (18 pt / 14 pt gras et plus) : 3 : 1 (niveau AA).
• Composants d'interface et objets graphiques : 3 : 1 (niveau AA, critère 1.4.11).

Des règles fiables sur la plupart des échelles bien construites : la paire 50 + 900 passe toujours pour le corps de texte, la paire 100 + 800 y parvient presque toujours. La paire 400 + 500 n'y parvient presque jamais. Testez les paires précises que vous comptez utiliser, l'outil Vérificateur de contraste de couleurs, gratuit calcule les ratios WCAG pour deux valeurs HEX quelconques.

Brancher la sortie dans votre base de code

Trois façons courantes de consommer une échelle générée :

/* 1. Plain CSS variables */
:root {
  --brand-50: #f0f9fc;
  --brand-100: #d9eef6;
  --brand-500: #2b7190;
  --brand-900: #0d2935;
}

.btn { background: var(--brand-500); }
.btn:hover { background: var(--brand-600); }

// 2. Tailwind config (tailwind.config.js)
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#f0f9fc',
          100: '#d9eef6',
          500: '#2b7190',
          900: '#0d2935',
        },
      },
    },
  },
};

// then in markup
<button class="bg-brand-500 hover:bg-brand-600">Click</button>

// 3. Sass / SCSS map
$brand: (
  50:  #f0f9fc,
  500: #2b7190,
  900: #0d2935,
);

.btn { background: map-get($brand, 500); }

Erreurs fréquentes

1. Générer trop d'arrêts. Les 11 de Tailwind sont un bon équilibre. 20 arrêts, c'est exagéré, la plupart sont visuellement indistinguables, et vous ne les utiliserez jamais.
2. Utiliser des échelles basées sur HSL pour des couleurs jaunes / orange / fluorescentes. Elles se délavent aux arrêts clairs et ne s'assombrissent pas proprement. Optez pour une génération basée sur OKLCH si votre couleur de marque tombe dans la plage de teintes « délicates ».
3. Considérer l'échelle comme définitive sans vérifier le contraste du texte. De belles relations de couleurs associent parfois un texte blanc à l'arrêt 400 et échouent au WCAG 4,5 : 1. Testez chaque association que vous utiliserez réellement.
4. Inverser la palette claire pour créer une palette en mode sombre. Mathématiquement tentant, visuellement erroné, les couleurs qui semblent équilibrées sur du blanc paraissent criardes sur du presque-noir. Générez ou ajustez à la main une échelle parallèle en mode sombre.
5. Utiliser la couleur de base comme « 500 » alors qu'elle correspond perceptuellement mieux à un autre arrêt. Si votre couleur de marque est vraiment foncée, elle pourrait être le 700 de son échelle ; laissez la relation perceptuelle dicter l'emplacement qu'elle occupe, pas la convention.
6. Oublier l'arrêt 50. La teinte la plus claire est la plus utile pour les arrière-plans et les mises en valeur subtiles. Ne tronquez pas votre échelle à 100.

Autres questions fréquentes

Pourquoi mon échelle paraît-elle plate, tous les arrêts se ressemblent ?

Deux causes courantes : (1) trop de pas dans une plage trop étroite, essayez moins de pas, surtout si la couleur est déjà de luminance moyenne ; (2) une mise à l'échelle basée sur HSL sur une teinte où HSL est mal calibré (jaunes, oranges, couleurs néon). Recourir à un générateur de palette basé sur OKLCH corrige généralement les deux.

Comment générer une palette en mode sombre à partir d'une échelle en mode clair ?

N'inversez pas simplement. L'inversion naïve (échanger les arrêts clairs et foncés) produit des palettes en mode sombre qui paraissent criardes ou se délavent. La convention dans Material 3, Radix Colors et les variantes sombres de Tailwind consiste à générer une échelle parallèle ajustée pour le fond sombre, généralement avec une saturation légèrement réduite et une teinte décalée pour compenser la façon dont les couleurs sont perçues sur des surfaces sombres. La plupart des grands systèmes de design publient les deux palettes côte à côte.

Puis-je utiliser les couleurs générées commercialement ?

Oui. Les valeurs de couleur ne sont pas protégeables par le droit d'auteur ; les codes HEX sont des faits sur les pixels. Utilisez la palette générée n'importe où, projets open source, sites commerciaux, systèmes de marque, impression, emballage.

Quel est un bon nombre de pas ?

Pour le design d'interface, 9 à 11 arrêts par couleur est la convention établie (Tailwind, Bootstrap et Carbon se situent tous dans cette plage). Material Design en utilise 13. En dessous de 7 arrêts, l'échelle semble sous-résolue ; au-dessus de 13, les arrêts deviennent difficiles à distinguer les uns des autres.

Quelque chose est-il envoyé à un serveur ?

Non. Les calculs de couleur s'exécutent dans votre navigateur ; le HEX d'entrée, les arrêts générés et le CSS copié ne touchent jamais un serveur. Utile quand la couleur de marque n'est pas encore publiée ou est sous embargo.

En quoi cela diffère-t-il d'un générateur de palette de couleurs ?

Un générateur de palette choisit plusieurs couleurs distinctes qui fonctionnent ensemble (complémentaires, analogues, triadiques, etc.), des teintes entièrement différentes. Un générateur de nuances (celui-ci) conserve une seule teinte et en produit des variantes plus claires et plus foncées. Des rôles différents : les générateurs de palette vous donnent la couleur primaire de marque plus des accents ; les générateurs de nuances vous donnent les variations de l'une de ces couleurs.

Outils associés