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

Agora, todos os principais mecanismos são compatíveis com os novos espaços e funções de cor CSS. Descubra como eles podem dar vitalidade aos seus designs.

Rachel Andrew

O CSS agora oferece suporte a espaços de cor que nos permitem acessar cores fora da gamut sRGB. Isso significa que você pode oferecer suporte a telas HD (alta definição), usando cores da gama HD. Esse suporte inclui novas funções para melhorar o uso das cores na Web.

Acessar espaços de cor no CSS

Já temos várias funções que nos permitem acessar cores na gama sRGB: rgb(), hsl() e hwb(). Agora compatível com navegadores está a função color(), uma maneira 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);
}

Também há suporte a várias funções que permitem acesso a espaços de cor diferentes de sRGB usando lch(), lab(), oklch() e oklab().

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

A função color-mix()

Além desses 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 cor. No CSS a seguir, 25% do azul é misturado ao branco, no espaço de cores srgb.

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

Saiba mais sobre color-mix()

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

Parte da série Newly interoperável (em inglês)