Nuovi spazi colore e funzioni CSS in tutti i principali motori

Tutti i principali motori ora supportano i nuovi spazi di colore e le nuove funzioni CSS. Scopri come possono dare vivacità ai tuoi design.

Rachel Andrew

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

Accedere agli spazi di colore da CSS

Abbiamo già una serie di funzioni che ci consentono di accedere ai colori all'interno della gamma sRGB: rgb(), hsl() e hwb(). Ora nei browser è supportata la funzione color(), un modo 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

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Origine

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

Supporto dei browser

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Origine

Puoi scoprire di più su tutti questi diversi spazi di colore nella guida ai colori CSS ad alta definizione.

La funzione color-mix()

Oltre a questi nuovi spazi di colore, tutti i motori ora supportano la funzione color-mix(). Questa funzione consente di mescolare un colore con un altro in uno qualsiasi degli spazi di colore. Nel seguente CSS, il 25% di blu viene mescolato al bianco nello spazio di colore sRGB.

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

Supporto dei browser

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 16.2.

Origine

Scopri di più su color-mix()

Queste nuove funzioni e spazi di colore promettono di portare colori HD brillanti sul web. Per trovare ispirazione, inizia creando delle bellissime sfumature utilizzando il generatore di sfumature HD su gradient.style.