Transformez une couleur unique en échelles complètes de teintes, de nuances et de tons, et exportez-les en variables CSS, dans votre navigateur.
Un design system a rarement besoin d'une couleur : il lui faut une famille. Les teintes, les nuances et les tons sont les trois façons classiques de construire cette famille à partir d'une seule teinte. Une teinte, c'est la couleur mélangée à du blanc, donnant des versions plus claires et plus douces utilisées pour les fonds, les surfaces au survol et les états désactivés. Une nuance, c'est la couleur mélangée à du noir, donnant des versions plus sombres utilisées pour le texte sur fond clair, les bordures et les états enfoncés. Un ton, c'est la couleur mélangée à du gris, ce qui abaisse la saturation sans modifier la clarté aussi brutalement — le moins connu des trois, et celui qui produit ce rendu sourd et éditorial que les teintes et les nuances pures ne savent pas atteindre.
Le calcul est ici volontairement simple et prévisible : chaque palier est une interpolation linéaire des canaux RGB entre votre couleur de base et la cible (blanc #ffffff, noir #000000 ou gris moyen #808080), par incréments de 10 %, de sorte que le dixième palier tombe exactement sur la cible. C'est la convention retenue par les générateurs classiques de teintes et de nuances, et elle rend chaque valeur reproductible — vous pouvez recalculer n'importe quel échantillon à la main. Le compromis mérite d'être connu : parce que l'interpolation a lieu en sRGB plutôt que dans un espace perceptuel comme OKLCH, les écarts de clarté perçue ne sont pas parfaitement réguliers, en particulier pour les jaunes et les cyans très saturés. Pour des échelles d'interface, cela convient en général très bien, et c'est même souvent préférable, car les résultats restent proches de la teinte d'origine.
L'export est ce qui rend tout cela concret. Un clic copie la palette en propriétés personnalisées CSS, prêtes à être collées dans un bloc :root, ou en simple liste de codes hexadécimaux pour un outil de design. Activer les noms façon Tailwind remappe la palette sur la familière échelle 50–900 — de 50 à 400 pour l'éclaircissement, 500 pour votre couleur de base, de 600 à 900 pour l'assombrissement — ce qui s'insère directement dans un thème Tailwind ou tout fichier de tokens suivant la même convention. Vous pouvez aussi télécharger la palette sous forme de fichier .css. Chaque calcul et le fichier lui-même sont produits à 100 % dans votre navigateur ; la couleur que vous choisissez n'est jamais envoyée à un serveur.
Une teinte, c'est votre couleur mélangée à du blanc ; une nuance, c'est votre couleur mélangée à du noir ; un ton, c'est votre couleur mélangée à du gris. Les teintes et les nuances modifient la clarté ; les tons réduisent surtout la saturation, pour un résultat sourd à clarté comparable.
Chaque palier est un simple mélange linéaire des canaux RGB entre votre couleur de base et le blanc, le noir ou le gris à 50 %, par incréments de 10 % — la dixième teinte est donc du blanc pur et la dixième nuance du noir pur. Les valeurs sont entièrement reproductibles.
Oui. Activez les noms façon Tailwind et l'export utilise l'échelle 50–900, avec 500 pour votre couleur de base, prête à être collée dans votre configuration de thème ou dans un fichier de variables CSS.
Pas automatiquement. L'échelle est mathématiquement régulière, pas perceptuellement régulière : vous devez donc toujours vérifier les paires texte/fond au regard des seuils de contraste WCAG — en règle générale, associez les teintes les plus claires aux nuances les plus sombres.
Non. La palette, l'export CSS et le fichier téléchargé sont tous générés localement en JavaScript sur votre appareil — rien n'est transmis ni stocké sur un serveur.
Vai.la transforme n'importe quelle URL en lien court avec statistiques de clics, QR Code et votre propre biolink.
Vai.la n'est pas responsable de l'utilisation des outils ni des décisions prises sur la base de leurs résultats.