Tutti i principali motori ora supportano i nuovi spazi colore e funzioni CSS. Scopri come possono dare vitali ai tuoi progetti.
CSS ora supporta gli spazi colore che ci consentono di accedere a colori al di fuori della gamma sRGB. Ciò significa che sono supportati i display HD (alta definizione), che utilizzano i colori della gamma HD. Questo supporto include nuove funzioni per migliorare l'utilizzo dei colori sul web.
Accedere agli spazi colore da CSS
Abbiamo già una serie di funzioni che ci permettono di accedere ai colori che rientrano nella gamma sRGB: rgb(), hsl() e hwb(). Ora supportata nei browser è la funzione color(), un modo normalizzato per accedere ai colori in qualsiasi spazio colore RGB. Sono inclusi sRGB, Display P3 e Rec2020. Puoi vedere alcuni esempi nel seguente CSS:
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
Sono supportate anche diverse funzioni che consentono l'accesso a spazi colore diversi da sRGB usando lch(), lab(), oklch() e oklab().
Per saperne di più su tutti questi diversi spazi colore, consulta la guida ai colori dei CSS ad alta definizione.
La funzione color-mix()
Oltre a questi nuovi spazi colore, ora tutti i motori supportano la funzione color-mix(). Questa funzione consente di mescolare un colore con un altro, in qualsiasi spazio colore. Nel CSS seguente, il 25% di blu viene mescolato al bianco nello spazio colore sstream.
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
Queste nuove funzioni e questi nuovi spazi colore promettono di portare colori HD vivaci sul web. Per trovare l'ispirazione, inizia creando alcuni splendidi gradienti utilizzando il generatore di gradienti HD a gradient.style.