Gradiente de oceano: códigos do baixio às profundezas

Um gradiente de oceano mistura azuis e azuis-esverdeados pela mesma ordem do mar: água-marinha pálida sobre a areia, turquesa no baixio, azul limpo em mar aberto e um azul-marinho quase negro nas profundezas. Corre-o de cima para baixo, de claro a escuro, e as pessoas leem-no como profundidade sem que lho digam. Os códigos abaixo seguem esse mergulho e depois juntam 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.

Porque é que o oceano é azul, e porque isso importa para o teu gradiente

A água absorve primeiro o extremo vermelho da luz solar, depois o amarelo e o verde, por isso quanto mais fundo vais, mais só resta azul, e depois até esse se esbate. A água pouco profunda sobre areia clara reflete muita luz e parece turquesa; a água profunda parece azul-marinho escuro. Um gradiente de oceano que mantém esta ordem parece natural; um que põe azul escuro acima do turquesa parece de pernas para o ar, mesmo que ninguém saiba dizer porquê.

Gradientes de oceano de águas rasas

O extremo luminoso: a água que se vê da praia ou de um barco com tempo limpo. Solares, limpos e convidativos, servem marcas de férias, fatos de banho, empresas de piscinas e ementas de verão. O lado mais tropical está tratado em gradientes turquesa.

Gradientes de mar aberto

Mais ao largo, o mar perde o verde e torna-se de um azul limpo e confiante. Estas misturas parecem fiáveis, serenas e competentes, e é por isso que servem clubes de vela, seguradoras de viagem, ciência marinha e marcas de tecnologia que querem azul sem a frieza do azul-marinho empresarial. Gradientes azuis tem a família azul mais ampla.

Gradientes de oceano profundo

No fundo do mergulho, o mar fica quase negro com apenas um vestígio de azul. São dramáticos e calmos ao mesmo tempo: escolas de mergulho, documentários, relógios de luxo, restaurantes de marisco depois de escurecer. Um brilho ténue vindo de cima, como a luz da superfície, evita que pareçam vazios. As misturas escuras criam bandas com facilidade, por isso lê bandas num gradiente antes de exportares.

Gradientes de horizonte e de linha de costa

Os designs de oceano incluem muitas vezes o céu ou a praia. O truque para um horizonte é uma paragem dura: duas paragens de cor na mesma posição, para que o céu acabe e o mar comece numa linha limpa. Uma linha de costa funciona ao contrário, esbatendo o mar em areia através de uma paragem de espuma pálida para que as cores quentes e frias nunca se encontrem como cinzento. Paragens de cor num gradiente explica como funcionam as posições das paragens.

Escolher a direção para cada formato

Como um gradiente de oceano significa profundidade, funciona melhor na vertical, e os formatos altos mostram o mergulho completo. Em formatos largos, uma mistura de horizonte ou um brilho radial costuma funcionar melhor do que espremer o mar inteiro numa altura curta. Uma publicação vertical fica a meio caminho: uma suave mistura vertical de mar aberto a profundo funciona, desde que o título caia numa faixa e não atravesse a mudança.

É aqui que uma só imagem cortada te deixa mal: a luz acaba no sítio errado em metade dos teus tamanhos. Um Mark do Gradiently é gerado de novo em cada formato, e o Designer pode produzir o story, a publicação e o banner a partir de um só briefing, para o mar ficar bem colocado em cada um.

Um gradiente de oceano em CSS para uma página inteira

Uma página longa pode tornar-se um mergulho: brilhante no topo, profunda no rodapé. Prende o gradiente à altura total do documento e não à janela, dá-lhe um fundo sólido de reserva e junta um suave brilho de superfície no topo. Gradientes lineares em CSS trata da 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 gradiente de oceano

Uma mistura de oceano passa de muito clara a muito escura, por isso nenhuma cor de texto única funciona em toda ela. Azul-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 aquém do texto corrido. Coloca as palavras onde a cor lhes convém, e vê texto sobre gradientes para mais técnicas.