Lingua:Italiano
Chromoforge

Generatore variabili colore CSS

Parti da un colore e ottieni un blocco :root pronto da copiare. Include il colore base, un colore leggibile per il testo e undici tonalità primarie.

Genera CSS

La riduzione chroma conserva luminosità e tonalità previste prima di arrotondare in HEX. Originale mantiene palette e link precedenti.

Usa HEX, RGB, HSL o OKLCH. OKLCH accetta luminosità/chroma numeriche o percentuali e unità angolari. Solo colori opachi; i valori fuori da sRGB vengono limitati con un avviso.

Colore selezionato#E24B4ATesto su questo colore: #111111

Scala di tonalità 50–950

:root {
  --brand: #E24B4A;
  --on-brand: #111111;
  --primary-50: #FFEEEC;
  --primary-100: #FFDDD8;
  --primary-200: #FFBCB5;
  --primary-300: #F5918A;
  --primary-400: #E24B4A;
  --primary-500: #C1282F;
  --primary-600: #9A000A;
  --primary-700: #7B0000;
  --primary-800: #5C0000;
  --primary-900: #410000;
  --primary-950: #2E0000;
}
Converti questo coloreControlla testo e sfondo

Da un colore ai token CSS

  1. Inserisci un colore HEX, RGB, HSL o OKLCH oppure usa il selettore. Il risultato si aggiorna qui.
  2. Copia tutto il blocco :root o scarica un file CSS. Puoi anche copiare le singole tonalità.
  3. Usa var(--brand), var(--on-brand) e da var(--primary-50) a var(--primary-950) nel tuo foglio di stile.

Verifica i ruoli prima di usare la scala

Il colore originale viene conservato nella posizione più vicina della scala. I numeri delle tonalità sono etichette, non garanzie di contrasto. --on-brand è scelto solo per testo opaco su --brand: controlla separatamente le altre coppie. Per una palette con più armonie e altri formati di esportazione, continua nello strumento principale.

Continua con il tuo colore

Generatore sfumature coloreGenera una scala 50-950 da un colore base per superfici UI, bordi, hover e dark mode.Convertitore colori: HEX, RGB, HSL e OKLCHConverti HEX, RGB, HSL o OKLCH in HEX, RGB, HSL e OKLCH. Copia ogni formato o una variabile CSS direttamente. Gratuito, locale e senza account.Controllo contrasto WCAGVerifica contrasto tra testo e sfondo secondo WCAG AA e AAA, testa coppie colore reali e scegli combinazioni leggibili.