Strumento colore pratico
Generatore sfumature colore
Genera una scala 50-950 da un colore base per superfici UI, bordi, hover e dark mode.
Cosa offre questa pagina
- Genera tinte chiare e shade scure da una tinta.
- Usa 50-200 per sfondi, 500-600 per azioni, 800-950 per dark UI.
- Esporta la scala in CSS, Tailwind, SCSS o JSON.
Ideale per
- Scale Tailwind
- Design token
- Hover state
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.
A cosa serve ogni step di una scala 50-950?
Da 50 a 200 sono sfondi di pagina e card, 300 e 400 sono bordi e separatori, 500 e 600 reggono bottoni e link, da 700 a 950 sono testo su superfici chiare e livelli di sfondo in dark mode. Tenere i ruoli fissi e cio che rende riutilizzabile una scala.
Meglio interpolare le tonalita in HSL o in OKLCH?
OKLCH. In HSL i passi di luminosita risultano irregolari, perche lo stesso valore numerico appare molto diverso nel giallo e nel blu. In OKLCH i passi sono percettivamente uniformi, quindi da 100 a 200 si percepisce la stessa distanza che da 700 a 800.