Miscelatore di colori
Mescolate due colori in uno spazio cromatico a vostra scelta e con qualsiasi proporzione, come fa CSS color-mix(). Inserite due colori in qualsiasi formato CSS, impostate la quota del secondo colore da 0 a 100 percento e scegliete tra OKLab, OKLCH, Lab, LCH, sRGB, sRGB lineare, Display P3, HSL, HWB o XYZ. Il risultato include i valori HEX, RGB, HSL e OKLCH, oltre a un'espressione color-mix() pronta per il foglio di stile.
Domande frequenti
Come funziona la quantità?
La quantità indica la quota di Colore 2 nella miscela. 0% restituisce Colore 1, 100% restituisce Colore 2 e 50% si trova a metà tra i due nello spazio scelto. Corrisponde a color-mix(in space, color1 (100 - p)%, color2 p%).
Quale spazio cromatico dovrei scegliere?
OKLab, l'impostazione predefinita, è percettivamente uniforme ed evita risultati intermedi spenti o scuri. sRGB mescola i canali con codifica gamma come nei browser più datati e Sass, rendendo le miscele di colori saturi più scure e spente. Lab è il più datato spazio percettivo CIE e si comporta in modo simile a OKLab, ma rende i blu meno uniformi.
Come funzionano gli spazi basati sulla tonalità?
OKLCH, LCH, HSL e HWB interpolano la tonalità lungo l'arco più breve della ruota dei colori, l'impostazione predefinita CSS, così il colore intermedio mantiene la saturazione e può risultare più vivido di entrambi i colori di partenza. Se uno dei due colori è grigio neutro e privo di tonalità, viene usata la tonalità dell'altro.
A cosa servono sRGB lineare e XYZ?
Entrambi mescolano linearmente le intensità luminose, come fasci di luce sovrapposti, perciò il colore intermedio appare più luminoso che in sRGB. Sono utili per effetti basati sulla fisica e per riprodurre l'aspetto di pixel sfocati o sovrapposti.
Come viene gestita la trasparenza?
Come CSS color-mix(), il miscelatore interpola con alfa premoltiplicato, così un colore trasparente non sposta la miscela verso il nero. Anche il valore alfa viene interpolato secondo la stessa proporzione e compare nei codici esadecimali a 8 cifre e dopo la barra nelle funzioni CSS.
Quali formati di input posso usare?
Codici esadecimali con o senza #, nomi di colori CSS, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), spazi color() come display-p3, e cmyk(), in qualsiasi combinazione. Ogni colore può essere lungo fino a 100 caratteri.
Cosa succede quando il risultato è fuori dallo spazio sRGB?
La miscelazione in Display P3, OKLCH o LCH può produrre colori che sRGB non è in grado di mostrare. I valori HEX, RGB e HSL vengono quindi convertiti in sRGB con l'algoritmo CSS Color 4 e il risultato include una nota, mentre il valore OKLCH conserva il colore non convertito.
Come uso l'espressione color-mix()?
Incollatela in qualsiasi proprietà CSS che accetta un colore. Indica i valori di input tramite codice esadecimale o oklch() per quelli ad ampia gamma, così il browser ricalcola la stessa miscela. color-mix() funziona in tutte le versioni attuali di Chrome, Edge, Firefox e Safari.
Qual è la precisione del risultato?
La quantità è espressa in percentuale intera e la miscela viene calcolata alla massima precisione con la libreria culori. I canali RGB vengono arrotondati a numeri interi, le percentuali HSL a due decimali e i valori di luminosità e cromaticità OKLCH a quattro: i browser possono quindi differire di un'unità nell'ultima cifra.
Come ottengo più passaggi tra due colori?
Eseguite il miscelatore con quantità diverse, ad esempio 25%, 50% e 75%. Per creare una scala completa verso il bianco, il nero o il grigio, i generatori di tinte, sfumature e tonalità producono tutti i passaggi in un'unica tabella.