Generatore tinta e ombra HEX

Questo è un generatore di tinte e ombre. Da un HEX miscela verso il bianco e il nero, oppure percorre chiarezza, croma e tinta HSL.

Clicca un valore per copiarlo

Esempi — clicca un campione

Converte più colori insieme. Uno per riga, oppure virgole come #3B82F6, #FF573380. Inserisci esempio carica tre righe e la tabella sotto.

Generatore tinta e ombra

Questo è un generatore di tinte e ombre. Miscela un HEX verso bianco o nero per hover e bordi.

Come si usa

  1. Incollate HEX, rgb() o hsl(), scegliete un colore, Casuale, un esempio (#3B82F6, #171B45, #0074D9, #0F766E) o un pixel se il browser lo consente.
  2. L’asse Miscela (bianco / nero) è quello iniziale. Chiarezza, Croma e Tinta tengono fermi gli altri canali HSL. Il passo 5%, 10%, 20% o 25% decide i tagli; Personalizzato usa 2–20 divisioni.
  3. La scala intera ha ombre a sinistra, base al centro, tinte a destra. L’HEX sta sotto il blocco. Un clic copia l’HEX e aggiorna i chip.
  4. Il token (brand) riempie --brand-tint-10 e un frammento Tailwind. Copia risultato copia il CSS. Mostra esempio ricarica #3B82F6 al 10% in Miscela.
  5. Il lotto accetta più HEX. L’esempio carica #3B82F6, #171B45 e #0074D9. Ogni riga mostra base, tinta media e ombra media.

Note

La miscela è sRGB lineare verso #FFFFFF o #000000. Un 50% di tinta di #3B82F6 è quel blu al 50% sul bianco. Chiarezza / Croma / Tinta usano HSL, non OKLCH. Un HEX non valido mostra un errore. Cancella tutto svuota le rampe. Collegato: HEX to Tailwind, opacità, HEX to RGBA.

Dove usarlo

  • Hover, premuto e bordo da un HEX di marca.
  • Una rampa al 10% per token 100–900.
  • Riempimenti spenti riducendo il croma.
  • Tinte compagne ruotando la tinta.

Domande

Il 50% di tinta è opacità 50% sul bianco?

Sull’asse Miscela sì: il colore al 50% su #FFFFFF.

Il 10% è Tailwind 50–950?

Nove scatti per lato più la base. Sono percentuali di miscela, non OKLCH. Per una classe predefinita usate HEX to Tailwind.

Più colori insieme?

Sì. Uno per riga, o virgole fuori dalle parentesi. rgb(22, 163, 74) resta un elemento.