Display P3 é um espaço de cor com um gamut mais amplo que o sRGB: seu vermelho, seu verde e seu azul são mais saturados, então ele consegue mostrar cores vivas que o sRGB não alcança. Os números 255, 0, 0 são um vermelho diferente em cada um. Na web, um código hex comum é sempre sRGB.
O que é um gamut?
Um gamut é a faixa de cores que um espaço, ou uma tela, consegue produzir. Todo espaço RGB é definido por três primárias, seu vermelho, seu verde e seu azul mais puros, mais um ponto branco e uma curva que traduz os números em brilho. As cores alcançáveis misturando esses três formam um triângulo em um diagrama de cromaticidade, e esse triângulo é o gamut.
O sRGB tem o triângulo menor. O Display P3 é um triângulo mais amplo que o contém, com um vermelho e um verde mais saturados e o mesmo ponto branco. A MDN descreve assim o recurso de mídia color-gamut: o sRGB está contido no P3, que está contido no Rec. 2020. Como o triângulo P3 contém o do sRGB, toda cor sRGB tem um equivalente em P3. O contrário não vale.
Por que o mesmo número parece diferente?
Porque #ff0000 não diz "este vermelho exato". Diz "vermelho no máximo, no espaço que o software ao redor presumir". O vermelho no máximo em P3 é mais intenso que o vermelho no máximo em sRGB. Se você der os mesmos três números a uma tela que os interpreta como P3 e a outra que os interpreta como sRGB, saem dois vermelhos diferentes.
O eixo dos cinzas é a exceção. Cinzas, preto e branco, onde os três canais são iguais, parecem iguais nos dois espaços. As diferenças se concentram nas cores saturadas, e por isso um pastel ou um neutro sobrevivem a qualquer confusão e um verde ou laranja vivo não.
Por que um print do meu celular fica mais apagado na web?
Uma causa comum: o print foi capturado com um perfil P3 embutido, e em algum ponto do caminho até a página web o perfil foi descartado. Os valores dos pixels não mudam, mas o que os exibe agora os lê como sRGB. Números P3 lidos como sRGB caem numa cor menos saturada, e tudo parece um pouco desbotado.
O erro oposto também existe. Uma ferramenta que converte direito para sRGB mantém a cor o mais próxima possível dentro do gamut menor, mas as cores mais vivas não têm para onde ir e são cortadas ou comprimidas. Uma foto com verdes intensos pode ficar mais chapada depois de exportada para sRGB mesmo que nada tenha sido etiquetado errado.
Não consigo dizer qual dessas duas coisas aconteceu com o seu arquivo. Ninguém consegue só olhando a imagem. O perfil é guardado como metadado, e sites de envio, apps de mensagem e alguns editores o reescrevem ou o removem. Se uma cor mudou entre dois lugares, pergunte o que cada etapa fez com o perfil. O lado das imagens, incluindo o que mais viaja dentro de um arquivo de foto, está em o que são os dados EXIF e o que eles revelam.
Como escrever uma cor P3 em CSS?
Com a função color(): color(display-p3 1 0.5 0), três valores de 0 a 1. A MDN a lista como amplamente disponível nos navegadores desde maio de 2023. Você pode perguntar se a tela consegue usá-la com @media (color-gamut: p3).
O padrão seguro é um reserva na cascata. Escreva primeiro a cor sRGB e depois a P3, e um navegador que não entenda color() ignora a segunda linha:
.badge {
background: #00c853;
background: color(display-p3 0 0.8 0.3);
}Um navegador que entende a linha P3 numa tela que não consegue mostrá-la mapeia a cor para a mais próxima que ela consegue. O que você obtém ali depende do dispositivo, então confira num monitor sRGB comum em vez de supor.
Quando vale a pena um gamut mais amplo?
Com menos frequência do que o marketing sugere. Ele compensa em poucos lugares:
- Uma cor de marca saturada. Um verde, laranja ou magenta vivo é onde o sRGB corta, e onde uma versão P3 parece visivelmente mais rica numa tela P3.
- Fotografia e miniaturas de vídeo. Imagens são o conteúdo com mais chance de ter cores fora do sRGB, desde que o arquivo esteja realmente etiquetado e exportado em P3.
- Gradientes e brilhos. Duas pontas vivas dão mais material a um espaço mais amplo. Se o seu gradiente já fica cinza no meio, a causa é o espaço em que ele é interpolado, não o gamut.
Não compensa em nada em texto corrido, bordas, fundos e qualquer coisa cinza, porque o eixo de cinzas compartilhado não deixa nada a ganhar. E tem um custo: um segundo valor para manter em cada cor que você ampliar, e um design que agora parece diferente em dois tipos de tela. O mesmo azul serão dois azuis, e quem revisa num notebook sRGB não vai ver o que o designer aprovou numa tela P3.
O que a checagem de contraste usa?
A fórmula de contraste da WCAG 2.x é escrita em termos de valores sRGB. Para uma cor que só existe em P3 ela não tem resposta definida, então teste o reserva sRGB que você envia junto. Os limites estão em que razão de contraste você precisa para um texto legível.
O que nossas ferramentas de cor podem e não podem fazer
As duas são só sRGB. O conversor de cores converte entre HEX, RGB e HSL, que são três formas de escrever uma mesma cor sRGB, e seu seletor devolve um valor hex. Ele não converte de nem para Display P3, e não lê OKLCH nem nenhum outro espaço. O gerador de paletas monta suas paletas a partir de uma base sRGB e exporta códigos hex. Para um valor P3 você precisa escrever a linha color() por conta própria ou pegá-la de uma ferramenta de design que suporte o espaço. As duas rodam inteiramente no seu navegador, e nada do que você digita é enviado. A escolha de formato entre HEX, RGB, HSL e OKLCH tem seu próprio artigo: qual formato de cor usar.
Para ver quais são de fato os seus valores sRGB antes de ampliar qualquer coisa, o conversor de cores mostra uma cor como HEX, RGB e HSL lado a lado, e o gerador de paletas te dá uma paleta hex para começar. Nenhum dos dois produz um valor Display P3, então essa linha fica por sua conta.
Se a próxima dúvida é como montar a paleta em primeiro lugar, como escolher uma paleta de cores que funciona trata de neutros, estados e contraste, que importam mais que o gamut na maioria dos sites.
Perguntas frequentes
Qual é a diferença entre sRGB e Display P3?
Os dois são espaços de cor RGB, mas o Display P3 tem primárias vermelha e verde mais saturadas, então consegue mostrar cores vivas que o sRGB não alcança. Toda cor sRGB existe em P3, e o contrário não vale. Os mesmos três números, como 255, 0, 0, são um vermelho mais intenso em P3 do que em sRGB.
Por que minhas cores ficam mais apagadas depois de enviar um print?
Uma causa comum é que a imagem trazia um perfil Display P3 e uma etapa posterior o removeu, então os valores dos pixels agora são lidos como sRGB. Números P3 lidos como sRGB saem menos saturados. Também pode ser uma exportação para sRGB que comprime cores que o gamut menor não comporta. Qual das duas aconteceu depende do que cada ferramenta fez com o perfil, e a imagem sozinha não diz.
Um código hex pode ser uma cor Display P3?
Não. Em CSS um código hex é sempre sRGB, então não consegue nomear uma cor fora desse gamut. Para usar Display P3 você escreve color(display-p3 r g b) com valores de 0 a 1, e deixa antes uma linha hex como reserva para os navegadores que não a entendem.
Preciso de Display P3 no meu site?
Normalmente não. Ele ajuda com cores de marca saturadas, fotos e gradientes vivos em telas que conseguem mostrá-los, e não faz nada pelos cinzas, pelo texto corrido nem pela maioria das cores de interface. Também significa manter dois valores por cor e aceitar que o site pareça diferente em dois tipos de tela.
Última atualização 4 de outubro de 2026
