Gamut de Cores Explicado: sRGB, P3 e Rec. 2020

As cores na sua tela são limitadas por uma fronteira que a maioria dos usuários nunca considera: o gamut de cores. Por grande parte da história da web, esse limite era o mesmo para praticamente todos os dispositivos — sRGB, um padrão estabelecido em 1996. Hoje, celulares, notebooks e monitores modernos exibem rotineiramente muito mais cores do que o sRGB permite, e o CSS tem as ferramentas para aproveitar isso — se você souber como.

Este guia explica o que é um gamut de cores, percorre sRGB, Display P3 e Rec. 2020 como os três gamuts mais relevantes para trabalho na web, e mostra exatamente como usar cores de gamut amplo no CSS com a consulta de mídia @media (color-gamut).

O que é um Gamut de Cores?

Um gamut de cores é o intervalo completo de cores que um sistema de cores pode representar ou reproduzir. Nem todas as cores visíveis ao olho humano podem ser expressas em todos os sistemas de cores — limitações físicas e técnicas significam que cada sistema cobre apenas um subconjunto do que podemos perceber.

O Diagrama de Cromaticidade CIE 1931

Cientistas de cor representam gamuts visualmente usando o diagrama de cromaticidade CIE 1931 — um mapa 2D em forma de ferradura de todas as cores perceptíveis pelo olho humano médio. O limite externo da ferradura representa as cores espectrais mais puras e saturadas. As regiões internas representam cores menos saturadas e mais misturadas. O branco fica próximo ao centro.

Qualquer gamut de cores específico aparece nesse diagrama como um polígono — tipicamente um triângulo definido por suas três cores primárias (vermelho, verde, azul). A área desse triângulo determina quantas cores visíveis o gamut cobre:

• Um triângulo pequeno = gamut estreito (menos cores)
• Um triângulo grande = gamut amplo (mais cores)

As três primárias de qualquer gamut determinam onde ficam os vértices do triângulo. Empurrar as primárias em direção à borda externa da ferradura (primárias mais saturadas) expande o triângulo e o gamut.

Por que os Gamuts Importam para o Design Web

Até muito recentemente, isso era uma preocupação acadêmica. Quase todos os monitores em uso eram compatíveis com sRGB, e as cores da web eram universalmente cores sRGB. Mas à medida que o Display P3 se tornou padrão nos dispositivos Apple (todos os iPhones desde 2016, todos os MacBooks recentes, iMacs, iPad Pros e Studio Displays), e à medida que os monitores HDR se espalharam para Windows e jogos, o panorama prático de exibição se fragmentou.

Conteúdo web fornecido em sRGB ainda parece correto em displays P3 e Rec. 2020 — as cores sRGB são um subconjunto desses gamuts mais amplos. Mas conteúdo especificado em espaços de cor de gamut amplo pode aproveitar as primárias mais ricas e saturadas que P3 e Rec. 2020 oferecem.

sRGB: O Padrão Web Desde 1996

História e Adoção

O sRGB (standard Red Green Blue) foi desenvolvido conjuntamente pela HP e Microsoft em 1996 e padronizado pela IEC como IEC 61966-2-1. Seu objetivo era fornecer uma referência comum para monitores de consumo, impressoras e a web — permitindo reprodução de cores consistente sem exigir calibração de dispositivos.

O sRGB se tornou o espaço de cor padrão para: - Navegadores web (todas as cores CSS são sRGB a menos que especificado de outra forma) - Câmeras digitais (arquivos JPEG usam sRGB por padrão) - A maioria dos monitores de consumo nas décadas de 2000 e 2010 - O subsistema de exibição do Windows - Conteúdo SDR (Standard Dynamic Range) padrão

Cobertura do sRGB

O sRGB cobre aproximadamente 35% do gamut de cores visível conforme definido pelo diagrama de cromaticidade CIE 1931. Isso pode soar limitante, mas cobre um intervalo prático que abrange uma ampla variedade de cores naturais e manufaturadas encontradas no cotidiano.

