Degradado de verde a azul marino

Un degradado suave de verde a azul marino en CSS, mezclado en OKLab para que el centro quede limpio. Cambia el ángulo, añade colores y copia el código.

Colores

Mezclar en

OKLab mantiene luminoso el centro. sRGB es como mezclan los navegadores antiguos y a menudo se vuelve gris en el centro.

Tipo

Ángulo90°

CSS

background: linear-gradient(90deg, #008000, #007530, #006a44, #005f52, #00535e, #004666, #00386e, #002579, #000080);
background: linear-gradient(90deg in oklab, #008000, #000080);

Tailwind CSS v4

bg-linear-90/oklab from-[#008000] to-[#000080]

Colores a lo largo del degradado

Pasos7

Cómo se mezclan verde y azul marino en cada espacio de color

Los mismos dos colores dan un centro distinto según el espacio en el que mezcla el navegador. Estos son los colores exactos al 50 %. Mezclado en sRGB simple, el centro es #004040 con un croma de 0.057. OKLab da #00535e con 0.089, así que la versión sRGB se ve bastante más gris en el centro.

Mezclar en	Color central	Luminosidad	Croma
OKLab	#00535e	39,5 %	0.089
OKLCH	#00535b	39,5 %	0.182
sRGB	#004040	33,6 %	0.057
LCH	#004b55	37,1 %	0.292
HSL	#008080	54,3 %	0.093

Preguntas sobre este degradado

¿Cómo hago un degradado de verde a azul marino en CSS?

Usa background: linear-gradient(90deg in oklab, #008000, #000080). Añade antes una línea con la versión sRGB para navegadores muy antiguos. La interpolación en OKLab funciona en todos los navegadores actuales.

¿Qué color hay a medio camino entre verde y azul marino?

Mezclado en OKLab, el color a medio camino entre verde y azul marino es #00535e. Una mezcla simple en sRGB da #004040.

¿Cómo hago un degradado de verde a azul marino en Tailwind CSS?

En Tailwind CSS v4 usa las clases bg-linear-90/oklab from-[#008000] to-[#000080].