Softonic

Générateur de teintes de couleur

Étape 1 / 2
Suivant

Une teinte est le résultat du mélange d’une couleur avec du blanc, chaque étape devient plus claire. Le générateur prend votre couleur de base et produit une échelle de teintes progressivement plus claires, utile pour les gammes de palettes de systèmes de design (100 → 400), les remplissages d’arrière-plan subtils, les états de survol sur des couleurs primaires sombres, et les arrière-plans de badges/alertes où la couleur d’accent doit être présente mais discrète.

Comment les teintes sont générées

  1. 1

    Choisissez une couleur de base

    Utilisez le sélecteur de couleur pour choisir une couleur de base. Fonctionne mieux avec des bases de luminosité moyenne ; les bases proches du blanc ont peu de place pour s'éclaircir.

  2. 2

    Choisissez le nombre d'étapes

    Entre 3 et 20 étapes, 10 par défaut. 10 donnent une échelle complète de système de design ; moins d'étapes suffisent pour une UI rapide.

  3. 3

    Mélangez avec du blanc à des pourcentages croissants

    Avec 10 étapes, la première teinte mélange environ 9 % de blanc et la dernière environ 91 %. L'interpolation se fait directement dans l'espace RVB, donc la saturation s'estompe à mesure que la luminosité augmente.

  4. 4

    Relevez les valeurs hex

    Chaque nuancier affiche sa valeur hex. Utilisez-les dans vos variables CSS, votre échelle Tailwind ou votre carte Sass.

Exemple d’échelle de teinte à partir de #3B82F6

Le tableau ci-dessous montre ce que l’outil produit avec les 10 étapes par défaut :

Étape Hex Mélange Rôle typique
0 #3B82F6 Base Marque principale (bleu-500)
1 #4C8DF6 9,1 % blanc Survol léger sur fond sombre
2 #5E98F7 18,2 % blanc équivalent bleu-400
3 #70A4F8 27,3 % blanc
4 #82AFF9 36,4 % blanc bleu-300
5 #94BAFA 45,5 % blanc
6 #A5C6FA 54,5 % blanc
7 #B7D1FB 63,6 % blanc
8 #C9DCFC 72,7 % blanc Fond subtil (bleu-100/200)
9 #DBE8FD 81,8 % blanc
10 #EDF3FE 90,9 % blanc bleu-50

Teinte + nuance = échelle de système de design

Combinez les teintes (plus claires) et les nuances (plus sombres) autour d’une seule base pour former une échelle complète :

  • 50, 100, 200, 300, 400 : teintes (de la plus claire à légèrement plus claire que la base)
  • 500 : base
  • 600, 700, 800, 900 : nuances (légèrement plus sombres que la base à la plus sombre)

Cela correspond à Tailwind, Material, Open Color, Radix UI et la plupart des systèmes de design populaires. Les échelles de 10-11 étapes sont la norme.

Où les teintes brillent dans l’UI

  • Arrière-plans d’alerte et de badge : texte erreur-500 sur fond erreur-50 = reconnaissance immédiate sans agresser le regard.
  • États de survol sur fonds sombres : les boutons sur une surface sombre s’éclaircissent vers une teinte plus claire au survol.
  • Échelles séquentielles de visualisation de données : mappage valeur-couleur où la haute magnitude est saturée et la faible magnitude s’estompe vers le blanc.
  • Espaces réservés pour avatar / catégorie de graphique : teinte de la couleur primaire lorsque aucune image/donnée n’est présente.
  • Couches de surface : fond de carte légèrement teinté avec la couleur de la marque pour une présence de marque subtile.

Pourquoi les teintes les plus claires perdent de la saturation

Le générateur mélange directement dans l’espace RVB. Plus on ajoute de blanc, plus la saturation chute vite par rapport à la luminosité perçue, si bien que les étapes supérieures semblent pâles ou grisâtres. C’est un comportement normal du mélange RVB :

  • Mélange RVB (cet outil) : simple et prévisible. La saturation s’estompe régulièrement ; les étapes très claires paraissent désaturées.
  • Interpolation OKLCH ou LAB : utilisée par les logiciels de design pour garder une chroma plus stable en éclaircissant. Ce générateur ne propose pas ces modèles ; si vous avez besoin de teintes au ton stable, produisez-les dans un outil de design compatible OKLCH.
  • Éclaircir en HSL : augmente la luminosité sans mélanger de blanc ; le résultat peut sembler pastel plutôt que peinture.

Plancher de teinte pour une UI utilisable

Les teintes très claires (étape 8+) approchent du blanc pur et deviennent visuellement indiscernables sur un fond blanc. Utile comme :

  • Surlignages subtils de sélection derrière le texte.
  • Rayures de ligne presque invisibles dans des tableaux denses.

Mais pas bon pour les boutons ou les étiquettes où l’utilisateur doit voir une couleur distincte. Associez des teintes claires avec un élément plus sombre (bordure, texte) pour les ancrer.

Questions fréquentes

Le générateur mélange directement en RVB, et l’interpolation RVB réduit la saturation quand la luminosité augmente, donc les étapes supérieures dérivent vers le blanc. Interpoler en OKLCH ou LAB conserve au contraire un léger reflet de la teinte de base ; utilisez un outil compatible OKLCH lorsque cela compte.

Similaire mais pas identique. Mélanger avec du blanc réduit à la fois la saturation et la luminosité proportionnellement ; l’ajustement de luminosité HSL élève L indépendamment. Les teintes semblent plus naturelles (comme de la peinture) ; la luminosité HSL peut pousser vers des pastels irréalistes.

Oui, le mode sombre a généralement besoin d’une “échelle de luminosité” différente car les arrière-plans sont déjà sombres. De nombreux systèmes inversent l’échelle (le 50 du mode sombre est l’équivalent blanc-sur-sombre du 900 du mode clair).

Générez une échelle de teinte de 5 étapes (50-500) et une échelle de nuances de 5 étapes (500-900) à partir de la même base. Concaténez pour une échelle complète de 10-11 étapes de système de design.

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.