As primárias do sRGB são: - Vermelho: aproximadamente x=0,64, y=0,33 (um vermelho levemente alaranjado) - Verde: aproximadamente x=0,30, y=0,60 (um verde-amarelado) - Azul: aproximadamente x=0,15, y=0,06 (um azul-violeta)

sRGB no CSS

Toda cor CSS que você já escreveu é sRGB a menos que você tenha especificado explicitamente o contrário. Isso inclui:

• Códigos hex: #3B82F6
• Cores nomeadas: blue, coral, rebeccapurple
• rgb() e rgba(): rgb(59, 130, 246)
• hsl() e hsla(): hsl(217, 91%, 60%)

Todos esses valores se resolvem para sRGB. Um valor de #FF0000 significa precisamente o vermelho primário do sRGB — o vermelho mais vivo que o sRGB pode representar. Em um display P3, esse vermelho é renderizado fielmente, mas não aproveita o primário vermelho ainda mais vívido nativo do P3.

Display P3: O Padrão Moderno da Apple

O que é Display P3?

O Display P3 é um espaço de cor desenvolvido pela Apple para seus displays Retina, derivado do espaço de cor DCI-P3 usado na projeção de cinema digital. Ele usa o mesmo ponto branco do sRGB (D65, o iluminante padrão de luz do dia) e o mesmo gamma, mas define cores primárias diferentes e mais saturadas.

O Display P3 cobre aproximadamente 45% do gamut de cores visível — cerca de 26% mais área do que o sRGB. A cobertura expandida é mais pronunciada nas regiões de vermelho e verde, com expansão menos dramática no azul.

Quais Dispositivos Suportam Display P3?

A Apple adotou o Display P3 amplamente a partir de 2015–2016:

• iPhone 7 e posteriores — todos os modelos de iPhone subsequentes
• iPad Pro (9,7 polegadas, 2016) e posteriores — todos os modelos de iPad Pro subsequentes
• MacBook Pro (final de 2016) e posteriores com display Retina
• iMac (Retina 5K, final de 2015) e posteriores
• Apple Pro Display XDR, Studio Display

No lado do Windows e Android, muitos notebooks e celulares de ponta também vêm com displays capazes de P3, embora a adoção seja menos uniforme. Em 2025, a maioria dos dispositivos de consumo de ponta suporta pelo menos P3.

Especificando Cores P3 no CSS

O CSS Color Level 4 fornece a função color() com o espaço de cor display-p3, permitindo que você especifique cores que usam as primárias P3 diretamente:

/* Vermelho P3 — mais vívido que o vermelho sRGB */
color: color(display-p3 1 0 0);

/* Um verde vívido em P3 */
color: color(display-p3 0 1 0);

/* Um coral rico em P3 */
color: color(display-p3 0.95 0.42 0.37);

Os três valores em color(display-p3 R G B) são normalizados para 0–1 (não 0–255). Isso é diferente da função rgb().

Vendo a Diferença

O impacto prático do P3 é mais visível em cores altamente saturadas. Um vermelho P3 vívido [comparável a color(display-p3 1 0 0)] é visivelmente mais saturado do que o vermelho sRGB #FF0000 em um display compatível com P3. Para cores de marca e imagens hero que precisam de máxima vivacidade, o P3 oferece uma melhoria significativa.

Rec. 2020: O Futuro do HDR e Cinema

O que é Rec. 2020?

O Rec. 2020 (formalmente ITU-R BT.2020) é o padrão de cor para Televisão Ultra High Definition (UHDTV) e conteúdo HDR. Foi definido pela União Internacional de Telecomunicações em 2012 e representa um gamut dramaticamente mais amplo do que qualquer coisa em uso comum do consumidor hoje.

O Rec. 2020 cobre aproximadamente 75% do gamut de cores visível — mais do que o dobro da área do sRGB e substancialmente mais amplo do que o P3. Suas primárias são definidas nos limites espectrais de comprimentos de onda de laser específicos, o que significa que são teoricamente as cores mais saturadas possíveis nesses comprimentos de onda.

Suporte Atual nos Displays

