Générateur de nuances de couleur

Tous les outils

Générez une gamme complète de teintes claires et foncées à partir d'une seule couleur — choisissez votre pas d'éclaircissement/assombrissement et le nombre de nuances, puis copiez n'importe quelle valeur instantanément.

Couleur de base
Pas
%
Intensité d'éclaircissement/assombrissement de chaque nuance, par pas (1–25 %).
Nombre de nuances
Combien de teintes claires et foncées générer de chaque côté de la couleur de base.
Dégradé
Nuances générées

Choisissez une couleur de base, un pourcentage de pas et un nombre — chaque teinte et nuance est calculée instantanément dans votre navigateur.

À propos de Générateur de nuances de couleur

Le Générateur de nuances de couleur développe une seule couleur en une gamme complète de teintes claires et foncées. Donnez-lui une couleur de base et il produit des teintes de plus en plus claires d'un côté et des nuances de plus en plus foncées de l'autre — la classique rampe de style 50 à 900 utilisée dans les systèmes de design modernes.

Deux contrôles façonnent le résultat : le pourcentage de palier définit de combien chaque nuance s'éclaircit ou s'assombrit (1 à 25 % par palier), et le nombre définit combien de teintes et de nuances apparaissent de chaque côté de la base, jusqu'à dix. Une bande de dégradé prévisualise toute la rampe d'un coup d'œil.

La génération se fait instantanément dans votre navigateur au fur et à mesure de la saisie — rien n'est envoyé à un serveur. Copiez une seule valeur, la liste complète, ou toute la rampe sous forme de variables CSS, prêtes à intégrer dans un fichier de tokens de design ou une échelle de couleurs de style Tailwind.

Comment utiliser Générateur de nuances de couleur

  1. Choisissez une couleur de base avec le sélecteur ou saisissez une valeur ; cliquez sur « Couleur aléatoire » pour vous inspirer.
  2. Réglez le pourcentage de palier pour contrôler à quel point chaque nuance s'éclaircit ou s'assombrit.
  3. Choisissez le nombre de nuances pour décider combien de teintes et de nuances apparaissent de chaque côté.
  4. Cliquez sur une nuance pour la copier, ou utilisez « Tout copier » et « Copier les variables CSS » pour toute la rampe.

Questions fréquentes

Oui, entièrement. Toutes les teintes et nuances sont calculées en direct dans votre navigateur, il n'y a donc aucun coût, aucun compte et aucune limite au nombre de rampes que vous générez.

Une teinte est votre couleur de base mélangée vers le blanc (plus claire), tandis qu'une nuance est la base mélangée vers le noir (plus foncée). Le générateur produit les deux directions à la fois, étiquetées « Teintes (plus claires) » et « Nuances (plus foncées) » autour de votre couleur de base.

Réglez le nombre sur 4 ou 5 de chaque côté pour obtenir de neuf à onze nuances au total, avec votre base au milieu. Un palier d'environ 8 à 10 % donne généralement un espacement similaire aux échelles 50–900 utilisées par les frameworks populaires.

De petits paliers (3–6 %) donnent des variations subtiles pour les survols et les bordures ; des paliers moyens (8–12 %) conviennent aux rampes complètes de systèmes de design ; de grands paliers (15–25 %) créent des ensembles à fort contraste, façon affiche. Surveillez l'aperçu du dégradé — une bonne rampe doit s'assombrir uniformément sans bandes visibles.

Oui. « Copier les variables CSS » restitue toute la rampe sous forme de propriétés personnalisées CSS nommées, et « Tout copier » vous donne une liste brute de valeurs que vous pouvez coller n'importe où, des maps SCSS aux objets de thème JavaScript.
Partager
Outils similaires
Générateur de palette de couleurs Composez des palettes de couleurs harmonieuses à partir d'une roue chromatique interactive — appliquez des règles d'harmonie comme analogue, complémentaire ou triade, puis copiez n'importe quelle valeur instantanément. Gratuit
Mélangeur de couleurs Fondez une couleur de départ vers une couleur d'arrivée sur jusqu'à 10 étapes — prévisualisez le dégradé, récupérez chaque nuance et copiez n'importe quel format instantanément. Gratuit
Exportateur de palette Collez ou importez un ensemble de couleurs et exportez-les instantanément en variables CSS, SCSS, configuration Tailwind, JSON ou échantillons SVG — l'étape finale de toute palette. Gratuit
Extracteur de couleurs d'image Extrayez une palette de couleurs raffinée et prête à copier depuis n’importe quelle image. Gratuit
Palette de couleurs web-safe Parcourez les 216 couleurs web-safe classiques sous forme de grille d'échantillons cliquables — triez par teinte ou par ordre du cube, filtrez par hex, et copiez n'importe quelle valeur HEX ou rgb() instantanément. Gratuit
Association de polices et annuaire Google Fonts Parcourez un annuaire soigné de polices Google Fonts populaires avec des aperçus en direct, filtrez par catégorie et cherchez par nom, puis copiez du CSS prêt à coller et explorez des associations de polices suggérées — le tout dans votre navigateur. Gratuit
Recherches populaires
générateur de nuances de couleur teintes et ombres éclaircir et assombrir une couleur nuances d'une couleur générateur de teinte de couleur générer des nuances de couleur
Besoin d'aide ?
Un problème avec cet outil ? Signalez-le à notre équipe.
Signaler un problème

Ajoutez cet outil gratuit à votre propre site web — copiez-collez le code ci-dessous.