Générateur de teintes et d'ombres

• Génération instantanée de teintes et d'ombres : le générateur met à jour toute votre palette à chaque changement de couleur, sans aucun décalage. Cliquez sur n'importe quelle pastille pour copier son code HEX instantanément — aucun bouton à presser.
• Sécurisé et 100 % privé : toute la génération s'exécute entièrement dans votre navigateur. Vos données de couleur ne sont jamais envoyées à un serveur — idéal pour des couleurs de marque non publiées et des systèmes de design confidentiels.
• Export en CSS variables, config Tailwind ou liste HEX : exportez votre palette générée dans trois formats : propriétés personnalisées CSS (:root), objet de configuration Tailwind CSS ou liste HEX simple. Nom de variable et nombre d'étapes configurables (5, 8, 10 ou 12 étapes).
• 100 % gratuit — sans inscription : entièrement gratuit, sans compte, sans offre premium, sans limite d'utilisation et sans publicité bloquant l'interface. Générez des teintes et des ombres autant de fois que nécessaire.

• Échelles de couleurs de design system : les ingénieurs de design system utilisent le générateur pour construire des échelles de couleurs complètes pour leurs bibliothèques de composants. Exportez directement en CSS variables ou config Tailwind pour intégrer à votre pipeline de design tokens.
• Extension de palette de marque : les designers de marque utilisent le générateur pour étendre une seule couleur de marque en une palette complète de variantes plus claires et plus foncées — offrant la gamme nécessaire pour les arrière-plans, bordures, états hover et texte.
• Bibliothèques de couleurs Figma et Sketch : les designers d'interface utilisent le générateur pour créer des bibliothèques de couleurs dans Figma et Sketch. Copiez les codes HEX du tableau de pastilles et collez-les directement dans les styles de couleur de votre outil de design.
• Sites e-commerce et marketing : les développeurs web utilisent le générateur pour créer des états hover, des états actifs et des variantes d'arrière-plan à partir d'une seule couleur de marque — garantissant une cohérence visuelle sur les pages produit et les landing pages.
• Adaptation des couleurs au mode sombre : les développeurs créant des thèmes sombres utilisent le générateur pour trouver des variantes plus claires adaptées de leurs couleurs de base sur fonds sombres — assurant un contraste suffisant sans changer la teinte de marque.
• Couleurs personnalisées Tailwind CSS : les développeurs Tailwind CSS utilisent le générateur pour créer des échelles de couleurs personnalisées respectant la convention de nommage 50-900 de Tailwind. Exportez directement en objet de configuration Tailwind et collez dans tailwind.config.js.

En théorie des couleurs, une teinte est une couleur mélangée au blanc, ce qui la rend plus claire et moins saturée. Une ombre est une couleur mélangée au noir, ce qui la rend plus foncée et plus saturée. Ensemble, teintes et ombres forment une échelle de couleurs — une plage de valeurs allant du quasi-blanc au quasi-noir, partageant toutes la même teinte que la couleur de base. Les échelles de couleurs sont la base des design systems modernes : elles fournissent toute la gamme de valeurs nécessaires aux arrière-plans, bordures, textes, états hover et indicateurs de focus tout en maintenant une cohérence visuelle. Notre générateur de teintes et d'ombres basé sur le navigateur crée ces échelles instantanément à partir de n'importe quelle couleur de base grâce à l'interpolation RVB linéaire.

1. Saisissez votre couleur de base : tapez une valeur HEX (par ex. #3b82f6 ) ou RGB dans le champ de couleur, ou utilisez le sélecteur de couleur natif. Vous pouvez aussi choisir une couleur prédéfinie pour démarrer rapidement.
2. Choisissez le nombre d'étapes : sélectionnez 5, 8, 10 ou 12 étapes par côté. Plus d'étapes offrent une granularité plus fine pour les design systems complexes ; moins d'étapes conviennent mieux aux palettes simples. Le générateur met la palette à jour instantanément à chaque changement.
3. Copiez ou exportez : cliquez sur n'importe quelle pastille pour copier son code HEX. Utilisez le panneau d'export pour copier la palette complète en propriétés personnalisées CSS, objet de configuration Tailwind CSS ou liste HEX simple — avec un nom de variable configurable.

• Formule des teintes : chaque teinte est calculée par interpolation linéaire entre la couleur de base et le blanc (RVB 255, 255, 255). Une teinte de ratio r = base × r + blanc × (1 − r). La teinte la plus claire a la plus petite valeur r (la plus proche du blanc) ; la teinte la plus foncée a la plus grande valeur r (la plus proche de la base).
• Formule des ombres : chaque ombre est calculée par interpolation linéaire entre la couleur de base et le noir (RVB 0, 0, 0). Une ombre de ratio r = base × r. L'ombre la plus claire a la plus grande valeur r (la plus proche de la base) ; l'ombre la plus foncée a la plus petite valeur r (la plus proche du noir).
• Répartition des étapes : les étapes sont réparties uniformément entre la couleur de base et le blanc/le noir, en excluant les extrêmes purs. Cela garantit un espacement visuel cohérent entre chaque étape de la palette.
• Formats de sortie : les valeurs HEX, RGB et HSL sont fournies pour chaque pastille. La représentation HSL est utile pour comprendre comment la luminosité varie sur l'échelle alors que la teinte et la saturation restent approximativement constantes.

Une teinte ajoute du blanc à une couleur (augmente la luminosité, diminue la saturation). Une ombre ajoute du noir à une couleur (diminue la luminosité, peut augmenter ou diminuer la saturation). Un ton ajoute du gris à une couleur (diminue la saturation sans modifier la luminosité aussi drastiquement). Notre générateur se concentre sur les teintes et les ombres — les variantes les plus couramment nécessaires dans les design systems d'interface. Pour générer des tons, utilisez l'outil Mélangeur de couleurs pour combiner votre couleur de base avec un gris neutre.