Aqui está a ressalva crítica: quase nenhum display de consumo disponível atualmente cobre totalmente o gamut Rec. 2020. TVs HDR de ponta podem cobrir 75–90% do Rec. 2020; projetores de cinema profissionais e monitores HDR especializados de masterização são necessários para cobertura total.

No entanto, o Rec. 2020 é o gamut de referência para os padrões de conteúdo HDR incluindo HDR10, Dolby Vision e HLG. Mesmo que um display não consiga reproduzi-lo totalmente, o conteúdo masterizado em Rec. 2020 será mapeado de tons para exibição em telas de gamut menor.

Rec. 2020 no CSS

/* Verde Rec. 2020 — extremamente vívido, além da maioria dos displays */
color: color(rec2020 0 1 0);

/* Um vermelho profundo em Rec. 2020 */
color: color(rec2020 0.8 0.1 0.1);

Para trabalho web hoje, as cores Rec. 2020 serão exibidas como a cor reproduzível mais próxima em qualquer gamut que o display suporte. Isso as torna compatíveis com o futuro: navegadores com capacidade Rec. 2020 mostram a cor completa; os outros mostram a melhor aproximação.

Cores de Gamut Amplo no CSS com @media (color-gamut)

O CSS fornece uma consulta de mídia especificamente para detectar a capacidade de gamut do display e servir cores apropriadas:

@media (color-gamut: srgb) {
  /* Suportado por virtualmente todos os displays coloridos */
}

@media (color-gamut: p3) {
  /* Display suporta pelo menos o gamut P3 */
}

@media (color-gamut: rec2020) {
  /* Display suporta pelo menos o gamut Rec. 2020 */
}

Os valores são progressivos — p3 significa que o display suporta pelo menos P3 (então sRGB também está coberto), e rec2020 significa que o display suporta pelo menos Rec. 2020 (cobrindo P3 e sRGB também).

Padrão de Aprimoramento Progressivo

A abordagem recomendada é definir sua cor sRGB base primeiro e depois aprimorar progressivamente para displays de gamut mais amplo:

.hero-button {
  /* Fallback sRGB — funciona em todos os displays */
  background-color: #E63946;
}

@media (color-gamut: p3) {
  .hero-button {
    /* Vermelho mais vívido em displays P3 */
    background-color: color(display-p3 0.95 0.17 0.23);
  }
}

@media (color-gamut: rec2020) {
  .hero-button {
    /* Ainda mais vívido em displays Rec. 2020 */
    background-color: color(rec2020 0.89 0.14 0.21);
  }
}

Em um monitor sRGB padrão, o botão mostra o vermelho hex #E63946. Em um iPhone, MacBook Pro ou monitor moderno de gamut amplo, mostra a versão P3 mais vívida. Em um display capaz de Rec. 2020, mostra a versão mais vívida.

Usando oklch() para Gamut Amplo

O espaço de cor OKLCH não é específico de nenhum gamut, mas pode endereçar naturalmente cores fora do sRGB — valores que ficam fora do intervalo 0–1 em termos sRGB são automaticamente de gamut amplo. Isso torna o OKLCH conveniente para trabalho de cores entre gamuts:

.accent {
  /* OKLCH pode expressar P3 e além */
  color: oklch(60% 0.25 27deg);
}

O navegador mapeia a cor OKLCH especificada para a cor reproduzível mais próxima em qualquer gamut que o display suporte. Se o display for compatível com P3, mapeia para a cor P3; se for sRGB, faz o clip para o equivalente sRGB mais próximo.

Esta é uma razão convincente para usar OKLCH em sistemas de design: você pode especificar uma percepção de cor pretendida e o navegador lida com o mapeamento de gamut automaticamente. Use o Conversor de Cores da ColorFYI para traduzir entre valores hex sRGB e seus equivalentes OKLCH.

A Linha de Base color-gamut: srgb

Todo display colorido suporta pelo menos color-gamut: srgb — isso corresponde a qualquer display não monocromático. Você só precisará desse valor de consulta de mídia se quiser direcionar displays coloridos em oposição a displays monocromáticos hipotéticos, o que raramente é necessário.

