Skip to main content

Générateur de nuances de couleur Générer des nuances plus foncées de n'importe quelle couleur avec un nombre d'étapes ajustable.

Générateur de nuances de couleur illustration
🎨

Générateur de nuances de couleur

Générer des nuances plus foncées de n'importe quelle couleur avec un nombre d'étapes ajustable.

1

Sélectionnez la couleur de base

Choisissez n'importe quelle couleur comme point de départ.

2

Ajustez les étapes

Déterminez le nombre d'ombres progressivement plus foncées à générer.

3

Copiez les ombres

Copiez des ombres individuelles ou l'ensemble complet.

Loading tool...

What Is Générateur de nuances de couleur?

Un générateur de nuances de couleur crée des versions progressivement plus sombres d'une couleur de base en réduisant systématiquement sa luminosité dans l'espace de couleur HSL. Les nuances conservent la teinte et la saturation originales tout en s'approchant du noir, créant un ensemble cohérent de variantes plus sombres. C'est essentiel pour les systèmes de design où vous avez besoin de plusieurs intensités d'une couleur de marque - de l'originale pour les boutons principaux à des versions profondes pour le texte, les bordures et les états de survol. Contrairement à l'ajout simple de noir en RGB (ce qui peut déplacer la teinte perçue), l'approche basée sur HSL préserve l'identité de couleur tout au long de la gamme de nuances. Le nombre d'étapes ajustable vous permet de créer tout, desde un ensemble de trois nuances simples à une échelle complète de quinze étapes.

Why Use Générateur de nuances de couleur?

  • Le fonçage basé sur HSL préserve la cohérence de la teinte sur toutes les ombres
  • Nombre d'étapes ajustable (3 à 15) pour n'importe quel cas d'utilisation
  • Chaque ombre affiche son pourcentage de luminosité pour référence
  • Parfait pour créer des échelles de couleurs de systèmes de design
  • Copie en un clic pour les ombres individuelles ou l'ensemble complet

Common Use Cases

Jetons de conception

Générez des échelles d'ombres numérotées (600, 700, 800, 900) pour les systèmes de design.

États de survol

Créez des états de survol de boutons plus foncés qui sont cohérents avec la couleur de base.

Couleurs de texte

Trouvez des ombres foncées des couleurs de marque pour les titres et le texte du corps.

Bordures et ombres

Obtenez des variantes plus foncées pour les bordures, les contours et les couleurs d'ombre.

Technical Guide

Le générateur de nuances convertit la couleur de base en HSL et crée N nuances en réduisant la luminosité de la valeur de base à près de zéro. La formule pour chaque nuance est : L = luminositéDeBase × (1 - i/(N-1)), où i va de 0 à N-1. Cela crée une distribution uniforme de la couleur originale au noir. La teinte et la saturation restent constantes, garantissant que toutes les nuances sont perçues comme la même couleur à différents niveaux de sombreur. En théorie de la couleur, une nuance est spécifiquement une couleur mélangée avec du noir, contrairement à une teinte (mélangée avec du blanc) ou un ton (mélangé avec du gris). L'approche HSL est plus uniforme sur le plan perceptuel que l'assombrissement RGB, qui nécessiterait d'ajuster les trois canaux proportionnellement.

Tips & Best Practices

  • 1
    Utilisez 9 étapes pour créer une échelle de système de design standard (100-900)
  • 2
    L'ombre la plus foncée convient bien au texte sur fond clair
  • 3
    Combinez les générateurs d'ombres et de teintes pour obtenir une échelle de couleurs complète
  • 4
    Les ombres des couleurs chaudes (rouges, oranges) font d'excellents fonds foncés
  • 5
    Testez les ombres foncées pour un contraste suffisant avec votre arrière-plan prévu

Related Tools

Frequently Asked Questions

Q Quelle est la différence entre une ombre et une teinte ?
Une ombre est une couleur assombrie en ajoutant du noir (en réduisant la luminosité). Une teinte est une couleur éclaircie en ajoutant du blanc (en augmentant la luminosité). Un ton est une couleur adoucie en ajoutant du gris (en réduisant la saturation).
Q Pourquoi ne pas simplement assombrir en RGB ?
L'assombrissement en RGB (réduction de tous les canaux) peut déplacer la teinte perçue. L'assombrissement basé sur HSL conserve la teinte constante, garantissant que toutes les ombres ont l'air comme la même couleur à des intensités différentes.
Q Combien d'étapes devrais-je utiliser ?
Pour les systèmes de design, 9-10 étapes (comme les échelles Tailwind CSS). Pour les besoins plus simples, 3-5 étapes couvrant la base, les variantes plus foncées et les plus foncées.

About This Tool

Générateur de nuances de couleur is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.