# Generatore di toni di colore

Generate tonalità di un colore mescolandolo con grigio neutro in passaggi regolari, riducendone la saturazione senza modificarne la tonalità. Inserite un colore in qualsiasi formato CSS, scegliete da 2 a 20 passaggi e uno spazio di miscelazione: otterrete una tabella con i valori HEX, RGB, HSL e OKLCH per ogni tonalità, a partire dal colore originale. Utile per palette attenuate, stati disabilitati, superfici discrete e varianti più sobrie del brand.

## Domande frequenti

### Che cos'è una tonalità?

Una tonalità è un colore mescolato con il grigio. Mantiene la propria tonalità e diventa più attenuato, a differenza di una tinta, mescolata con il bianco, o di una sfumatura, mescolata con il nero.

### Quale grigio viene usato?

Il grigio medio sRGB #808080, rgb(128 128 128). I colori chiari diventano quindi leggermente più scuri e quelli scuri leggermente più chiari avvicinandosi a quel valore; per mescolare con un altro grigio, usate il Miscelatore di colori con il grigio che preferite.

### Come sono distribuiti i passaggi?

Con N passaggi, la riga k mescola il colore con una quota di grigio pari a (k - 1) / N: con 10 passaggi si ottengono quindi 0%, 10%, 20% e così via fino al 90%. La prima riga corrisponde sempre al colore originale e il grigio puro non compare mai nell'elenco.

### In cosa differisce una tonalità dalla riduzione della saturazione HSL?

Ridurre la saturazione HSL mantiene la luminosità HSL, mentre mescolare con il grigio avvicina anche la luminosità al valore medio. Le tonalità sembrano quindi colori visti attraverso un filtro grigio, ideali per sfondi attenuati e stati disabilitati.

### Qual è la differenza tra la miscelazione sRGB e quella OKLab?

La miscelazione sRGB calcola la media dei valori dei canali con codifica gamma, il metodo classico delle scale tonali simili alla pittura e Sass mix(). La miscelazione OKLab avviene in uno spazio percettivo, perciò la cromaticità diminuisce in modo più uniforme da un passaggio all'altro.

### Quali formati di input posso usare?

Codici esadecimali con o senza #, nomi di colori CSS, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() e cmyk(). Inserite un solo colore per ogni operazione.

### Quante tonalità posso generare?

Da 2 a 20 per operazione, con 10 come valore predefinito. Il conteggio include il colore originale nella prima riga.

### Quali valori mostra la tabella?

Per ogni passaggio sono indicati la quota di grigio, il codice esadecimale, rgb(), hsl() e oklch() nella sintassi moderna CSS. I canali RGB sono numeri interi, le percentuali HSL hanno fino a due decimali e i valori di luminosità e cromaticità OKLCH fino a quattro.

### Cosa succede ai colori trasparenti e a quelli con un'ampia gamma cromatica?

La trasparenza alfa dell'input viene mantenuta per ogni tonalità, quindi i codici esadecimali hanno 8 cifre. I passaggi fuori gamut vengono convertiti in sRGB con l'algoritmo CSS Color 4 nelle colonne HEX, RGB e HSL, mentre la colonna OKLCH conserva il valore non convertito.

### Come ricreo una tonalità in CSS?

Copiate il valore esadecimale o oklch(), oppure lasciate che il browser lo mescoli con color-mix(in oklab, var(--brand) 70%, #808080) per ottenere la tonalità al 30% dell'impostazione OKLab. color-mix() funziona in tutti i principali browser attuali.

Il tuo annuncio qui?

[Scrivici](mailto:hi@dennn.is?subject=Pubblicit%C3%A0%20su%20OneClick%20Pro)

[Annuncio La suite di plugin pronta per gli agenti di WordPress.](https://sleekwp.com/?ref=oneclickpro)