Ir para o seletor de cores

Gradiente de coral para verde-azulado

Um gradiente suave de coral para verde-azulado em CSS, misturado em OKLab para o meio ficar limpo. Mude o ângulo, adicione cores e copie o código.

Cores

Misturar em

O OKLab mantém o meio vivo. O sRGB é como os navegadores antigos misturam e muitas vezes deixa o meio cinza.

Tipo
90 °

CSS

background: linear-gradient(90deg, #ff7f50, #e8835a, #d08562, #b98668, #a0876e, #868674, #6a8578, #48837c, #008080);
background: linear-gradient(90deg in oklab, #ff7f50, #008080);

Tailwind CSS v4

bg-linear-90/oklab from-[#ff7f50] to-[#008080]

Cores ao longo do gradiente

7

Como coral e verde-azulado se misturam em cada espaço de cor

As mesmas duas cores dão um meio diferente conforme o espaço em que o navegador faz a mistura. Estas são as cores exatas em 50%. Estas duas cores se misturam quase igual em todos os espaços: o meio é #a0876e em OKLab e #808068 em sRGB, então qualquer um serve.

Misturar emPrévia do gradienteCor do meioLuminosidadeCroma
OKLab#a0876e63,9%0.047
OKLCH#86962a63,9%0.13
sRGB#80806859,2%0.034
LCH#6f973b62,7%0.129
HSL#55e80081,7%0.258

Perguntas sobre este gradiente

Como fazer um gradiente de coral para verde-azulado em CSS?

Use background: linear-gradient(90deg in oklab, #ff7f50, #008080). Para navegadores muito antigos, adicione antes uma linha com a versão sRGB. A interpolação em OKLab funciona em todos os navegadores atuais.

Qual é a cor no meio do caminho entre coral e verde-azulado?

Misturando em OKLab, a cor no meio do caminho entre coral e verde-azulado é #a0876e. Uma mistura simples em sRGB dá #808068.

Como fazer um gradiente de coral para verde-azulado no Tailwind CSS?

No Tailwind CSS v4, use as classes bg-linear-90/oklab from-[#ff7f50] to-[#008080].

Gradientes populares