Degradado de azul a verde azulado
Un degradado suave de azul a verde azulado en CSS, mezclado en OKLab para que el centro quede limpio. Cambia el ángulo, añade colores y copia el código.
Colores
OKLab mantiene luminoso el centro. sRGB es como mezclan los navegadores antiguos y a menudo se vuelve gris en el centro.
CSS
background: linear-gradient(90deg, #0000ff, #0033f0, #0048e1, #0057d0, #0062c1, #006cb2, #0073a2, #007a92, #008080);
background: linear-gradient(90deg in oklab, #0000ff, #008080);Tailwind CSS v4
bg-linear-90/oklab from-[#0000ff] to-[#008080]Colores a lo largo del degradado
Cómo se mezclan azul y verde azulado 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 %. Estos dos colores se mezclan casi igual en todos los espacios: el centro es #0062c1 en OKLab y #0040c0 en sRGB, así que cualquiera sirve.
| Mezclar en | Vista previa del degradado | Color central | Luminosidad | Croma |
|---|---|---|---|---|
| OKLab | #0062c1 | 49,8 % | 0.178 | |
| OKLCH | #006d99 | 49,8 % | 0.203 | |
| sRGB | #0040c0 | 43,4 % | 0.207 | |
| LCH | #006883 | 47,1 % | 0.344 | |
| HSL | #0060c0 | 49,9 % | 0.168 |
Preguntas sobre este degradado
¿Cómo hago un degradado de azul a verde azulado en CSS?
Usa background: linear-gradient(90deg in oklab, #0000ff, #008080). 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 azul y verde azulado?
Mezclado en OKLab, el color a medio camino entre azul y verde azulado es #0062c1. Una mezcla simple en sRGB da #0040c0.
¿Cómo hago un degradado de azul a verde azulado en Tailwind CSS?
En Tailwind CSS v4 usa las clases bg-linear-90/oklab from-[#0000ff] to-[#008080].