Na prática, a consulta útil é color-gamut: p3, que cobre o ecossistema Apple e uma parcela crescente de dispositivos Android e Windows.

Suporte nos Navegadores

Em 2025: - @media (color-gamut) — suportado em todos os principais navegadores (Chrome, Firefox, Safari, Edge) - color(display-p3) — suportado em todos os principais navegadores - color(rec2020) — suportado no Chrome e Safari; suporte do Firefox seguiu - oklch() — suportado em todos os principais navegadores

Não há navegadores de uso comum hoje que falhariam ao interpretar esses recursos; eles ou renderizam a cor de gamut amplo ou recuam graciosamente para a declaração sRGB anterior.

Orientação Prática para Projetos de Web Design

Você Deve Usar Cores P3 Hoje?

Sim, com uma abordagem de aprimoramento progressivo. O risco de desvantagem é zero — os fallbacks sRGB garantem que seu design pareça correto em todos os displays. A vantagem é que uma parcela significativa e crescente do seu público vê cores mais vívidas e ricas.

Os casos de uso mais impactantes são: - Cores de marca e destaques que devem aparecer tão vívidos quanto possível - Imagens hero e gráficos promocionais onde a vivacidade impulsiona o engajamento - Visualização de dados onde um intervalo de cores mais amplo permite cores categóricas mais distintas

Quais Cores se Beneficiam Mais do P3?

Os ganhos do P3 em relação ao sRGB são maiores em: - Vermelhos e laranjas vívidos: a primária vermelha do P3 é visivelmente mais saturada - Verdes saturados: o P3 se estende significativamente na região verde-amarelo - Rosas e magentas vibrantes: o P3 captura melhor a paleta vívida de moda/beleza

Cores neutras, cores escuras e tons pastel mostram diferença visível mínima entre sRGB e P3, porque estão perto do centro do gamut onde ambos os espaços de cor se sobrepõem substancialmente.

Fluxo de Trabalho Prático

1. Projete seu sistema de cores em hex (sRGB) como de costume
2. Identifique as 2–5 cores onde a máxima vivacidade importa (cor primária de marca, destaque hero, estados-chave de UI)
3. Use o Conversor de Cores da ColorFYI para encontrar o equivalente OKLCH de cada uma
4. No CSS, especifique o valor OKLCH (ou o equivalente color(display-p3)) e deixe o navegador lidar com o mapeamento de gamut
5. Teste em um display compatível com P3 (qualquer MacBook ou iPhone moderno) para verificar a melhoria visual

Resumo Comparativo de Gamuts

Principais Conclusões

• Um gamut de cores é o intervalo total de cores que um sistema pode representar, visualizado como um triângulo no diagrama de cromaticidade CIE. Primárias mais amplas = triângulo maior = mais cores.
• O sRGB tem sido o padrão universal da web desde 1996, cobrindo aproximadamente 35% das cores visíveis. Todos os valores de cor CSS padrão (rgb(), hsl(), hex) são sRGB.
• O Display P3 cobre aproximadamente 45% das cores visíveis e é padrão em todos os dispositivos Apple desde 2016 (iPhone, MacBook, iPad Pro, iMac) e em muitos dispositivos Windows e Android modernos.
• O Rec. 2020 cobre aproximadamente 75% das cores visíveis e é usado como gamut de referência para conteúdo HDR, mas poucos displays de consumo o reproduzem totalmente hoje.
• Use @media (color-gamut: p3) para aprimorar progressivamente as cores para displays compatíveis com P3, com sRGB como fallback de linha de base.
• color(display-p3 R G B) especifica cores no espaço de cor P3 no CSS; os valores são normalizados para 0–1.
• oklch() expressa naturalmente cores de gamut amplo e é cada vez mais preferido para sistemas de design — o navegador lida com o mapeamento de gamut para a capacidade do display automaticamente.
• Use o Conversor de Cores da ColorFYI para traduzir entre hex, OKLCH e outros espaços de cor enquanto você constrói sistemas de cores de gamut amplo.