Générateur teinte et ombre HEX

Ceci est un générateur de teintes et d’ombres. À partir d’un HEX, il mélange vers le blanc et le noir, ou parcourt clarté, chroma et teinte HSL.

Cliquez une valeur pour la copier

Exemples — cliquez un échantillon

Convertir plusieurs couleurs d’un coup. Une par ligne, ou des virgules comme #3B82F6, #FF573380. Insérer l’exemple remplit trois lignes et le tableau en dessous.

Générateur teinte et ombre

Ceci est un générateur de teintes et d’ombres. Il mélange un HEX vers le blanc ou le noir pour survol et bordures.

Comment l’utiliser

  1. Collez HEX, rgb() ou hsl(), choisissez une couleur, Aléatoire, un exemple (#3B82F6, #171B45, #0074D9, #0F766E) ou un pixel si le navigateur le permet.
  2. L’axe Mélange (blanc / noir) est l’initial. Clarté, Chroma et Teinte figent les autres canaux HSL. Le pas 5 %, 10 %, 20 % ou 25 % fixe les crans ; Personnalisé utilise 2–20 divisions.
  3. L’échelle complète a les ombres à gauche, la base au centre, les teintes à droite. Le HEX est sous le bloc. Un clic copie le HEX et met à jour les pastilles.
  4. Le jeton (brand) remplit --brand-tint-10 et un extrait Tailwind. Copier le résultat copie le CSS. Afficher l’exemple recharge #3B82F6 à 10 % en Mélange.
  5. Le lot accepte plusieurs HEX. L’exemple charge #3B82F6, #171B45 et #0074D9. Chaque ligne montre la base, une teinte moyenne et une ombre moyenne.

Notes

Le mélange est sRGB linéaire vers #FFFFFF ou #000000. 50 % de teinte de #3B82F6, c’est ce bleu à 50 % sur blanc. Clarté / Chroma / Teinte utilisent HSL, pas OKLCH. Un HEX invalide affiche une erreur. Tout effacer vide les rampes. Lié : HEX vers Tailwind, opacité, HEX vers RGBA.

Où l’utiliser

  • Survol, enfoncé et bordure depuis un HEX de marque.
  • Une rampe à 10 % pour des jetons 100–900.
  • Fonds atténués en baissant le chroma.
  • Teintes compagnes en tournant la teinte.

Questions

50 % de teinte, c’est 50 % d’opacité sur blanc ?

Sur l’axe Mélange, oui : la couleur à 50 % sur #FFFFFF.

10 % égale-t-il Tailwind 50–950 ?

Neuf crans de chaque côté plus la base. Ce sont des pourcentages de mélange, pas de l’OKLCH. Pour une classe par défaut, utilisez HEX vers Tailwind.

Plusieurs couleurs d’un coup ?

Oui. Une par ligne, ou des virgules hors parenthèses. rgb(22, 163, 74) reste un item.