Générateur de Teintes et Nuances de Couleur

Générez des teintes claires et foncées de n'importe quelle couleur de base.

Cet outil fonctionne entièrement dans votre navigateur. Vos fichiers ne sont jamais envoyés à un serveur.

Tints (mixed with white)

#d8e6fd

#b1cdfb

#89b4fa

#629bf8

Base

#3b82f6

Shades (mixed with black)

#2f68c5

#234e94

#183462

#0c1a31

Ce que fait ce générateur

Construit une échelle de neuf couleurs à partir d'une couleur de base : quatre teintes plus claires mélangées vers le blanc, la couleur de base elle-même, et quatre nuances plus foncées mélangées vers le noir.

Comment l'utiliser

Saisissez une couleur HEX à trois ou six chiffres. La base est normalisée et huit échantillons de teinte/nuance apparaissent aussitôt ; cliquez sur un échantillon pour copier sa valeur HEX.

Exemple résolu

Une couleur de base #3b82f6 produit des teintes à 80 %, 60 %, 40 % et 20 % mélangées vers le blanc, et des nuances à 20 %, 40 %, 60 % et 80 % mélangées vers le noir — neuf échantillons au total.

Comment le mélange est calculé

Chaque étape interpole linéairement les canaux rouge, vert et bleu de la couleur de base vers le blanc (255, 255, 255) pour les teintes ou vers le noir (0, 0, 0) pour les nuances, au pourcentage indiqué, puis arrondit le résultat.

Limites perceptuelles

Il s'agit d'une interpolation directe des canaux sRGB, pas d'un mélange perceptuel HSL, OKLCH ou corrigé en gamma ; des pourcentages égaux ne paraissent donc pas toujours également espacés à l'œil — certaines étapes peuvent sembler plus marquées que d'autres.

Utilisation pratique

Cet ensemble de neuf couleurs constitue un bon point de départ pour les états survol/actif, bordures, arrière-plans et combinaisons texte/fond dans un système de design — vérifiez le contraste séparément avant d'utiliser une paire pour du texte.

Confidentialité

La génération se fait entièrement dans votre navigateur ; la couleur saisie n'est pas transférée.

Questions Fréquentes

Quelle est la différence entre une teinte claire et une nuance foncée ?
Une teinte claire est une couleur mélangée au blanc (plus claire) ; une nuance foncée est mélangée au noir (plus sombre) — ensemble, elles forment une échelle de couleurs.
Combien d'étapes cela génère-t-il ?
Quatre teintes claires, la couleur de base et quatre nuances foncées — neuf étapes au total, semblable à une échelle de couleurs d'interface typique de 50 à 900.
À quoi servent les nuances et teintes ?
Elles sont couramment utilisées pour les états hover/actif, les bordures, les arrière-plans et les combinaisons texte-sur-fond dans un système de design.