Gerador de gradientes CSS
Escolha o tipo, o ângulo e as cores: o gerador monta o gradiente e mostra, lado a lado, a diferença entre interpolar em sRGB, OKLab e OKLCH.
Veja
- sRGB
- OKLab
- OKLCH
Copie o código
.element {
/* Sem suporte à interpolação, fica o sRGB. */
background: linear-gradient(90deg, #2563eb, #ffd600);
background: linear-gradient(90deg in oklch, #2563eb, #ffd600);
}O problema
Um gradiente entre duas cores vivas costuma passar por um cinza sujo no meio. De azul para amarelo, o ponto médio em sRGB é cinza, porque o navegador mistura os canais R, G e B em linha reta, e a média de duas cores opostas é neutra.
A saída era pôr paradas extras à mão no meio do gradiente para desviar do cinza, e refazer a conta a cada troca de cor.
Como funciona
Desde o CSS Color 4, o gradiente diz em que espaço de cor a mistura acontece:
linear-gradient(90deg in oklch, #2563eb, #ffd600) in oklab mistura em linha reta num espaço que segue a percepção; in oklch gira o matiz pelo caminho mais curto do círculo e mantém o croma, por isso passa por cores vivas.
Navegador que ainda não conhece a interpolação ignora a declaração inteira. Por isso o código traz antes a mesma linha sem o in: quem não entende fica com o gradiente em sRGB, e ninguém fica sem fundo.
OKLab é a escolha segura na maioria dos casos. OKLCH dá meios mais vivos, mas pode passar por matizes que não estão em nenhuma das pontas: de azul para amarelo, ele atravessa o verde.
Quando usar
- Fundos e áreas de destaque com duas cores vivas, sem a faixa cinza no meio.
- Gradientes de marca que precisam combinar com cores definidas em OKLCH.
- Barras de progresso e escalas de valor, em que o meio do caminho precisa ser legível.
- Trocar paradas extras postas à mão por uma interpolação melhor.
Outras ferramentas
Conversor de cores CSS
Cole uma cor em qualquer sintaxe e veja a mesma cor em hex, rgb(), hsl(), oklch(), lab() e display-p3, com o aviso de gamut.
CorEscala de cores OKLCH
Gere os tons de 50 a 950 a partir de uma cor, com luminosidade uniforme em OKLCH, o contraste de cada tom e as custom properties prontas.
CorGerador de sombras CSS
Monte uma box-shadow em camadas, tingida com o tom do fundo, e leve a cor numa custom property pronta para trocar.