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

Um degradê azul-petróleo corre entre tons azul-esverdeados: aqua claro na ponta clara, um petróleo limpo no meio e um azul-esverdeado escuro, quase tinta, na base. Como o azul-petróleo fica a meio caminho entre o azul e o verde, ele se mistura com facilidade para qualquer lado e quase nunca fica barrento. Os códigos abaixo o acompanham por profundidade, de uma lagoa ensolarada ao mar profundo, com notas sobre destaques, CSS e texto para cada uma.

Uma escada de azul-petróleo para montar qualquer degradê

A maioria dos bons degradês azul-petróleo usa de dois a quatro degraus desta escada. Escolha vizinhos para uma mistura suave ou pule três degraus para dar drama. Os nomes abaixo são usados no resto do artigo.

Degradês de azul-petróleo claro: lagoa e águas rasas

O azul-petróleo claro é limpo, fresco e discretamente alegre. Combina com bem-estar, piscinas e moda praia, clínicas odontológicas e de saúde e qualquer produto que queira parecer higiênico sem a frieza do azul puro. Leve-o em direção ao branco ou a um menta claro para mantê-lo suave.

Degradês de azul-petróleo médio: recife e jade

O meio da faixa é o azul-petróleo no seu momento mais confiante. Funcionam bem para apps, painéis de fintech, marcas de sustentabilidade e educação, porque parecem ao mesmo tempo confiáveis (azul) e vivos (verde). Inclinar-se para o esmeralda o deixa natural; inclinar-se para o azul o deixa técnico.

Degradês de azul-petróleo escuro: o mar profundo

Na ponta escura, o azul-petróleo vira quase preto, com um sopro verde frio. É o azul-petróleo mais sofisticado: escritórios de advocacia, destilados, hotéis, arquitetura, eventos noturnos. Também dá um fundo excelente para um único destaque vivo, porque nada nele compete. Misturas escuras formam faixas em exportações comprimidas, então um pouco de granulado ajuda; veja faixas em degradês.

Destaques quentes para um degradê azul-petróleo

O oposto do azul-petróleo no círculo cromático é um vermelho-alaranjado quente, então coral, pêssego, damasco e cobre o fazem cantar. Mantenha a cor quente fora da mistura em si: um degradê do azul-petróleo ao coral passa por um cinza sem graça no meio. Use o destaque num botão, num título ou numa pequena forma. Cores complementares explica a atração, e degradês de coral traz códigos para o outro lado.

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

Como escolher um degradê azul-petróleo para a sua marca

O azul-petróleo é popular entre marcas de saúde, dinheiro e sustentabilidade, então o tom sozinho não vai diferenciar você. O que diferencia é a profundidade que você escolhe, o destaque com que o combina e a superfície. Parta do trabalho que o design precisa fazer.

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

O azul-petróleo profundo é uma bela alternativa ao preto ou ao azul-marinho numa interface escura. Parece mais suave que o preto puro e ainda dá ao texto claro muito contraste. Aqui está um fundo para a estrutura de um 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. O #14b8a6 parece forte o bastante para texto branco, mas mede cerca de 2,5 para 1, uma reprovação clara. O branco precisa de Alga (#0f766e, cerca de 5,5 para 1) ou mais escuro. Em qualquer coisa do Aqua para cima, use a cor Abismo #042f2e como tinta: ela mantém o texto na família do azul-petróleo e se lê com facilidade.

Esse último ponto importa mais do que parece. Um degradê recortado de um post para um story leva a luz para o lugar errado. No Gradiently, um Mark é renderizado em todos os tamanhos, e o Designer pode criar os outros tamanhos para você, então um visual azul-petróleo continua equilibrado no feed, no story e na imagem principal do site.