Nuovi spazi colore e funzioni CSS in tutti i principali motori

Tutti i principali motori ora supportano i nuovi spazi colore e le nuove funzioni CSS. Scopri come possono dare vita ai tuoi progetti.

Rachel Andrew

Celebrazione: questa funzionalità web è ora disponibile in tutti e tre i principali motori dei browser.

CSS ora supporta gli spazi colore che ci consentono di accedere ai colori al di fuori della gamma sRGB. Ciò significa che puoi supportare display HD (alta definizione), che utilizzano colori di gamut HD. Questo supporto include nuove funzioni per utilizzare meglio i colori sul web.

Accedere agli spazi colore da CSS

Abbiamo già varie funzioni che ci consentono di accedere ai colori nella gamma sRGB: rgb(), hsl() e hwb(). Ora nei browser è supportata la funzione color(), un metodo normalizzato per accedere ai colori all'interno di 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);
}

Supporto dei browser

• 111
• 111
• 113
• 15

Origine

Sono supportate anche diverse funzioni che consentono l'accesso a spazi colore diversi da sRGB utilizzando lch(), lab(), oklch() e oklab().

Supporto dei browser

• 111
• 111
• 113
• 15

Origine

Per informazioni su tutti questi diversi spazi colore, consulta la Guida ai colori 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 combinare un colore con un altro, in uno qualsiasi degli spazi colore. Nel seguente CSS, il 25% del blu è misto al bianco, nello spazio colore s web.

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

Supporto dei browser

• 111
• 111
• 113
• 16,2

Origine

Scopri di più su color-mix()

Queste nuove funzioni e spazi colore promettono di portare colori HD vivaci sul web. Per trovare l'ispirazione, inizia creando splendidi gradienti utilizzando il generatore di gradienti HD all'indirizzo gradient.style.