Paleta De Cores Degrade

Como criar paleta de cores degrade que realmente funciona

Você já tentou misturar duas cores num gradiente e acabou com algo que parecia sujeira digital? Eu também. O problema não é a teoria — é que na prática, dependendo do modelo de cor que seu app ou site usa, o resultado pode sair completamente diferente do esperado. É uma sequência de tons que transita suavemente entre duas (ou mais) cores. No mundo digital, isso se aplica a interfaces, gráficos, visualizações de dados e até impressão. A diferença é que cada sistema interpreta o degradê de um jeito. HTML com CSS linear-gradient calcula os intermediários num espaço RGB padrão. Já ferramentas como Figma ou Sketch permitem escolher entre modos como OKLCH, HSL ou sRGB, e o resultado visual muda drasticamente. Eu já perdi duas horas tentando fazer um degradê de azul para verde que ficasse homogêneo num dashboard. O problema era que o monitor do cliente calibrado num perfil P3 exibia tons que eu não via no meu sRGB. A solução foi exportar o gradiente como imagem PNG 8-bit e usar ele direto, em vez de confiar no renderizador do navegador.

Passo a passo prático

1. Defina o espaço de cor certo

A maioria dos designers escolhe cores num picker RGB, mas para degradês uniformes o ideal é trabalhar em OKLCH ou CIELAB. Esses espaços são perceptualmente uniformes — ou seja, a transição parece suave ao olho humano. Em RGB, você pega dois tons e o meio pode ficar acinzentado ou avermelhado sem motivo. Eu uso o ColorBrewer pra escolher paletas de dados, mas pra gradientes simples prefiro o coolors.co com modo OKLCH ativado. Basta digitar as cores inicial e final, e ele calcula os intermediários de forma perceptualmente correta. O processo leva cerca de 3 minutos, contra 20 minutos tentando ajustar manualmente num picker RGB.

2. Implementação em CSS

O código básico é simples: background: linear-gradient(to right, #3498db, #2ecc71); Mas o problema é que isso usa RGB por padrão. Pra melhorar, você pode usar a notação moderna com oklch():

background: linear-gradient(to right, oklch(0.7 0.15 250), oklch(0.75 0.18 150)); Isso funciona em navegadores modernos (Chrome 111+, Safari 16.2+, Firefox 113+). Se precisar supportar IE ou navegadores antigos, aí sim converter pra RGB com ferramentas como browser-update.org ou gerar a imagem previamente.

3. Teste em múltiplos dispositivos

Aqui está o pulo do gato: um degradê que funciona no seu monitor pode sair completamente diferente num celular barato ou num projetor. Eu recomendo testar sempre em pelo menos três dispositivos com perfis de cor diferentes — um MacBook com P3, um iPhone com True Tone, e um monitor sRGB genérico. Uma técnica que uso é exportar o gradiente como SVG e inspecionar no Illustrator. O SVG permite visualizar os pontos de controle do degradê em tempo real, o que ajuda a detectar saltos de cor que o navegador mascara.

Pitfalls comuns

O primeiro erro é confiar cegamente no picker do design tool. Eu já vi designers usarem o mesmo degradê num site e num app, e o resultado ser completamente diferente porque o app usa ColorSpace Display P3 e o site usa sRGB. A solução é padronizar o espaço de cor desde o início do projeto e documentar isso num Figma commodo de cor fixo. O segundo erro é ignorar a acessibilidade. Um degradê com baixo contraste entre as extremidades pode ser ilegível pra pessoas com daltonismo. Eu uso o plugin Stark no Figma pra verificar o contraste em tempo real, e ajusto as cores se o WCAG 2.1 nível AA não for atingido.

Quando o degradê falha

Nem sempre o gradiente é a melhor solução. Se você precisa de transições abruptas (como em mapas de calor ou alertas visuais), use escalas discretas em vez de contínuas. Eu já vi times inteira tentarem forçar um degradê num dashboard de métricas críticas, e o resultado ter sido pior do que barras coloridas simples. Nesse caso, recomendo usar scale discretas com paleta qualiativa fixa. Também evite degradês em impressos sem conversão prévia. Um arquivo PDF com gradientes RGB pode sair completamente diferente numa gráfica que trabalha com CMYK. A solução é exportar como imagem PNG 8-bit com perfil sRGB embutido antes de enviar pra impressão.

Download e recursos

Se você quer uma paleta de cores degrade pronta pra usar, recomendo o Coolors (coolors.co) com exportação OKLCH, ou o Adobe Color com modo gradiente. Ambas as ferramentas permitem baixar o gradiente como SVG ou CSS pronto pro seu projeto. Outra opção é o ColorBrewer 2 (colorbrewer2.org), que oferece paletas validadas pra visualizações de dados. Você pode exportar como CSS, SVG ou até CSV com os valores de cor em OKLCH, HSL ou RGB, dependendo do seu setup. Se precisar de ajuda com implementação específica, o repositório intermediate-colors no GitHub tem exemplos prontos de gradientes acessíveis e compatíveis com múltiplos navegadores.