Outils › Variations de couleur

Variations de n'importe quelle couleur

Saisissez n'importe quelle couleur HEX et obtenez ses variations — plus claire, sombre, saturée, pâle, chaude et froide. Cliquez sur n'importe quelle couleur pour la copier.

Couleur source
Couleur source

Teintes et nuances

Un tint est une couleur mélangée avec du blanc, la rendant plus claire. Un shade est mélangé avec du noir, la rendant plus sombre. Ensemble, ils créent une échelle de luminosité pour une teinte, comme dans Tailwind ou Material.

Saturation et température

La saturation indique l'intensité de la couleur — du gris au vif. La température déplace la teinte vers le côté chaud (rouge-jaune) ou froid (bleu-vert), en conservant les autres caractéristiques.

À quoi ça sert

Les variations sont utilisées dans les systèmes de design pour les états hover et active, les ombres et les fonds. Sans limites et sans inscription.

Questions fréquentes
Qu'est-ce qu'une teinte et une nuance ?
Un tint est une couleur éclaircie avec du blanc, un shade est assombri avec du noir. Par exemple, pour le bleu #3B82F6 : les tints seront bleu clair, les shades bleu foncé.
Comment ça fonctionne techniquement ?
Toutes les variations sont calculées dans l'espace HSL. La luminosité change pour les tints/shades, la saturation pour les variations d'intensité, et la teinte se déplace pour les changements de température.
Peut-on exporter le résultat ?
Oui. Cliquez sur «Copier en CSS» pour obtenir des propriétés CSS personnalisées pour toutes les variations. Ou «Copier tous les HEX» — une liste séparée par des virgules de tous les codes.
Cet outil est-il gratuit ?
Oui, complètement gratuit et sans limites. Sans inscription.

Autres outils couleur

Pipette couleurChargez une photo et cliquez n'importe où — obtenez HEX, RGB, HSL et le nom Palette depuis une photoExtrayez 5–8 couleurs dominantes de n'importe quelle image Palette pour projetGénérez N couleurs avec lisibilité du texte garantie Harmonies de couleursComplémentaires, analogues, triadiques et split-complémentaires Générateur de dégradésCréez de beaux dégradés et copiez le code CSS Contraste WCAGVérification accessibilité AA et AAA — gratuit Simulateur de daltonismeComment les daltoniens voient les couleurs — protanopie, deuteranopie et autres Convertisseur TailwindLa classe Tailwind la plus proche pour n'importe quelle couleur HEX Convertisseur de couleursHEX ↔ RGB ↔ HSL ↔ CMYK instantanément, avec copie du code Couleur par nomTrouvez HEX par nom — «terracotta», «indigo», «azur» Filtre CSS pour SVGRecolorisez des icônes SVG avec n'importe quelle couleur via CSS Palettes de couleursPalettes prêtes par thème — cliquez pour copier le HEX