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

Todos os principais mecanismos agora oferecem suporte aos novos espaços de cores e funções do CSS. Descubra como elas podem dar vida aos seus designs.

Rachel Andrew

O CSS agora oferece suporte a espaços de cores que permitem acessar cores fora da gama sRGB. Isso significa que você pode oferecer suporte a telas de alta definição (HD), usando cores de gamas de alta definição. Esse suporte vem com novas funções para usar melhor as cores na Web.

Acessar espaços de cores do CSS

Já temos várias funções que permitem acessar cores dentro da gama sRGB: rgb(), hsl() e hwb(). Agora, a função color() tem suporte nos navegadores, uma maneira normalizada de acessar cores em qualquer espaço de cor RGB. Isso inclui sRGB, Display P3 e Rec2020. Confira alguns exemplos no CSS abaixo:

.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.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Origem

Várias funções também são compatíveis, permitindo o acesso a espaços de cores diferentes do sRGB usando lch(), lab(), oklch() e oklab().

Compatibilidade com navegadores

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

Origem

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

A função color-mix()

Além desses novos espaços de cores, todos os mecanismos agora oferecem suporte à função color-mix(). Essa função permite misturar uma cor em outra, em qualquer um dos espaços de cor. No CSS abaixo, 25% do azul é misturado com branco no espaço de cores sRGB.

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

Compatibilidade com navegadores

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

Origem

Saiba mais sobre o recurso color-mix()

Essas novas funções e espaços de cores prometem trazer cores vibrantes em HD para a Web. Para se inspirar, comece criando alguns gradientes bonitos usando o gerador de gradiente em HD em gradient.style.