Générateur de nuances et teintes de couleur

Collez une couleur et obtenez une échelle complète de teintes à nuances : Teintes vers le blanc, Nuances vers le noir, les deux en direct. Calculé dans votre navigateur, jamais envoyé.

Chargement…
Générateur de nuances et teintes de couleur
Collez n'importe quelle couleur CSS et obtenez à la fois une échelle de Teintes en direct vers le blanc et une échelle de Nuances vers le noir. Nombre d'étapes réglable et sortie HEX/RGB/HSL, avec URL partageable.

Notes pour développeurs

Mélange RVB linéaire classique, pas un mélange par luminosité HSL : teinte_i = base + (blanc - base) * i/étapes, nuance_i = base + (noir - base) * i/étapes, canal par canal en sRGB. colorjs.io analyse uniquement la couleur collée. Le mélange lui-même est une interpolation simple, sans autre bibliothèque de couleur. À i = étapes, la dernière teinte est exactement blanche et la dernière nuance exactement noire, sans dérive d'arrondi. Les deux échelles s'affichent toujours ensemble : il n'y a ni bascule de direction ni troisième échelle « tons » (mélange vers le gris). swatchFormat choisit un format CSS à la fois pour chaque nuance ; collez la valeur d'une nuance dans le Convertisseur de couleurs pour voir tous les formats.

Options

  • Étapes — Nombre de nuances générées dans chacune des échelles Teintes et Nuances. 5 à 15, 10 par défaut : une échelle à 5 étapes convient à une vérification rapide, 10 à 15 à une palette complète de jetons de design.
  • Format de nuancier — Le format CSS affiché et copié pour chaque nuance, sur les deux échelles : HEX, RGB ou HSL. HEX par défaut, le format universel prêt à coller.

Outils CSS associés

Hub : Outils Couleur & CSS. Convertissez une nuance dans tous les formats avec Convertisseur de couleurs et vérifiez le contraste avec Vérificateur de contraste. Réduisez et formatez vos feuilles de style avec Minifier CSS et Formater CSS.

FAQ du générateur de nuances et teintes de couleur

Générateur local d’échelles de teintes et nuances

Quelle est la différence entre Teintes et Nuances ?

Les Teintes mélangent votre couleur de base vers le blanc ; les Nuances la mélangent vers le noir. Les deux échelles sont toujours générées ensemble à partir de la même couleur de base et du même nombre d'étapes.

Combien d'étapes chaque échelle peut-elle avoir ?

De 5 à 15 étapes par échelle, 10 par défaut, la taille d'échelle de jetons de design la plus courante. Les deux échelles partagent toujours le même nombre d'étapes.

Est-ce la même chose qu'un générateur de « tons » ?

Non. Les tons se mélangent vers le gris, ce que cet outil ne génère pas. Il produit uniquement des teintes vers le blanc et des nuances vers le noir, la définition classique.

Mes couleurs sont-elles envoyées quelque part ?

Non. L'analyse et le mélange s'exécutent entièrement dans votre navigateur. FastMinify n'envoie jamais la couleur collée à un serveur.

Outils couleur & CSS

Vérification de contraste WCAG en collage local avec syntaxe couleur CSS moderne — vues paire et matrice, jamais envoyé.

Découvrez les autres catégories d'outils