Vermelho Intenso P3
Vermelho super saturado
Verde Maçã P3
Verde super saturado
Laranja Cinema P3
Laranja de nível cinematográfico
Rosa Neon P3
Rosa super saturado
Ciano Jade P3
Ciano super saturado
Violeta P3
Roxo super saturado
/* sRGB fallback */
color: #ff4500;
/* P3 aprimorado */
color: color(display-p3 1 0.3 0);
/* Detecção por media query */
@media (color-gamut: p3) {
.brand { color: color(display-p3 ...); }
}
Amostras P3 mais vívidas → Suporte P3 verdadeiro
P3 cortado → Apenas gama sRGB
Ferramenta Profissional de Teste de Cor DCI-P3
Verifique com precisão se sua tela realmente suporta o gamut amplo P3 através de amostras de cores exclusivas P3, visualização dos limites sRGB e testes de saturação por canal.
Amostras Exclusivas P3
Exibe cores que apenas monitores P3 conseguem renderizar corretamente: vermelho ultra-saturado, verde Apple, laranja de cinema. Em telas sRGB, essas cores são cortadas para os valores sRGB mais próximos, perdendo sua vivacidade.
Visualização dos Limites sRGB
Barras de gradiente transicionam do limite do gamut sRGB aos extremos do gamut P3. Em telas P3, o gradiente continua além do limite sRGB; em telas sRGB, o gradiente para no limite (as cores não mudam mais).
Verificação de Cor CSS P3
Todas as amostras renderizadas usando a sintaxe CSS color(display-p3 ...) — o suporte nativo de cor P3 do navegador. Combinado com consultas @media (color-gamut: p3), desenvolvedores frontend podem oferecer cores de interface mais vibrantes para usuários com gamut amplo.
O Que É DCI-P3?
Entendendo as origens e aplicações do padrão de gamut de cor P3.
Padrão da Indústria Cinematográfica
O DCI-P3 foi estabelecido em 2005 pela Digital Cinema Initiatives, originalmente para projeção de cinema digital. Ele cobre aproximadamente 45% das cores visíveis ao olho humano, cerca de 25% maior que os 35% do sRGB.
Preferido no Ecossistema Apple
A Apple adotou o P3 totalmente a partir de 2015: iMac 5K, iPhone 7+, iPad Pro, MacBook Pro e Pro Display XDR — todos suportam P3. O gerenciamento de cores do macOS lida perfeitamente com conteúdo P3, tornando-o o ecossistema P3 mais maduro.
Padrão de Conteúdo HDR
Formatos HDR como HDR10 e Dolby Vision usam o P3 como container de cores. Netflix, Disney+ e Apple TV+ masterizam conteúdo HDR no gamut P3. Telas sem P3 não conseguem renderizar totalmente as cores HDR.
Como Verificar o Suporte a P3
Três passos para verificar a capacidade de cor P3 da sua tela.
Ver Resultados da Detecção
A página detecta automaticamente a media query color-gamut do navegador ao carregar. Se mostrar "P3 Suportado", a combinação tela + SO + navegador consegue renderizar cores P3.
Comparar Amostras Exclusivas
Observe a área de amostras exclusivas P3. Se essas amostras parecerem visivelmente mais vívidas que os controles sRGB adjacentes (especialmente vermelhos e verdes), sua tela está realmente mostrando cores estendidas P3 em vez de cortar para sRGB.
Verificar Extensão do Gradiente
Encontre o marcador de limite sRGB nas barras de gradiente. Em telas P3, o gradiente continua ficando mais vívido após o marcador; em telas sRGB, as cores param de mudar após o marcador — esse é o limite físico do gamut sRGB.
Terminologia de Cor P3
color(display-p3)
Função de cor CSS Level 4 que permite especificar cores P3 diretamente em páginas web. Sintaxe: color(display-p3 r g b) com valores RGB de 0 a 1. O Safari foi o primeiro a suportar; Chrome 111+ e Firefox 113+ agora também suportam.
Media Query de Gamut de Cor
@media (color-gamut: p3) detecta se o dispositivo do usuário suporta P3. Use em CSS ou no window.matchMedia do JavaScript para implementar degradação graciosa ou aprimoramento progressivo para dispositivos com gamuts diferentes.
Clipping (Corte)
Quando cores P3 são exibidas em um monitor sRGB, valores que excedem a faixa sRGB são cortados para os valores mais próximos do limite sRGB. Isso causa perda de saturação — um laranja P3 vívido se torna um laranja sRGB comum.
Gamut Amplo (Wide Gamut)
Refere-se amplamente a capacidades de gamut que excedem o sRGB. DCI-P3 é o padrão de gamut amplo mais comum, seguido pelo Adobe RGB. Display P3 é a variante para telas da Apple do DCI-P3, usando o ponto branco D65.
Quais Dispositivos Suportam P3
Suporte ao gamut P3 nos principais dispositivos.
Dispositivos Apple
Suporte P3:
• iPad Pro (todos): 100% P3.
• MacBook Pro 2016+: 100% P3.
• Pro Display XDR / Studio Display: 100% P3.
Monitores Windows
Suporte P3:
• Monitores gamer (topo de linha): 90-95% P3.
• Monitores de escritório padrão: tipicamente apenas sRGB.
• Nota: gerenciamento de cores do Windows requer suporte a perfis ICC.
Dispositivos Android
Suporte P3:
• Google Pixel 6+: suporte ao gamut P3.
• Dispositivos intermediários: tipicamente apenas sRGB ou ligeiramente abaixo.
• Gerenciamento de cores do Android melhorou a partir do Android 10.
Suporte de Navegadores
Renderização de Cor:
• Chrome 111+: suporte à função de cor CSS P3.
• Firefox 113+: suporte à função de cor CSS P3.
• Edge: segue o Chromium, sincronizado com o suporte do Chrome.
Boas Práticas de Cor P3 no Frontend
Cores P3 em CSS
Use color(display-p3 1 0.2 0.1) para cores de marca ultra-saturadas. Combine com @supports e valores de fallback para compatibilidade retroativa.
Detecção por Media Query
@media (color-gamut: p3) { } fornece cores aprimoradas para dispositivos P3. Em JS: matchMedia("(color-gamut: p3)") para detecção dinâmica.
Recursos de Imagem
Sirva imagens com perfil de cor Display P3 para dispositivos P3. Use <picture> + media queries para carregar imagens de gamuts diferentes conforme a capacidade do dispositivo.
Degradação Graciosa
Sempre forneça um fallback sRGB antes dos valores P3. CSS: color: #ff4500; color: color(display-p3 1 0.3 0); — a segunda linha sobrescreve a primeira.
Perguntas Frequentes
Q.O navegador reporta "P3 suportado" mas minha tela é sRGB?
O macOS converte cores P3 para exibição sRGB, então o navegador ainda reporta suporte P3 no nível do sistema. Mas a tela fisicamente não consegue mostrar cores estendidas P3 — valores excedentes são cortados. As comparações de amostras desta página ajudam a verificar a capacidade real da tela.
Q.Cores P3 afetam a velocidade de carregamento da página?
Não. color(display-p3) é uma propriedade CSS nativa que não requer bibliotecas JS extras ou recursos adicionais. O único impacto de desempenho pode vir de imagens com perfis de cor P3 incorporados, que são tipicamente ligeiramente maiores que as versões sRGB.
Q.Capturas de tela do iPhone preservam cores P3?
Sim. Capturas de tela e fotos do iPhone usam o espaço de cor Display P3 por padrão. Quando enviadas para dispositivos sRGB, as cores são convertidas. Visualizar essas capturas em dispositivos compatíveis com P3 mostra cores mais vibrantes.
Q.Por que fornecer valores P3 e sRGB?
A grande maioria das telas no mundo ainda é sRGB. Usar apenas valores P3 significa que navegadores sem suporte irão ignorá-los ou mostrar cores incorretas. A cascata CSS permite escrever um fallback sRGB primeiro e depois o aprimoramento P3 — o navegador escolhe automaticamente a versão suportada.
Q.Os "95% DCI-P3" da minha tela são suficientes?
Sim. Cobertura de 95%+ DCI-P3 consegue mostrar a grande maioria das cores estendidas P3. Diferenças aparecem apenas em regiões extremamente saturadas na fronteira vermelho-verde. Cobertura de 100% é mais um argumento de marketing — no uso real, 95% e 100% são praticamente indistinguíveis.
Q.Qual a diferença entre Display P3 e DCI-P3?
Display P3 é a variante da Apple usando o ponto branco D65 (mesmo do sRGB), adequada para telas. O DCI-P3 usa um ponto branco levemente esverdeado como padrão de projeção cinematográfica. Ambos têm faixas de gamut praticamente idênticas — apenas o ponto branco difere.
Dicas de Desenvolvimento para Cor P3
- • Sintaxe CSS: color: color(display-p3 1 0.3 0); — note que os valores RGB variam de 0 a 1, não de 0 a 255.
- • Compatibilidade Retroativa: Sempre escreva um fallback sRGB na linha antes do valor P3. O navegador escolhe automaticamente a regra suportada.
- • Ferramentas de Debug: O seletor de cores do Chrome DevTools já suporta pré-visualização e conversão de gamut P3.
- • Conselho de Design: Use aprimoramento P3 apenas para cores de marca, botões CTA e imagens principais — não para todas as cores.