# 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.

Fonte: https://pickshade.com/pt/gamut
Atualizado: 2026-09-28

## 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 | #ff5733 |
| Display P3 | color(display-p3 0.92577 0.38907 0.25797) |
| OKLCH | oklch(68.036% 0.21001 33.692) |
| Rec. 2020 | color(rec2020 0.81266 0.37868 0.19735) |

## 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.

## Ferramentas

- [Conversor de HEX para Display P3](https://pickshade.com/pt/convert/hex-to-p3)
- [Seletor de cores OKLCH com aviso de gamut](https://pickshade.com/pt)
- [OKLCH explicado](https://pickshade.com/pt/oklch)

## Guias relacionados

- [OKLCH explicado: o formato de cor que finalmente corresponde ao que você vê](https://pickshade.com/pt/oklch)
- [CSS color-mix() e cores relativas: tons, hover e transparência](https://pickshade.com/pt/css-color-mix)
- [Formatos de cor explicados: HEX, RGB, HSL, OKLCH e os demais](https://pickshade.com/pt/color-formats)