Novos espaços de cor e funções CSS nos principais mecanismos

Todos os principais mecanismos agora são compatíveis com os novos espaços de cor e funções CSS. Descubra como eles podem deixar seus designs mais vivos.

Rachel Andrew

Agora, o CSS é compatível com espaços de cores que nos permitem acessar cores fora da gamut sRGB. Isso significa que você pode oferecer suporte a telas em HD (alta definição), usando cores de gamas de alta definição. Esse suporte vem com novas funções para fazer melhor uso das cores na web.

Acessar espaços de cor do CSS

Já temos várias funções que permitem acessar cores na gama sRGB: rgb(), hsl() e hwb(). Agora compatível com navegadores está a função color(), uma forma normalizada de acessar cores em qualquer espaço de cores RGB. Isso inclui sRGB, Display P3 e Rec2020. Confira alguns exemplos no CSS a seguir:

.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);
}

Compatibilidade com navegadores

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

Origem

Várias funções também têm suporte para acessar espaços de cor diferentes de sRGB usando lch(), lab(), oklch() e oklab().

Compatibilidade com navegadores

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

Origem

Saiba mais sobre todos esses diferentes espaços de cor no Guia de cores de CSS de alta definição.

A função color-mix()

Assim como esses novos espaços de cor, todos os mecanismos agora oferecem suporte à função color-mix(). Essa função permite a mistura de uma cor com outra, em qualquer um dos espaços de cores. No CSS a seguir, 25% do azul é misturado no branco, no espaço de cores s rgb.

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

Compatibilidade com navegadores

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

Origem

Saiba mais sobre o recurso color-mix()

Essas novas funções e espaços de cor prometem trazer cores vibrantes em alta definição para a web. Para se inspirar, comece criando alguns lindos gradientes usando o gerador de gradientes em HD em gradient.style.