Strumento colore pratico

Generatore tema shadcn

Mappa una palette su variabili CSS stile shadcn per background, foreground, primary, muted, accent e destructive.

Apri nel tool principaleTorna allo strumento
EnglishItalianoEspañolFrançaisDeutsch

Cosa offre questa pagina

  • Usa le shade generate per assegnare variabili semantiche.
  • Tieni separati neutral e brand color per componenti coerenti.
  • Controlla contrasto di primary/destructive foreground prima del rilascio.

Ideale per

  • App React
  • Librerie componenti
  • Variabili CSS

Come usarlo

Generatore paletteCrea palette accessibili, controlla il contrasto WCAG, estrai colori dalle immagini ed esporta CSS, Tailwind, SCSS, JSON, SVG e PNG.Controllo WCAGVerifica contrasto tra testo e sfondo secondo WCAG AA e AAA, testa coppie colore reali e scegli combinazioni leggibili.Estrattore immaginiEstrai colori dominanti da immagini PNG, JPG o WebP direttamente nel browser e trasformali in palette e token esportabili.
Posso usarlo con il generatore principale?

Sì. Parti da questa pagina, poi apri lo strumento Chromoforge con lo stesso colore base ed esporta la palette.

Quali variabili si aspetta un tema shadcn?

Le coppie background e foreground, poi card, popover, primary, secondary, muted, accent e destructive, ciascuna con il proprio foreground, piu border, input e ring. Ogni componente della libreria legge questi nomi, quindi compilarli tutti mantiene allineati tema chiaro e scuro.

Perche i valori shadcn si scrivono senza funzione colore?

La configurazione predefinita salva i canali nudi cosi Tailwind puo comporre l'alpha, come in hsl(var(--primary) / 0.5). Se incolli una stringa hsl() o oklch() completa nella variabile, le utility di opacita si rompono. Le versioni recenti della libreria accettano anche valori colore completi: segui la convenzione gia in uso nel progetto.