# Interpolação de gradientes: sRGB, OKLab e porque importa [Canonical HTML page](https://gradiently.design/pt-pt/guide/gradient-interpolation) Escolhe azul e amarelo, mistura-os e o meio fica cinzento. Não são as tuas cores a falhar. É a matemática do espaço de cor a fazer a mistura, e desde o CSS Color 4 podes mudá-la. ## The short version - A interpolação de gradientes é o método usado para calcular cada cor entre duas paragens, e o espaço de cor em que acontece altera o resultado. - Misturar em sRGB avança em linha reta pelos valores de vermelho, verde e azul, por isso cores opostas como azul e amarelo passam por cinzento. - O OKLab foi concebido para que passos iguais pareçam mudanças iguais ao olho, o que dá uma luminosidade mais suave e uniforme ao longo do gradiente. - O OKLCH mistura luminosidade, croma e matiz em separado, por isso as cores mantêm-se saturadas e percorrem a roda de cores em vez de passarem pelo seu centro cinzento. - Em CSS escolhes o espaço dentro do gradiente, por exemplo `linear-gradient(in oklch, #2563eb, #f97316)`. A **interpolação de gradientes** é a forma como se calculam as cores entre as tuas paragens. Escolhes azul numa ponta e amarelo na outra; o software tem de inventar todas as cores intermédias, e fá-lo traçando uma linha entre as duas cores num certo espaço de cor. O espaço que usa muda o que vês. Mistura em sRGB e de azul a amarelo passa por um cinzento chapado. Mistura em OKLCH e passa por um azul-turquesa vivo. As mesmas paragens, um gradiente muito diferente. ## O que significa interpolação de gradientes Cada cor pode ser descrita como um ponto num espaço. Em sRGB os três eixos são vermelho, verde e azul. No OKLab são a luminosidade e dois eixos opostos, de verde a vermelho e de azul a amarelo. No OKLCH são a luminosidade, o croma (quão colorida) e o matiz (o ângulo à volta da roda). Interpolar é caminhar de um ponto para o outro. Um caminho reto num espaço pode ser uma curva, ou um desvio pelo cinzento, noutro. - Início: azul: #0000ff - Ponto médio em sRGB: #808080 - Ponto médio, sRGB linear: #bcbcbc - Ponto médio em OKLab: #6cabc7 - Ponto médio em OKLCH: #00cfbd - Fim: amarelo: #ffff00 A cor a meio caminho entre azul puro e amarelo puro em quatro espaços. O sRGB cai num cinzento morto; o OKLCH cai num turquesa vívido. ## sRGB, OKLab e OKLCH lado a lado - Azul a laranja, sRGB: `linear-gradient(90deg in srgb, #2563eb, #f97316)` - Azul a laranja, OKLab: `linear-gradient(90deg in oklab, #2563eb, #f97316)` - Azul a laranja, OKLCH: `linear-gradient(90deg in oklch, #2563eb, #f97316)` - Vermelho a azul, sRGB: `linear-gradient(90deg in srgb, #ff0000, #0000ff)` - Vermelho a azul, OKLab: `linear-gradient(90deg in oklab, #ff0000, #0000ff)` - Vermelho a azul, OKLCH: `linear-gradient(90deg in oklch, #ff0000, #0000ff)` Dois pares de cores, três espaços para cada. As linhas sRGB descaem para baço e escuro no meio; o OKLab uniformiza a luminosidade; o OKLCH mantém a cor. | Espaço | Como mistura | Ideal para | Atenção a | | --- | --- | --- | --- | | sRGB | Linha reta pelos valores de vermelho, verde e azul | Reproduzir exatamente designs antigos | Cinzento, meios escuros entre matizes distantes | | sRGB linear | O mesmo, sem codificação gama | Mistura de luz, brilhos | Os pontos médios parecem demasiado claros | | OKLab | Luminosidade e cor percetivamente uniformes | Misturas suaves e naturais; a predefinição das cores CSS modernas | Os opostos continuam a perder alguma cor | | OKLCH | Luminosidade, croma e matiz em separado | Misturas vivas, arco-íris, cores de marca muito afastadas | Pode passar por matizes inesperados | Os quatro espaços que mais provavelmente vais encontrar. O CSS oferece ainda outros, como `lab`, `lch`, `hsl` e `display-p3`. ## Porque é que os gradientes sRGB ficam cinzentos ou lamacentos O sRGB foi concebido para ecrãs, não para o olho. Os seus números têm codificação gama e os eixos não se alinham com a forma como vemos o matiz ou a luminosidade. Quando duas cores estão em lados opostos da roda, a linha reta entre elas passa perto do centro neutro, e o meio perde a cor. Azul e amarelo dão em média `#808080`. Esta é a principal causa dos [gradientes lamacentos](https://gradiently.design/pt-pt/guide/muddy-gradients), e é por isso que o instinto do designer de acrescentar uma cor-ponte funciona: a paragem extra curva o caminho à volta do cinzento. ## OKLab: passos uniformes para o olho O OKLab, publicado por Björn Ottosson em 2020, foi criado para que distâncias iguais pareçam diferenças iguais. O resultado prático é um gradiente cuja luminosidade muda de forma uniforme de ponta a ponta, sem queda escura nem inchaço claro no meio. Continua a seguir um caminho reto, por isso dois verdadeiros opostos perdem alguma cor no centro, mas muito menos do que em sRGB. O CSS moderno usa o OKLab por predefinição sempre que uma cor do gradiente é escrita numa sintaxe mais recente, como `oklch()`. ## OKLCH: manter a cor viva O OKLCH é o mesmo espaço do OKLab, descrito em forma polar: luminosidade, croma e um ângulo de matiz. Interpolar nele é caminhar à volta da roda, por isso as cores intermédias mantêm a saturação. É ideal para gradientes vivos e de marca e para [gradientes arco-íris](https://gradiently.design/pt-pt/guide/rainbow-gradient). Podes também escolher a que lado da roda ir com `shorter hue` (a predefinição), `longer hue`, `increasing hue` ou `decreasing hue`. O [guia de OKLCH](https://gradiently.design/pt-pt/guide/oklch-explained) explica o espaço com mais profundidade. - Vermelho a azul, matiz mais curto: `linear-gradient(90deg in oklch shorter hue, #ef4444, #3b82f6)` - Vermelho a azul, matiz mais longo: `linear-gradient(90deg in oklch longer hue, #ef4444, #3b82f6)` As mesmas duas cores. O caminho mais curto passa pelo magenta; o mais longo passa por laranja, amarelo e verde. ## Como definir a interpolação de gradientes em CSS Acrescenta `in ` antes das paragens, depois de qualquer ângulo ou forma. Os navegadores que não o entendem ignoram a declaração inteira, por isso escreve primeiro uma versão em sRGB como alternativa. Todos os espaços e palavras-chave de matiz estão listados na [referência de interpolação de cor da MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color-interpolation-method), e [gradientes CSS em OKLCH](https://gradiently.design/pt-pt/guide/css-gradient-oklch) tem mais receitas. ```css .hero { /* Fallback for older browsers: a bridge stop avoids the grey middle */ background: linear-gradient(135deg, #2563eb, #c026d3, #f97316); /* Modern browsers: let OKLCH keep the colour */ background: linear-gradient(135deg in oklch, #2563eb, #f97316); } .radial { background: radial-gradient(circle at 30% 30% in oklab, #fde68a, #0f766e); } .conic-rainbow { background: conic-gradient(in oklch longer hue, #ef4444, #ef4444); } ``` A palavra-chave de interpolação funciona em gradientes lineares, radiais e cónicos. Um gradiente cónico do vermelho de volta ao vermelho com `longer hue` desenha um arco-íris completo e uniforme. ## Que espaço de cor escolher 1. **Usa o OKLab por predefinição** Para a maioria das misturas de duas ou três cores, dá o resultado mais suave e sem surpresas. 2. **Usa o OKLCH para cores distantes ou vivas** Quando as cores estão longe na roda e queres que o meio continue brilhante. 3. **Mantém o sRGB para igualar trabalho antigo** Se um gradiente tem de parecer idêntico a um recurso ou imagem existente, mistura no mesmo espaço em que foi feito. 4. **Verifica o ponto médio** Seja qual for o espaço, olha para a cor a meio caminho. Se for cinzenta ou um matiz que não esperavas, muda o espaço ou acrescenta uma paragem. ### Velho hábito - Misturar em sRGB e acrescentar paragens para esconder o cinzento - Aceitar uma queda escura no meio - Escolher cores próximas para estar seguro ### Melhor - Misturar em OKLab ou OKLCH e usar menos paragens - Luminosidade uniforme de ponta a ponta - Usar pares mais ousados e deixar o espaço mantê-los limpos A interpolação é só uma parte de uma boa mistura; o sítio onde ficam as paragens importa tanto como ela, e isso está em [paragens de cor de gradientes](https://gradiently.design/pt-pt/guide/gradient-stops). Se preferires saltar a matemática, os Marks do Gradiently são fundos de gradiente acabados que se renderizam em todos os tamanhos em que desenhas, e a [documentação para programadores](https://gradiently.design/pt-pt/developers) mostra como o ChatGPT ou o Claude podem pesquisar Marks e criar designs que abrem no Studio. ## FAQ ### O que é a interpolação de gradientes? O cálculo de todas as cores entre duas paragens de um gradiente. O espaço de cor em que acontece, como sRGB ou OKLab, muda as cores que aparecem no meio. ### Porque é que os meus gradientes ficam cinzentos no meio? Estão a misturar em sRGB entre cores de lados opostos da roda, por isso o caminho passa perto do cinzento. Mistura em OKLCH ou acrescenta uma cor-ponte. ### O OKLab ou o OKLCH é melhor para gradientes? O OKLab dá as misturas mais uniformes e naturais. O OKLCH mantém as cores mais saturadas e é melhor para pares vivos e arco-íris. ### Como uso OKLCH num gradiente CSS? Acrescenta `in oklch` antes das cores, por exemplo `linear-gradient(90deg in oklch, #2563eb, #f97316)`. Escreve primeiro uma versão em sRGB como alternativa. ### Que espaço de cor usam os gradientes CSS por predefinição? sRGB quando todas as cores usam sintaxe mais antiga, como hexadecimal ou `rgb()`, e OKLab quando alguma cor usa uma sintaxe mais recente, como `oklch()`.