# Degradado océano: códigos de las aguas someras a lo profundo [Canonical HTML page](https://gradiently.design/es/guide/ocean-gradient) El mar ya es un degradado: pálido sobre la arena, brillante donde llega el sol, casi negro donde no. Copia ese orden y una mezcla de océano parecerá real. Aquí tienes los códigos, profundidad a profundidad. ## The short version - 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. 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é. - Espuma: #e0f7f4 - Aguas someras: #7ee0d6 - Laguna: #22b8cf - Mar abierto: #0284c7 - Oleaje: #075985 - Zona crepuscular: #0c3b66 - Profundo: #082f49 - Abismo: #020c1b El mar de arriba abajo. La mayoría de los degradados de océano usan tres o cuatro paradas vecinas de esta columna. ## 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](https://gradiently.design/es/guide/turquoise-gradient). - De espuma a aguas someras: `linear-gradient(180deg, #e0f7f4 0%, #7ee0d6 100%)` - Agua clara: `linear-gradient(180deg, #a5f3fc 0%, #22b8cf 100%)` - Sol sobre el agua: `radial-gradient(circle at 30% 20%, #f0fdfa 0%, #7ee0d6 40%, #0891b2 100%)` - Caída del arrecife: `linear-gradient(160deg, #7ee0d6 0%, #22b8cf 50%, #0284c7 100%)` Mezclas de aguas someras. Cada una empieza con una parada pálida o brillante, como se ve el agua clara sobre la arena. ## 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](https://gradiently.design/es/guide/blue-gradient) tienen la familia azul completa. - Mar abierto: `linear-gradient(180deg, #38bdf8 0%, #0284c7 50%, #075985 100%)` - Atlántico: `linear-gradient(135deg, #22b8cf 0%, #1d4ed8 100%)` - Alta mar: `linear-gradient(180deg, #0ea5e9 0%, #0c3b66 100%)` - Oleaje: `linear-gradient(160deg, #0284c7 0%, #075985 45%, #0c3b66 100%)` Azules de mar abierto. Menos verde, más profundidad y, arriba, aún lo bastante brillantes para sentirse como la luz del día. ## 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](https://gradiently.design/es/guide/gradient-banding) antes de exportar. - Descenso: `linear-gradient(180deg, #075985 0%, #082f49 50%, #020c1b 100%)` - Luz desde la superficie: `radial-gradient(ellipse at 50% 0%, #0ea5e9 0%, #0c3b66 30%, #020c1b 80%)` - Bioluminiscencia: `radial-gradient(circle at 70% 80%, #22b8cf 0%, #082f49 30%, #020c1b 75%)` Mezclas de mar profundo. Una sola fuente suave de luz basta; todo lo demás es profundidad. ## 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](https://gradiently.design/es/guide/gradient-stops) explican cómo funcionan sus posiciones. - Horizonte al amanecer: `linear-gradient(180deg, #fde2cf 0%, #bae6fd 45%, #0284c7 45%, #082f49 100%)` - Horizonte a mediodía: `linear-gradient(180deg, #bfdbfe 0%, #e0f2fe 52%, #0ea5e9 52%, #0c3b66 100%)` - Orilla: `linear-gradient(180deg, #0284c7 0%, #7ee0d6 50%, #e0f7f4 70%, #f5deb3 100%)` Las paradas secas crean un horizonte; una parada pálida de espuma crea una orilla suave. ## 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 En stories y pins, usa toda la altura para la inmersión. En el hero y el banner, prueba un horizonte o una luz desde un lado. 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](https://gradiently.design/es/guide/css-linear-gradient) tratan la sintaxis. ```css 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; } ``` Una página que se vuelve más profunda al hacer scroll. Usa texto oscuro en las secciones superiores brillantes y texto claro en las inferiores. ## 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](https://gradiently.design/es/guide/text-on-gradient) para más técnicas. Una story de un club de vela con titular claro sobre un degradado océano que se oscurece de azul brillante a azul marino profundo Una story que va del agua brillante arriba al azul profundo abajo, con las palabras en la banda más tranquila. ## FAQ ### ¿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.