Mescolare colori
Con questo strumento puoi mescolare colori e leggere subito il colore risultante in HEX, RGB e HSL. Puoi anche schiarire, scurire o smorzare un colore e creare una sfumatura fino a 15 passaggi.
Fonte: CSS Color 5, W3C – CSS Color Module Level 5: color-mix(). Aggiornato al: .
Come si calcola
Lo strumento mescola colori da schermo, cioè valori di luce – non vernice fatta di pigmenti. Per questo rosso e blu danno viola (#800080), mentre blu e giallo danno un grigio neutro e non verde come con gli acquerelli.
Come avviene la miscela
Per ogni canale di colore si calcola un valore intermedio. Lo spazio di miscelazione decide come:
- sRGB: la media semplice dei valori dei canali; è il comportamento predefinito di CSS e di gran parte dei programmi grafici.
- Luce lineare: mescola quantità fisiche di luce. Il risultato è più chiaro e corrisponde a due sorgenti luminose sovrapposte.
- Oklab: uno spazio colore percettivo. Le sfumature risultano più uniformi, senza un centro grigiastro tra colori vivaci.
Schiarire, scurire, smorzare
Mescolato con il bianco, un colore si schiarisce (tinta); con il nero si scurisce (ombra) e con il grigio si smorza (tono). La percentuale regola l’intensità e i passaggi producono un’intera serie, utile per gli stati hover o le scale di colore.
L’espressione color-mix() si copia direttamente nel foglio di stile. Palette abbinate arrivano dalla palette di colori, i formati si convertono con il convertitore di colori e il verificatore di contrasto controlla che il testo resti leggibile.
Domande frequenti
Che cosa si ottiene mescolando blu e giallo?
Sullo schermo un grigio neutro (media sRGB #808080), perché si mescolano colori di luce. Con acquerello o acrilico blu e giallo danno verde, perché i pigmenti agiscono per sottrazione.
Come mescolo due colori in parti uguali?
Inserisci i due colori e lascia la quota del secondo al 50 %. Per un terzo del colore 2 scrivi 33.
Come schiarisco o scurisco un colore?
Scegli «Schiarire un colore» o «Scurire un colore» e regola la percentuale: con il 20 % di bianco il colore si schiarisce un po’, con l’80 % è quasi bianco.
Quale spazio di miscelazione scegliere?
sRGB corrisponde al comportamento predefinito di CSS e di gran parte dei programmi. Oklab dà sfumature più uniformi e la luce lineare corrisponde a sorgenti luminose sovrapposte.
Come uso il risultato in CSS?
Copia il valore sotto «CSS (color-mix)» e usalo come colore in qualunque browser moderno, oppure prendi semplicemente il valore HEX.
Fonti e riferimenti normativi
- CSS Color 5: W3C – CSS Color Module Level 5: color-mix()
- Björn Ottosson – A perceptual color space for image processing (Oklab)
- CSS Color 4: W3C – CSS Color Module Level 4: funzione di trasferimento sRGB e luce lineare
Aggiornato al: · Principi editoriali
Strumenti correlati
- Generatore di palette di coloriCrea colori abbinati a partire da un colore di base: complementari, analoghi, triadici, quadrato, complementari divisi o monocromatici, con HEX, RGB e HSL.
- Convertitore di colori: HEX, RGB, HSL, HSV, CMYKConverti i colori: da HEX a RGB, da RGB a HEX, HSL, HSV, HWB e CMYK. Digita in qualsiasi formato o usa il selettore e copia il risultato, nel browser.
- Verifica del contrasto dei colori (WCAG 2.2)Verifica il contrasto tra colore del testo e dello sfondo: rapporto di contrasto WCAG 2.2 con esito AA/AAA per testo normale, testo grande e componenti UI.
- Trova il colore da un’immagine (contagocce)Estrai il codice colore da un’immagine: apri una foto, clicca un punto e copia HEX, RGB o HSL, più i colori principali. Nessun upload, tutto nel browser.
- Calcolo del BMI secondo l’OMSCalcolo BMI: indice di massa corporea da altezza e peso, categoria OMS su una scala a colori, peso normale per la tua altezza e BMI Prime, in cm/kg o ft/lb.
- Calcolo dello SWOLF nel nuotoSWOLF nuoto: somma tempo e bracciate di una vasca o fai la media di un allenamento e ottieni lo SWOLF, il passo ogni 100 e la distanza per bracciata.
- Calcolatore delay: da BPM a millisecondiCalcolatore delay BPM: inserisci il tempo e leggi il delay in ms per semiminima, croma, semicroma, puntata e in terzina. Gratuito e senza registrazione.
- Convertitore del calendario mayaCalendario maya online: converti qualsiasi data nel conto lungo, nel giorno tzolk’in e nella data haab’, o un conto lungo nella nostra data (correlazione GMT).
- Percentili crescita: calcola il percentile del tuo bambinoPercentili crescita secondo l’OMS: inserisci sesso, età, peso, lunghezza e circonferenza cranica e ottieni percentile, z-score e fascia normale da 0 a 5 anni.