Gradiente azul-petróleo: códigos da lagoa ao mar profundo

Um gradiente azul-petróleo corre entre tons de verde-azulado: azul-água pálido na ponta clara, um petróleo médio e límpido no meio e um verde-azulado escuro, quase tinta, em baixo. Como o azul-petróleo fica a meio caminho entre o azul e o verde, mistura-se com facilidade para qualquer dos lados e quase nunca fica sujo. Os códigos abaixo seguem-no por profundidade, de uma lagoa solarenga ao mar profundo, com notas sobre acentos, CSS e letra para cada um.

Uma escada de azul-petróleo para construir qualquer gradiente

A maioria dos bons gradientes azul-petróleo tem dois a quatro passos desta escada. Escolhe vizinhos para uma mistura suave, ou salta três degraus para dar drama. Os nomes abaixo são usados no resto do artigo.

Gradientes azul-petróleo claros: lagoa e águas rasas

O azul-petróleo claro é limpo, fresco e discretamente alegre. Serve bem-estar, piscinas e fatos de banho, clínicas dentárias e de saúde e qualquer produto que queira parecer higiénico sem a frieza do azul puro. Leva-o para o branco ou para um menta pálido para o manter suave.

Gradientes azul-petróleo médios: recife e jade

O meio da gama é o azul-petróleo no seu ponto mais confiante. Funcionam bem para apps, dashboards de fintech, marcas de sustentabilidade e educação, porque parecem ao mesmo tempo de confiança (azul) e vivos (verde). Inclinar para o esmeralda torna-o natural; inclinar para o azul torna-o técnico.

Gradientes azul-petróleo escuros: o mar profundo

Na ponta escura, o azul-petróleo fica quase preto com um sopro de verde frio. É o azul-petróleo mais sofisticado: escritórios de advogados, bebidas espirituosas, hotéis, arquitetura, eventos noturnos. Também é uma base soberba para um acento vivo, porque nada nele compete. As misturas escuras fazem banding nas exportações comprimidas, por isso um pouco de grão ajuda; vê banding em gradientes.

Acentos quentes para um gradiente azul-petróleo

O oposto do azul-petróleo no círculo cromático é um vermelho-alaranjado quente, por isso coral, pêssego, alperce e cobre fazem-no cantar. Mantém a cor quente fora da própria mistura: um gradiente do azul-petróleo ao coral passa por um cinzento baço no meio. Usa antes o acento num botão, num título ou numa pequena forma. Cores complementares explica a atração, e gradientes coral tem códigos para o outro lado.

Repara na terceira amostra: tons muito pálidos de opostos misturam-se bem, porque há pouca saturação a perder. É um truque útil para embalagens suaves e papelaria de casamento.

Escolher um gradiente azul-petróleo para a tua marca

O azul-petróleo é popular em marcas de saúde, dinheiro e sustentabilidade, por isso o tom sozinho não te distingue. O que distingue é a profundidade que escolhes, o acento com que o combinas e a superfície. Parte do trabalho que o design tem de fazer.

CSS de gradiente azul-petróleo para uma interface em modo escuro

O azul-petróleo escuro é uma bela alternativa ao preto ou ao azul-marinho numa interface escura. Parece mais suave do que o preto puro e continua a dar muito contraste ao texto pálido. Eis um fundo para a estrutura de uma app, com um brilho suave atrás do topo da página. Mais sobre a abordagem em design de modo escuro.

:root {
  --abyss: #042f2e;
  --deep-teal: #115e59;
  --lagoon: #5eead4;
}

body {
  min-height: 100vh;
  margin: 0;
  color: #f0fdfa;
  background-color: var(--abyss);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgb(20 184 166 / 0.35) 0%, transparent 70%),
    linear-gradient(180deg, var(--deep-teal) 0%, var(--abyss) 60%);
}

a { color: var(--lagoon); }

Texto legível sobre azul-petróleo

O azul-petróleo médio engana. #14b8a6 parece forte o suficiente para letra branca mas mede cerca de 2,5 para 1, uma falha clara. O branco precisa de Alga (#0f766e, cerca de 5,5 para 1) ou mais escuro. Em tudo de Água para cima, usa a cor Abismo #042f2e como tinta: mantém o texto na família do azul-petróleo e lê-se com facilidade.

Este último ponto importa mais do que parece. Um gradiente cortado de um post para um story move a luz para o sítio errado. No Gradiently, um Mark é desenhado em cada tamanho, e o Designer pode fazer os outros tamanhos por ti, para um visual azul-petróleo continuar equilibrado no feed, no story e no hero do site.