Gradiente turquesa: códigos tropicais com profundidade

Um gradiente turquesa mistura azuis vivos e esverdeados, e os que parecem verdadeiramente tropicais têm três coisas: um realce pálido onde bate a luz, um corpo turquesa claro e um azul mais profundo por baixo. Sem esse alcance, o turquesa parece plano e sintético. Abaixo ficam códigos para lagoas vivas, turquesa com profundidade a sério e turquesa junto a areia quente, seguidos do CSS e das cores de letra que mantêm tudo legível.

Turquesa, teal, ciano e água-marinha comparados

Estas quatro cores usam-se muitas vezes como sinónimos, mas são diferentes, e escolher a certa muda o ambiente. O turquesa é a mais viva e a mais de férias do grupo.

Se a tua marca quer calma e seriedade, provavelmente queres antes gradientes teal. Se quer férias, energia e calor, fica por aqui.

Gradientes turquesa tropicais e vivos

São as misturas de postal: água pouco funda sobre areia branca. Cada uma inclui um tom pálido para que o turquesa tenha algo contra o qual brilhar, e nenhuma resvala para o cinzento.

Como dar profundidade a um gradiente turquesa

A água tropical verdadeira nunca tem uma só cor. É pálida sobre a areia, turquesa sobre o recife pouco fundo e azul profundo onde o fundo desaparece. Copia essa estrutura e o teu gradiente deixa de parecer um preenchimento plano.

1. 1

   Escolhe um fundo

   Escolhe um azul profundo para a parte mais escura, como #0c4a6e ou #083344. Ancora o turquesa e dá-lhe algo contra o qual brilhar.

2. 2

   Define o corpo

   Usa o teu turquesa, entre #2dd4bf e #40e0d0, na maior área, normalmente o meio ou o topo.

3. 3

   Acrescenta um realce

   Põe um tom pequeno, quase branco, como #ecfeff, onde a luz bateria. Um gradiente radial num canto funciona bem.

4. 4

   Aquece uma margem

   Se quiseres, passa uma cor de areia ao longo da base ou de um canto, para que a mistura fria tenha uma margem quente.

5. 5

   Acaba a superfície

   Junta um grão leve para que as cores vivas não façam bandas quando a plataforma comprimir a imagem. Os gradientes granulados têm o método.

Gradientes turquesa e areia

O parceiro mais natural do turquesa é a própria praia: areia quente, coral e branco. Estas cores ficam do lado oposto do círculo cromático, por isso mistura-as apenas onde a saturação é baixa, através de tons pálidos, ou mantém-nas como áreas separadas. Assim tens uma linha de costa e não uma mancha cinzenta. As paletas de cores de verão têm mais combinações de férias.

Onde um gradiente turquesa funciona melhor

O turquesa é forte, por isso merece o seu lugar onde as pessoas já esperam férias, água ou diversão. Alguns usos em que supera qualquer outra cor:

• Viagens e hotéis: um story de 1080×1920 com «Queda no fundo» atrás de uma só linha como «Três noites em Lisboa».
• Escolas de natação e piscinas: um fundo pálido «Água rasa» para horários, com letra azul-marinho escura.
• Bares de batidos e marcas de sumos: «Lagoa» com um autocolante de preço coral, que se destaca por estar do lado oposto ao turquesa.
• Ementas de verão e cartazes de festival: «Linha de costa» num cartaz A4, o mar no topo e a areia onde vão os detalhes.
• Joalharia: o turquesa é também uma pedra, por isso um «Luz através da água» profundo atrás de fotografias de produto em prata ou ouro parece certo.

Evita-o em tudo o que precise de parecer calmo ou formal. Um escritório de advogados ou uma agência funerária ficam mais bem servidos com teal ou azul-marinho.

CSS de gradiente turquesa com luz

Sobrepor dois realces radiais a uma base linear dá a impressão de luz do sol através da água. É leve de renderizar e não precisa de imagem. A sintaxe está explicada nos gradientes radiais em CSS.

.section-tropical {
  background-color: #0891b2; /* fallback */
  background-image:
    radial-gradient(circle at 20% 15%, rgb(236 254 255 / 0.9) 0%, transparent 30%),
    radial-gradient(circle at 80% 40%, rgb(64 224 208 / 0.8) 0%, transparent 45%),
    linear-gradient(180deg, #5eead4 0%, #0891b2 60%, #083344 100%);
  color: #083344;
}

Texto sobre um gradiente turquesa

O turquesa é muito mais claro do que parece. O branco sobre #40e0d0 mede cerca de 1,6 para 1, o que ninguém consegue ler com conforto ao sol num telemóvel. A água profunda #083344 sobre o mesmo turquesa mede cerca de 8 para 1. Usa letra azul-marinho escura nas áreas vivas e só passa ao branco onde o gradiente já desceu a um azul profundo. Para as regras completas, vê contraste de cor e acessibilidade.

É exatamente o que um Mark do Gradiently faz sozinho: a sua região mais calma move-se para trás das palavras e a tinta automática escolhe letra clara ou escura por linha a partir das cores do próprio Mark. As equipas de viagens e hotelaria que publicam todos os dias encontram mais ideias nas redes sociais para agências de viagens.