La versión corta
- Un degradado océano mezcla azules y azules verdosos en el orden en que los muestra el agua real: pálido y turquesa en las aguas someras, azul claro en mar abierto y azul marino casi negro en lo profundo.
- El agua absorbe primero la luz roja, por eso el mar se vuelve más azul y más oscuro con la profundidad.
- Los degradados de océano verticales, claros arriba y oscuros abajo, se leen como profundidad; una parada seca entre dos azules se lee como un horizonte.
- El texto blanco funciona en la mitad de azul profundo de un degradado océano; las aguas someras pálidas necesitan texto azul marino oscuro.
- Los degradados océano van bien con viajes, natación, vela, marisco, sostenibilidad y productos tecnológicos serenos.
En esta página
Un degradado océano mezcla azules y azules verdosos en el mismo orden que el mar: aguamarina pálido sobre la arena, turquesa en las aguas someras, azul claro en mar abierto y un azul marino casi negro en lo profundo. Llévalo de arriba abajo, de claro a oscuro, y la gente lo lee como profundidad sin que se lo digas. Los códigos de abajo siguen esa inmersión y luego añaden mezclas de horizonte, un mar CSS a página completa y los colores de texto que mantienen legibles las palabras sobre el agua.
Por qué el océano es azul y por qué importa para tu degradado
El agua absorbe primero el extremo rojo de la luz solar, luego el amarillo y el verde, así que cuanto más profundo vas, más queda solo el azul, y luego hasta eso se apaga. El agua poco profunda sobre arena pálida refleja mucha luz y se ve turquesa; el agua profunda se ve azul marino oscuro. Un degradado océano que mantiene este orden resulta natural; uno que pone azul oscuro sobre turquesa parece al revés, aunque nadie sepa decir por qué.
Degradados océano de aguas someras
El extremo brillante: el agua que ves desde una playa o un barco con buen tiempo. Soleados, limpios y acogedores, van bien con marcas de vacaciones, trajes de baño, empresas de piscinas y cartas de verano. El lado más tropical se trata en los degradados turquesa.
Degradados de mar abierto
Más lejos de la costa, el mar pierde su verde y se vuelve un azul claro y seguro. Estas mezclas transmiten fiabilidad, calma y competencia, por eso van bien con clubes de vela, aseguradoras de viaje, ciencia marina y marcas de tecnología que quieren azul sin la frialdad del azul marino corporativo. Los degradados azules tienen la familia azul completa.
Degradados de océano profundo
En el fondo de la inmersión, el mar se vuelve casi negro con solo un rastro de azul. Son dramáticos y silenciosos a la vez: escuelas de buceo, documentales, relojes de lujo, restaurantes de marisco al caer la noche. Un tenue resplandor desde arriba, como luz de la superficie, evita que se sientan vacíos. Las mezclas oscuras forman bandas con facilidad, así que lee el banding en degradados antes de exportar.
Degradados de horizonte y orilla
Los diseños de océano suelen incluir el cielo o la playa. El truco del horizonte es una parada seca: dos paradas de color en la misma posición, para que el cielo acabe y el mar empiece en una línea limpia. Una orilla funciona al revés, fundiendo el mar con la arena a través de una parada pálida de espuma para que los colores cálido y frío nunca se encuentren como gris. Las paradas de degradado explican cómo funcionan sus posiciones.
Elegir la dirección para cada formato
Como un degradado océano significa profundidad, funciona mejor en vertical, y los formatos altos muestran la inmersión completa. En formatos anchos, una mezcla de horizonte o un resplandor radial suele funcionar mejor que apretar todo el mar en poca altura. Una publicación vertical queda en medio: una mezcla vertical suave de mar abierto a profundo funciona, siempre que el titular caiga en una banda y no cruce el cambio.
Story 1080×1920
1080 × 1920
Pin 1000×1500
1000 × 1500
Publicación 1080×1350
1080 × 1350
Hero web 1920×1080
1920 × 1080
Banner de LinkedIn 1584×396
1584 × 396
Aquí es donde una sola imagen recortada te falla: la luz acaba en el lugar equivocado en la mitad de tus tamaños. Un Mark de Gradiently se renderiza de nuevo en cada formato, y el Designer puede producir la story, la publicación y el banner a partir de un solo encargo, así que el mar queda bien colocado en cada uno.
Un degradado océano en CSS para una página completa
Una página larga puede convertirse en una inmersión: brillante arriba, profunda en el pie. Aplica el degradado a toda la altura del documento y no a la ventana, dale un color sólido de reserva y añade un suave resplandor en la parte superior. Los degradados lineales en CSS tratan la sintaxis.
html {
background-color: #082f49; /* fallback, and the colour seen on overscroll */
}
body {
min-height: 100vh;
margin: 0;
color: #082f49;
background-image:
radial-gradient(ellipse 90% 30% at 50% 0%, rgb(224 247 244 / 0.8) 0%, transparent 70%),
linear-gradient(180deg, #7ee0d6 0%, #22b8cf 18%, #0284c7 40%, #075985 65%, #082f49 85%, #020c1b 100%);
}
/* switch to light text once the page reaches deep water */
.deep { color: #e0f7f4; }Texto sobre un degradado océano
Una mezcla de océano pasa de muy clara a muy oscura, así que ningún color de texto funciona en toda ella. El azul marino profundo #082f49 sobre azul cielo pálido #7dd3fc mide unos 8,3 a 1. El blanco sobre oleaje #075985 mide unos 7,6 a 1, y sobre mar abierto #0284c7 baja a unos 4,1 a 1, bien para titulares grandes pero escaso para texto de cuerpo. Coloca las palabras donde el color les convenga y consulta texto sobre degradados para más técnicas.
Una story que va del agua brillante arriba al azul profundo abajo, con las palabras en la banda más tranquila.
Preguntas frecuentes
¿Qué colores forman un degradado océano?
Aguamarina pálido, turquesa, azul claro, azul profundo y azul marino casi negro, en ese orden de arriba abajo. Códigos como #7ee0d6, #0284c7 y #082f49 cubren la gama.
¿Debe un degradado océano ir de claro a oscuro o de oscuro a claro?
Claro arriba y oscuro abajo, que es como se apaga la luz con la profundidad en el agua real.
¿Cómo hago una línea de horizonte en un degradado CSS?
Da a dos paradas de color la misma posición, como #bae6fd 45%, #0284c7 45%. El color cambia entonces en una línea nítida en lugar de una mezcla.
¿Qué color de texto funciona sobre un degradado océano?
Azul marino oscuro en la parte superior clara y blanco en la inferior profunda. Comprueba el punto justo detrás de cada línea de texto.
¿Qué diferencia hay entre un degradado océano y un degradado azul?
Un degradado océano sigue el orden del agua real y suele incluir turquesa y azul marino casi negro. Un degradado azul puede ser cualquier mezcla de azules.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil