Generatore di Scale

Trasforma qualsiasi colore in una scala di sistema di design di 11 gradazioni (50→950): interpolazione OKLCH percettivamente uniforme con il colore di origine ancorato alla sua gradazione più vicina, contrasto WCAG rispetto a bianco/nero per ogni gradazione, esportazione con un clic in Tailwind / variabili CSS / SCSS / JSON.

#--11 gradazione

#fff5ff

50profilo →

vs bianco 1.06
vs nero 19.76

#ffdffd

100profilo →

vs bianco 1.22
vs nero 17.23

#ffc2fa

200profilo →

vs bianco 1.46
vs nero 14.35

#ffa0f6

300profilo →

vs bianco 1.81
vs nero 11.61

#ff75ed

400profilo →

vs bianco 2.33
vs nero 9.02

gradazione di origine#f438df

500profilo →

vs bianco 3.24
vs nero 6.48

#e400d0

600profilo →

vs bianco 4.03
vs nero 5.21

#cb00b9

700profilo →

vs bianco 4.95
vs nero 4.24

#ae009f

800profilo →

vs bianco 6.36
vs nero 3.30

#8d0081

900profilo →

vs bianco 8.57
vs nero 2.45

#66005d

950profilo →

vs bianco 12.19
vs nero 1.72

// tailwind.config.js / @theme
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
        50: "#fff5ff",
        100: "#ffdffd",
        200: "#ffc2fa",
        300: "#ffa0f6",
        400: "#ff75ed",
        500: "#f438df",
        600: "#e400d0",
        700: "#cb00b9",
        800: "#ae009f",
        900: "#8d0081",
        950: "#66005d",
        },
      },
    },
  },
};

Come funziona il generatore di tonalità: inserisci, controlla, esporta.

Genera una scala di sistema di design a 11 passaggi da un colore, perceptualmente uniforme in OKLCH.

01
Inserisci
Incolla un HEX, oppure clicca su "Build scale" in qualsiasi pagina colore per importare il valore.
02
Controlla
Il tuo colore si allinea al suo step più vicino; il contrasto WCAG rispetto a bianco e nero è visualizzato sotto ogni step.
03
Esporta
Scegli Tailwind / CSS vars / SCSS / JSON e copialo direttamente nel tuo codice.

FAQ sul generatore di tonalità

Quattro domande che le persone fanno realmente sulla generazione delle tonalità.

Perché 11 passaggi?: 50-950 su 11 punti corrisponde alle scale utilizzate dai principali sistemi di design (Tailwind, Radix), quindi l’integrazione non comporta costi aggiuntivi.
La tonalità si sposterà?: No. L’interpolazione avviene in OKLCH con il tuo colore ancorato al suo step più vicino, quindi la tonalità rimane costante da 50 a 950.
Posso utilizzare la scala a scopi commerciali?: Sì. Una scala di tonalità è composta da numeri calcolati senza licenza associata: ciò che esporti è tuo.
Perché alcuni step risultano grigiastri?: I colori ad alta cromaticità escono dai limiti di sRGB agli estremi; il motore comprime la cromaticità in quei punti per mantenere i step vividi invece che diventare grigi o neon.

Dopo aver ottenuto il risultato

Continua da qui e metti i colori al lavoro.

Corrispondenza Standard

Inserisci un codice RAL, Pantone o NCS — o qualsiasi HEX — e confrontalo tra tutti i 10 sistemi standard con ΔE CIEDE2000.

Controllore di contrasto

Convalida del contrasto WCAG 2.1 tra qualsiasi colore di primo piano e sfondo.

Tavola di palette

Barra spaziatrice per randomizzare, bloccare, trascinare per riordinare, condividere tramite URL — tutto ciò che una tavola di palette dovrebbe fare.

Studio di palette AI

Descrivi una scena o un umore in una riga — ottieni una palette a cinque ruoli con motivazione.

Generatore di Scale

// tailwind.config.js / @theme module.exports = { theme: { extend: { colors: { brand: { 50: "#fff5ff", 100: "#ffdffd", 200: "#ffc2fa", 300: "#ffa0f6", 400: "#ff75ed", 500: "#f438df", 600: "#e400d0", 700: "#cb00b9", 800: "#ae009f", 900: "#8d0081", 950: "#66005d", }, }, }, }, };

Come funziona il generatore di tonalità: inserisci, controlla, esporta.

Genera una scala di sistema di design a 11 passaggi da un colore, perceptualmente uniforme in OKLCH.

Inserisci

Incolla un HEX, oppure clicca su "Build scale" in qualsiasi pagina colore per importare il valore.

Controlla

Il tuo colore si allinea al suo step più vicino; il contrasto WCAG rispetto a bianco e nero è visualizzato sotto ogni step.

Esporta

Scegli Tailwind / CSS vars / SCSS / JSON e copialo direttamente nel tuo codice.

FAQ sul generatore di tonalità

Quattro domande che le persone fanno realmente sulla generazione delle tonalità.

Perché 11 passaggi?

50-950 su 11 punti corrisponde alle scale utilizzate dai principali sistemi di design (Tailwind, Radix), quindi l’integrazione non comporta costi aggiuntivi.

La tonalità si sposterà?

No. L’interpolazione avviene in OKLCH con il tuo colore ancorato al suo step più vicino, quindi la tonalità rimane costante da 50 a 950.

Posso utilizzare la scala a scopi commerciali?

Sì. Una scala di tonalità è composta da numeri calcolati senza licenza associata: ciò che esporti è tuo.

Perché alcuni step risultano grigiastri?

I colori ad alta cromaticità escono dai limiti di sRGB agli estremi; il motore comprime la cromaticità in quei punti per mantenere i step vividi invece che diventare grigi o neon.