Degradê oceano: códigos das águas rasas às profundezas

Um degradê oceano mistura azuis e azuis-esverdeados na mesma ordem do mar: azul-água pálido sobre a areia, turquesa nas águas rasas, azul límpido em mar aberto e um marinho quase preto no fundo. Aplique de cima para baixo, do claro ao escuro, e as pessoas leem profundidade sem que ninguém diga. Os códigos abaixo seguem esse mergulho e depois acrescentam misturas de horizonte, um mar em CSS de página inteira e as cores de texto que mantêm as palavras legíveis sobre a água.

Por que o oceano é azul e por que isso importa para o seu degradê

A água absorve primeiro a ponta vermelha da luz solar, depois o amarelo e o verde, então quanto mais fundo você vai, mais só resta o azul, e depois até ele some. A água rasa sobre areia clara reflete muita luz e parece turquesa; a água profunda parece azul-marinho escuro. Um degradê oceano que mantém essa ordem parece natural; um que põe azul escuro acima do turquesa parece de cabeça para baixo, mesmo que ninguém saiba dizer por quê.

Degradês de oceano raso

A ponta brilhante: a água que você vê de uma praia ou de um barco com tempo bom. Ensolarados, limpos e convidativos, combinam com marcas de férias, moda praia, empresas de piscina e cardápios de verão. O lado mais tropical aparece em degradês turquesa.

Degradês de mar aberto

Mais longe da costa, o mar perde o verde e vira um azul límpido e confiante. Essas misturas parecem confiáveis, calmas e competentes, e por isso combinam com clubes de vela, seguros de viagem, ciência marinha e marcas de tecnologia que querem azul sem a frieza do marinho corporativo. Degradês azuis tem a família azul mais ampla.

Degradês de oceano profundo

No fim do mergulho, o mar fica quase preto, com só um traço de azul. São dramáticos e silenciosos ao mesmo tempo: escolas de mergulho, documentários, relógios de luxo, restaurantes de frutos do mar à noite. Um leve brilho vindo de cima, como a luz da superfície, evita que pareçam vazios. Misturas escuras formam faixas com facilidade, então leia sobre banding em degradês antes de exportar.

Degradês de horizonte e de orla

Designs de oceano costumam incluir o céu ou a praia. O truque do horizonte é uma parada seca: duas paradas de cor na mesma posição, para o céu acabar e o mar começar numa linha limpa. Uma orla funciona ao contrário, fundindo o mar com a areia por uma parada de espuma pálida, para que o quente e o frio nunca se encontrem como cinza. Paradas de degradê explica como funcionam as posições.

Escolhendo a direção para cada formato

Como um degradê oceano significa profundidade, ele funciona melhor na vertical, e os formatos altos mostram o mergulho inteiro. Em formatos largos, uma mistura de horizonte ou um brilho radial costuma funcionar melhor que espremer o mar inteiro numa altura curta. Um post vertical fica no meio: uma mistura vertical suave de mar aberto a profundo funciona, desde que o título caia numa faixa só, e não sobre a mudança.

É aqui que uma única imagem recortada deixa você na mão: a luz acaba no lugar errado em metade dos tamanhos. Um Mark do Gradiently renderiza de novo em cada formato, e o Designer pode produzir o story, o post e o banner a partir de um só briefing, para o mar ficar certo em cada um.

Um degradê oceano em CSS para a página inteira

Uma página longa pode virar um mergulho: brilhante no topo, profunda no rodapé. Prenda o degradê à altura inteira do documento, e não da janela, dê a ele uma cor sólida de reserva e acrescente um suave brilho de superfície no topo. Degradês lineares em CSS cobre a sintaxe.

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 um degradê oceano

Uma mistura de oceano vai de muito clara a muito escura, então nenhuma cor de texto única funciona em toda ela. Marinho profundo #082f49 sobre azul-céu pálido #7dd3fc mede cerca de 8,3 para 1. Branco sobre ondulação #075985 mede cerca de 7,6 para 1, e sobre mar aberto #0284c7 cai para cerca de 4,1 para 1, bom para títulos grandes, mas insuficiente para texto corrido. Coloque as palavras onde a cor as favoreça e veja texto sobre degradês para mais técnicas.