Generatore di tinte chiare
Generate tinte più chiare di un colore mescolandolo con il bianco in passaggi regolari. 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 tinta, a partire dal colore originale. La miscelazione sRGB riproduce il comportamento dei classici strumenti per le tinte e di Sass, mentre OKLab offre passaggi uniformi dal punto di vista percettivo. Ideale per sfondi, stati al passaggio del mouse e scale cromatiche.
Domande frequenti
Che cos'è una tinta?
Una tinta è un colore mescolato con il bianco. Mantiene la tonalità e diventa più chiara e tenue, a differenza di una sfumatura, che si ottiene mescolandolo con il nero, o di un tono, che si ottiene mescolandolo con il grigio.
Come sono distribuiti i passaggi?
Con N passaggi, la riga k mescola il colore con una proporzione di bianco pari a (k - 1) / N: con 10 passaggi si ottengono 0%, 10%, 20% e così via fino al 90%. La prima riga corrisponde sempre al colore originale e il bianco puro non viene mai incluso nell'elenco.
Qual è la differenza tra la miscelazione sRGB e quella OKLab?
La miscelazione sRGB calcola la media dei valori dei canali codificati con la gamma, come fanno Sass mix() con il bianco e la maggior parte dei generatori di tinte classici. La miscelazione OKLab avviene in uno spazio percettivo, quindi i passaggi di luminosità appaiono più uniformi e le tonalità chiare non sbiadiscono così rapidamente.
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 tinte 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, la percentuale di bianco, 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, mentre luminosità e cromaticità OKLCH ne hanno fino a quattro.
Cosa succede ai colori trasparenti?
Il canale alpha dell'input viene mantenuto per ogni tinta, perché il bianco viene miscelato con lo stesso valore alpha. I codici esadecimali hanno quindi 8 cifre e le funzioni CSS terminano con il valore alpha dopo una barra.
Cosa succede ai colori fuori dallo spazio sRGB?
La miscelazione usa il colore completo, ma HEX, RGB e HSL possono rappresentare solo sRGB; perciò i passaggi fuori gamma vengono convertiti in sRGB con l'algoritmo CSS Color 4 in quelle colonne. La colonna OKLCH mantiene il valore non convertito.
Come si usano le tinte in CSS?
Copiate i valori esadecimali o oklch() nelle proprietà personalizzate, ad esempio --brand-100 e --brand-200. Per miscelare direttamente nel browser, color-mix(in oklab, var(--brand) 80%, white) produce la stessa tinta al 20% dell'impostazione OKLab.
Posso usare testo bianco su una tinta chiara?
Di solito no, perché le tinte chiare hanno poco contrasto con il bianco. Usate testo scuro su tinte chiare e verificate ogni combinazione con uno strumento di controllo del contrasto; per il testo normale, WCAG AA richiede almeno 4.5:1.