Ferramenta 05
Gerador de gradiente
Monte um gradiente, ajuste o ângulo e copie o CSS. A interpolação em OKLCH evita a zona acinzentada que aparece no meio de gradientes entre cores opostas.
O código inclui primeiro uma declaração sRGB de compatibilidade e depois a versão perceptual.
Sobre esta ferramenta
Um gradiente entre duas cores opostas no círculo cromático, como azul e laranja, passa pelo cinza quando interpolado em sRGB, porque o caminho reto entre os dois pontos atravessa a região de baixa saturação do espaço.
Interpolar em OKLCH percorre o arco de matiz em vez da reta, mantendo a saturação ao longo da transição. É o mesmo espaço que usamos nas escalas tonais e nas relações cromáticas do catálogo.
O código gerado usa a sintaxe de espaço de interpolação do CSS Color 4. A declaração sRGB anterior mantém o gradiente visível quando essa sintaxe ainda não é suportada.