A versão curta
- O significado da cor azul-petróleo junta a calma, a clareza e a confiança do azul à renovação, saúde e equilíbrio do verde.
- Em inglês, a cor chama-se teal por causa da marrequinha (common teal), um pato pequeno cujos machos têm uma mancha verde iridescente à volta do olho.
- A cor CSS com nome teal é #008080, um verde-azulado médio feito de partes iguais de verde e azul, sem vermelho.
- As marcas escolhem o azul-petróleo porque inspira confiança como o azul, mas destaca-se das muitas marcas que já usam azul.
- O laranja e o coral são os complementares naturais do azul-petróleo, e por isso a combinação de azul-petróleo e laranja é tão comum no cinema e no design.
Nesta página
O significado da cor azul-petróleo é calma com pulsação: junta a confiança, a clareza e a serenidade do azul à renovação, saúde e equilíbrio do verde. O azul-petróleo parece fresco mas sério, ponderado mas não frio. Também foge à multidão. Uma marca que quer a segurança do azul sem parecer igual a todos os bancos e empresas de software encontra no azul-petróleo uma resposta pronta, o que explica em boa parte porque aparece na saúde, nas finanças, no bem-estar e na tecnologia.
De onde vem o azul-petróleo
Em inglês, a cor deve o nome à marrequinha (common teal), um pequeno pato de superfície cujos machos têm uma larga faixa de verde iridescente do olho para trás. A palavra passou a ser usada como nome de cor em inglês no início do século XX. Nos ecrãs, o azul-petróleo significa quantidades iguais de luz verde e azul e nenhum vermelho; a palavra-chave CSS teal é exatamente isso.
:root {
/* The CSS named colour */
--teal: teal; /* #008080, rgb(0 128 128) */
/* A practical brand scale */
--teal-100: #ccfbf1;
--teal-300: #5eead4;
--teal-500: #14b8a6;
--teal-700: #0f766e;
--teal-900: #134e4a;
}teal e uma escala de cinco passos que podes colar numa folha de estilos. O passo 700 leva texto branco com conforto.Psicologia da cor azul-petróleo
A maior parte das associações do azul-petróleo vem da água e da natureza: o mar tropical pouco fundo, as lagoas, as piscinas minerais e a pátina do cobre antigo. Essas imagens fazem-no parecer limpo, fresco, reconfortante e um pouco precioso. Como todos os significados das cores, são associações aprendidas e não regras, e a psicologia das cores explica porque o contexto as altera.
Do verde
Do próprio azul-petróleo
Do próprio azul-petróleo
Do verde
Do próprio azul-petróleo
Do verde
Do próprio azul-petróleo
Tons de azul-petróleo e o que cada um diz
- Espuma do mar e petróleo água: frescura, spa, verão, simpatia.
- Petróleo vivo: energia e otimismo com um toque técnico; bom para apps e dashboards.
- Petróleo profundo e escuro: confiança, profundidade e luxo; uma forte alternativa ao azul-marinho.
- Petróleo empoeirado: calma, vintage e feito à mão; funciona para artigos de casa, cerâmica e cafés.
Porque as marcas adoram o azul-petróleo
O azul-petróleo resolve um problema comum de branding. O azul é a escolha segura para tudo o que envolve dinheiro, saúde ou dados, por isso muitos concorrentes já o usam. O azul-petróleo mantém grande parte da credibilidade do azul e acrescenta uma sensação de cuidado e frescura, que é exatamente o tom que uma clínica, uma app de reformas ou um serviço de bem-estar querem. Também está livre da forte codificação de género que o rosa e alguns azuis trazem.
Há sítios onde o azul-petróleo é menos adequado. Se toda a tua categoria já pende para o azul-petróleo, como acontece em alguns mercados de bem-estar e dentários, deixa de ser distintivo e precisas de um segundo elemento de assinatura. Um azul-petróleo muito vivo também pode parecer jovem e tecnológico, o que pode destoar num escritório de advogados tradicional ou numa agência funerária. Nesses casos, um tom empoeirado ou muito escuro mantém a calma sem o ar de startup. Como escolher as cores da marca tem um método mais completo.
Azul-petróleo para uma clínica: calmo, limpo e de confiança, sem o frio do azul de hospital.
Um azul-petróleo escuro para uma app de dinheiro: credível como um banco, mas mais quente e moderno.
Como construir uma marca à volta do azul-petróleo
- 1
Decide quão claro ou escuro
Os azuis-petróleo claros parecem abertos e simpáticos; os escuros parecem estabelecidos. Escolhe um azul-petróleo principal e anota o hex, para todos os ficheiros usarem exatamente a mesma cor.
- 2
Dá-lhe uma cor de texto
Verifica que tinta se lê no teu azul-petróleo principal. Os azuis-petróleo vivos pedem letra quase preta; os escuros aceitam branco.
- 3
Junta um acento quente
Um coral, laranja ou dourado em pequenas doses evita que a paleta pareça clínica. Guarda-o para botões, preços ou uma só forma.
- 4
Testa-o cedo em impressão
Os azuis-petróleo muito vivos no ecrã podem imprimir-se visivelmente mais baços. Pede uma prova antes de encomendares embalagens ou sinalética; RGB vs CMYK explica porquê.
- 5
Leva-o para os fundos
Os posts e slides são onde as pessoas mais veem uma marca. Um fundo azul-petróleo coerente nesses suportes faz mais pelo reconhecimento do que o logótipo sozinho.
Cores que combinam com azul-petróleo
O complementar do azul-petróleo está na gama do laranja e do coral, por isso os acentos quentes fazem-no brilhar. Essa oposição está também por trás da conhecida gradação de cor de azul-petróleo e laranja no cinema, onde sombras frias realçam a pele quente. Para paletas mais calmas, mantém o azul-petróleo com os seus vizinhos, azul-marinho e verde-salva, como em cores análogas.
Evitar
- Texto branco em azul-petróleo vivo
#14b8a6: cerca de 2,5:1 - Texto branco em
#0d9488: cerca de 3,7:1, ainda abaixo de 4,5:1 - Azul-petróleo direto para vermelho, que fica sujo a meio
Fazer
- Texto quase preto em azul-petróleo vivo, cerca de 8:1
- Texto branco em azul-petróleo escuro
#0f766e, cerca de 5,5:1 - Misturar o azul-petróleo através de azul-marinho ou verde, não atravessando o círculo
Verifica os teus pares com o método de contraste de cor e acessibilidade e vê gradientes turquesa se quiseres uma versão mais viva e solar da mesma família. Quando quiseres um visual azul-petróleo só teu, procura no Mercado do Gradiently por “deep teal”: cada Mark tem um dono de cada vez e mantém o teu texto legível enquanto se move.
Perguntas frequentes
O que significa a cor azul-petróleo?
O azul-petróleo significa calma, clareza e confiança do azul, juntamente com a renovação, a saúde e o equilíbrio do verde. Parece fresco e moderno, mas continua sério.
Qual é o código hex do azul-petróleo?
A cor CSS com nome teal é #008080. As marcas usam muitas vezes versões mais claras ou mais escuras, como #14b8a6 ou #0f766e.
O azul-petróleo é azul ou verde?
Os dois. É um verde-azulado, feito no ecrã com partes iguais de luz verde e azul e sem vermelho.
Que cor combina melhor com azul-petróleo?
O laranja e o coral são os seus complementares e fazem-no brilhar. Azul-marinho, verde-salva, creme e dourado dão combinações mais calmas e elegantes.
O que simboliza o azul-petróleo escuro?
O azul-petróleo escuro sugere profundidade, confiança e luxo discreto. Muitas marcas usam-no como alternativa mais quente e distintiva ao azul-marinho.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil