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