Softonic

Générateur de nuances de couleur

Étape 1 / 2
Résultats

Une nuance est le résultat du mélange d’une couleur avec du noir, chaque étape devient plus sombre. Le générateur prend une couleur de base HEX et produit 3 à 20 étapes (10 par défaut) de nuances de plus en plus sombres, ainsi que les teintes plus claires de la même base. Utile pour les échelles de palettes de systèmes de design (500 → 900), les états de bouton pressé/actif, les couleurs de texte qui restent lisibles, et les superpositions d’ombre. Chaque étape est affichée sous forme d’échantillon avec sa valeur hex prête à être copiée.

Comment fonctionne la génération de nuances

  1. 1

    Choisissez une couleur de base

    Utilisez le sélecteur de couleur ou, en mode par étapes, transmettez une valeur hex dans l'URL de la page. La base se situe entre la gamme des teintes et celle des nuances.

  2. 2

    Choisissez le nombre d'étapes

    De 3 à 20 étapes, 10 par défaut. Plus il y a d'étapes, plus l'échelle est douce ; moins il y en a, plus les sauts sont marqués.

  3. 3

    Mélangez avec du noir par étapes régulières

    Chaque étape met à l'échelle les canaux rouge, vert et bleu avec le même facteur, ce qui équivaut à un mélange avec du noir (ou du blanc pour les teintes) en étapes régulières. Avec 10 étapes, chacune est environ 9 % plus sombre ou plus claire. La teinte reste identique à la base.

  4. 4

    Lisez l'échelle

    Chaque échantillon affiche sa valeur hex. Sélectionnez le texte pour le copier dans du CSS, un thème Tailwind ou un fichier de design tokens.

Nuance, teinte et ton

  • Nuance (shade) : couleur + noir → plus sombre.
  • Teinte (tint) : couleur + blanc → plus claire.
  • Ton (tone) : couleur + gris → moins saturée.

Ce générateur produit à la fois des nuances et des teintes à partir de la même base. La paire teinte + nuance forme généralement une palette de système de design (par exemple, de brand-100 à brand-900 où 500 est la base).

Échelle d’exemple : #3B82F6 (Tailwind blue-500)

Étape HEX Mélange Rôle dans le système de design
0 #3B82F6 Base Marque principale (par exemple, blue-500)
1 #316CCD 17 % noir État survolé
2 #2756A4 33 % noir État pressé/actif (blue-600)
3 #1D417B 50 % noir blue-700
4 #132B52 67 % noir blue-800
5 #091528 83 % noir blue-900

Le tableau montre une échelle en 5 étapes : chaque étape est un sixième du chemin vers le noir.

Comment les étapes sont calculées

L’outil met à l’échelle les canaux rouge, vert et bleu de la base avec le même facteur à chaque étape. Cela équivaut à un mélange avec du noir pour la gamme des nuances et avec du blanc pour celle des teintes, en étapes régulières. Avec 10 étapes, chacune est environ 9 % plus sombre ou plus claire que la précédente.

Comme tous les canaux sont mis à l’échelle de la même façon, la teinte de la base est conservée exactement : une base bleue reste bleue, une base verte reste verte. Le mélange avec du noir réduit aussi la saturation en même temps que la luminosité, si bien que les étapes sombres paraissent naturelles au lieu de briller. Réduire uniquement la luminosité, sans toucher à la saturation, laisse les couleurs sombres sursaturées.

Utilisation des nuances dans l’UI

  • Bouton : base pour l’état de repos, 1-2 étapes plus sombres pour le survol, 2-3 étapes plus sombres pour actif/pressé.
  • Texte principal : 2-3 étapes plus sombres que la base assurent la lisibilité sur fond blanc ; plus clair pour le texte secondaire.
  • Bordure / séparateur : 1-2 étapes plus sombres que l’arrière-plan, suffisamment pour délimiter sans écraser.
  • Ombres : étape la plus sombre (ou plus sombre) avec alpha réduit plutôt qu’un nouveau gris.
  • Visualisation des données : utilisez des nuances d’une seule teinte pour une échelle séquentielle (magnitudes de valeur), ou associez des nuances de deux teintes pour des échelles divergentes (positif et négatif).

Pièges courants

  • Trop d’étapes se compressent en bandes indiscernables. Les échelles de 10 étapes fonctionnent bien car chaque étape est environ 9 % plus sombre ; à 20 étapes, les différences deviennent subtiles. Pour des contrastes marqués, préférez 3-5 étapes.
  • La dérive de teinte est impossible ici : chaque étape met tous les canaux à l’échelle de la même façon, un rouge reste donc rouge et un vert reste vert. La dérive de teinte apparaît quand on interpole entre deux couleurs différentes, ce que cet outil ne fait pas.
  • Ignorer l’accessibilité : les nuances qui semblent harmonieuses peuvent échouer au contraste WCAG sur l’arrière-plan. Vérifiez toujours le contraste à chaque étape.
  • Les échelles uniquement de nuances semblent oppressantes sur des arrière-plans sombres. Associez-les à une échelle de teintes pour un mode sombre utilisable.

Questions fréquentes

Pour un système de design, 5 étapes de nuance + 5 étapes de teinte (10 au total autour de la base) est la convention courante. Pour des couleurs d’état UI rapides (survol, actif), 3 étapes suffisent.

Le mélange régulier utilisé ici garde chaque étape sur une ligne droite entre la base et le noir, les étapes intermédiaires restent donc propres. Un milieu boueux vient généralement d’un outil qui interpole entre deux couleurs différentes, ou qui réduit la luminosité sans réduire la saturation.

Les couleurs sombres ont déjà peu de marge pour s’assombrir avant de devenir noires ; une base de violet foncé ne produit que 2-3 étapes distinctes avant que l’échelle ne s’effondre. Choisissez une base de luminosité moyenne pour des échelles plus riches.

Similaire dans l’intention, mais le mélange avec du noir réduit la saturation en même temps que la luminosité, ce qui semble généralement plus naturel. La réduction pure de la luminosité maintient la saturation élevée et peut produire des couleurs sombres sursaturées.

Outils similaires

Référence de la table ASCII

Table ASCII complète de 0 à 127 avec décimal, hexadécimal, octal, binaire et référence numérique HTML pour chaque caractère, y compris les codes de contrôle comme NUL, LF et DEL.

Référence des caractères HTML

Liste consultable des entités HTML, de leurs codes nommés et numériques, et un copier-coller en un clic pour les caractères et symboles spéciaux.

Référence des raccourcis clavier

Recherchez les raccourcis par défaut documentés de VS Code, Chrome et Bash avec GNU Readline sous macOS, Windows et Linux.

Générateur de lettres aléatoires

Générez des lettres A-Z aléatoires. Choisissez le nombre, les majuscules, les minuscules ou le mélange, puis utilisez le résultat pour des jeux ou la classe.

Générateur d’accordéon CSS

Créez un accordéon de trois sections avec details et summary. Personnalisez textes, couleurs, espacements, icône et ouverture, puis copiez ou téléchargez le code.

Générateur de palettes de couleurs aléatoires

Générez des palettes aléatoires de 2 à 15 couleurs, choisissez un style vif, pastel, sourd ou sombre, puis copiez les codes HEX ou les variables CSS.