Gradiente turquesa: códigos tropicais com profundidade

Um gradiente turquesa mistura azuis vivos e esverdeados, e os que parecem de fato tropicais têm três coisas: um realce claro onde a luz bate, um corpo turquesa nítido e um azul mais profundo por baixo. Sem essa amplitude, o turquesa fica chapado e sintético. Abaixo estão códigos para lagoas vivas, turquesa com profundidade de verdade e turquesa ao lado de areia quente, seguidos do CSS e das cores de texto que mantêm tudo legível.

Turquesa, teal, ciano e aqua comparados

Esses quatro costumam ser usados como sinônimos, mas são cores diferentes, e escolher a certa muda o clima. O turquesa é o mais vivo e o mais de férias do grupo.

Se a sua marca quer calma e seriedade, provavelmente você quer gradientes teal. Se quer férias, energia e calor, fique por aqui.

Gradientes turquesa tropicais e vivos

São as misturas de cartão-postal: água rasa sobre areia branca. Cada uma inclui um tom claro para o turquesa ter contra o que brilhar, e nenhuma escorrega para o cinza.

Como dar profundidade a um gradiente turquesa

A água tropical de verdade nunca tem uma cor só. Ela é pálida sobre a areia, turquesa sobre o recife raso e azul profundo onde o fundo despenca. Copie essa estrutura e seu gradiente deixa de parecer um preenchimento chapado.

1. 1

   Escolha um fundo

   Escolha um azul profundo para a parte mais escura, como #0c4a6e ou #083344. Ele ancora o turquesa e dá a ele algo contra o que brilhar.

2. 2

   Defina o corpo

   Use seu turquesa, entre #2dd4bf e #40e0d0, na maior área, em geral no meio ou no topo.

3. 3

   Adicione um realce

   Coloque um tom pequeno, quase branco, como #ecfeff, onde a luz bateria. Um gradiente radial em um canto funciona bem.

4. 4

   Aqueça uma borda

   Se quiser, passe um tom de areia pela base ou por um canto, para que a mistura fria tenha uma praia quente.

5. 5

   Finalize a superfície

   Some um grão leve para que as cores vivas não formem faixas quando a plataforma comprimir a imagem. Gradientes granulados traz o método.

Gradientes turquesa e areia

O parceiro mais natural do turquesa é a própria praia: areia quente, coral e branco. Essas cores ficam do lado oposto do turquesa no círculo cromático, então misture-as só onde a saturação é baixa, por tons claros, ou mantenha-as em áreas separadas. Assim você ganha uma linha de costa e não uma mancha cinza. Paletas de cores de verão traz mais combinações de férias.

Onde um gradiente turquesa funciona melhor

O turquesa é chamativo, então ganha seu lugar onde as pessoas já esperam férias, água ou diversão. Alguns usos em que ele vence qualquer outra cor:

• Viagens e hotéis: um story de 1080×1920 com “Queda do recife” atrás de uma única linha como “Três noites em Lisboa”.
• Escolas de natação e piscinas: um fundo claro “Água rasa” para grades de horários, com texto azul-marinho profundo.
• Smoothies e marcas de suco: “Lagoa” com um adesivo de preço coral, que se destaca porque fica oposto ao turquesa.
• Cardápios de verão e pôsteres de festival: “Linha da costa” em um pôster A4, o mar no topo e a areia onde vão os detalhes.
• Joias: o turquesa também é uma pedra, então um “Luz através da água” profundo atrás de fotos de produto em prata ou ouro cai bem.

Evite-o para o que precisa parecer silencioso ou formal. Um escritório de advocacia ou uma funerária será mais bem servido por 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 para renderizar e não precisa de imagem. A sintaxe está explicada em 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 é bem mais claro do que parece. Branco sobre #40e0d0 mede cerca de 1,6 para 1, o que ninguém lê com conforto ao sol no celular. A água profunda #083344 sobre o mesmo turquesa mede cerca de 8 para 1. Use texto azul-marinho escuro nas áreas vivas e só passe para o branco onde o gradiente já caiu para um azul profundo. Para as regras completas, veja contraste de cor e acessibilidade.

É exatamente o que um Mark do Gradiently faz sozinho: sua região mais calma se move para trás das palavras e a tinta automática escolhe texto claro ou escuro por linha a partir das cores do próprio Mark. Equipes de viagem e hospitalidade que publicam todo dia encontram mais ideias em redes sociais para agências de viagem.