Gamut de cores explicado: sRGB, Display P3 e cores fora do gamut
Gamut é o conjunto de cores que uma tela ou um espaço de cor consegue mostrar. A web foi construída sobre o sRGB, mas hoje a maioria dos celulares e muitos notebooks exibem Display P3, com vermelhos, verdes e laranjas bem mais vivos.
2 min de leitura
O que é gamut
Toda tela mistura luz vermelha, verde e azul. O vermelho, o verde e o azul mais puros que ela consegue produzir marcam os cantos de um triângulo, e toda cor dentro desse triângulo está no gamut dela. As cores fora dele simplesmente não podem ser mostradas nessa tela.
sRGB, Display P3 e Rec. 2020
O sRGB é o padrão da web e da maioria dos monitores vendidos antes de 2016. HEX, rgb() e hsl() descrevem cores sRGB.
O Display P3 cobre cerca de um quarto a mais de cores que o sRGB, principalmente verdes, vermelhos e laranjas vivos. iPhones, iPads, Macs e muitos celulares Android e notebooks premium usam esse espaço. No CSS, ele é escrito como color(display-p3 r g b) ou como um valor OKLCH com croma alto.
O Rec. 2020 é ainda maior e é usado em vídeo HDR. Pouquíssimas telas o cobrem por completo.
| Formato | Valor |
|---|---|
| HEX | |
| Display P3 | |
| OKLCH | |
| Rec. 2020 |
O que acontece com cores fora do gamut
Se uma cor CSS está fora do gamut da tela, o navegador precisa mostrar outra coisa. O corte simples limita cada canal ao máximo e pode mudar o matiz. O CSS Color 4 recomenda, em vez disso, o mapeamento de gamut em OKLCH: manter a luminosidade e o matiz e reduzir o croma até a cor caber.
O PickShade marca toda cor que fica fora do sRGB e mostra a alternativa mapeada, para você saber exatamente o que quem usa telas mais antigas vai ver.
Como usar cores P3 no CSS com segurança
Escreva primeiro um fallback em sRGB e depois o valor de gamut amplo, ou coloque o valor vivo dentro de uma media query color-gamut.
CSS
.button {
background: #ff5733;
background: oklch(68% 0.24 33.7);
}
@media (color-gamut: p3) {
.hero {
color: color(display-p3 1 0.3 0.15);
}
}Perguntas e respostas
Como saber se uma cor está dentro do sRGB?
Cole a cor no PickShade. Qualquer cor fora do sRGB recebe um aviso de gamut junto com a cor mais próxima que cabe.
Cores P3 funcionam no Windows?
Sim, se o monitor cobre o P3 e o navegador conhece o perfil da tela. Em uma tela sRGB, o navegador traz a cor para dentro do sRGB, então nada quebra.
O HEX é limitado ao sRGB?
Sim. HEX, rgb(), hsl() e hwb() sempre descrevem cores sRGB. Use oklch() ou color(display-p3 ...) para cores de gamut amplo.