Gradiente coral: códigos vivos entre o rosa e o laranja

Um gradiente coral mistura laranjas quentes e rosados, as cores onde o rosa vira laranja. Puxe para o rosa e ele fica charmoso e fresco; puxe para a tangerina e fica ensolarado e enérgico. O coral é alegre e muito visível, o que o torna um favorito para verão, comida, beleza e fitness. Suas duas armadilhas são uma faixa cinza quando ele encontra o verde-azulado e um texto que desaparece sobre ele. As duas são fáceis de evitar quando você as conhece.

Coral, salmão, pêssego e melancia

Os laranjas quentes e rosados têm muitos nomes. Vale a pena separá-los, porque a palavra certa ajuda a escolher as paradas certas e a descrever o que você quer para um designer ou para o Designer do Gradiently.

Gradientes coral vibrantes

Este é o coral no seu ponto mais vivo. Ele prende a atenção até em tamanho de miniatura, e é por isso que funciona tão bem em posts de promoção, lançamentos, aulas de fitness e qualquer coisa que você queira que seja notada num feed cheio.

Algumas formas de usá-los: o “Coral clássico” atrás de uma única frase como “Abrimos ao meio-dia” num story de 1080×1920; o “Ponche tropical” como capa de um cardápio de drinks de verão; o “Pôr do sol coral” descendo por um pin do Pinterest de 1000×1500 para um guia de férias. O coral é forte, então deixe-o preencher o quadro e mantenha todo o resto simples: um título, um detalhe, bastante espaço.

Gradientes coral do rosa ao laranja

Coral puxando para o rosa

Leve o coral para o rosa e o blush e ele fica mais suave e romântico, ideal para beleza, floriculturas, casamentos e marcas de lifestyle. Para o lado mais rosado da família, veja gradientes rosa.

Coral puxando para o laranja

Leve para o outro lado, rumo ao damasco e à tangerina, e o coral fica mais ensolarado e barulhento: cardápios de verão, casas de smoothie, férias. Gradientes laranja e rosa cobre toda a faixa entre os dois.

Coral e verde-azulado sem o meio cinza

Coral e verde-azulado formam uma das grandes duplas: quente contra frio, recife contra mar. Mas eles ficam quase opostos no círculo cromático, então uma mistura direta entre os dois passa por um cinza apagado no meio. A solução é mantê-los separados. Use o verde-azulado como fundo com uma luz coral, o coral como fundo com um destaque verde-azulado, ou ligue os dois por tons muito claros. Gradientes lamacentos explica por que o meio fica cinza.

Num cardápio ou pôster, experimente um verde-azulado bem escuro como #042f2e com títulos e botões em coral. Ali o coral chega a cerca de 5,8 para 1, muito melhor do que branco sobre coral, e o resultado é ousado e veranil. O lado verde-azulado está em gradientes verde-azulados.

Coral sobre um fundo escuro

O coral brilha lindamente contra ameixa profundo, azul-marinho ou quase preto. Uma única luz coral sobre um fundo escuro lembra um letreiro neon ou um pôr do sol no mar, e combina com bares, música, vida noturna e eventos à noite. Mantenha a luz coral longe de onde as palavras ficam e coloque o texto em branco concha ou branco sobre a área escura.

Texto sobre um gradiente coral

O coral parece forte o bastante para texto branco, e é exatamente por isso que tantos designs em coral falham. Branco sobre #ff7f50 mede cerca de 2,5 para 1, bem abaixo dos 4,5 para 1 exigidos para texto corrido. Um marrom vinho profundo como #3b0d0c mede cerca de 6,7 para 1 sobre o mesmo coral e mantém o calor. Se você quer texto branco, aprofunde o coral até um vermelho como #e11d48, onde o branco chega a cerca de 4,7 para 1. O método está em contraste de cores e acessibilidade.

Um Mark do Gradiently faz esse ajuste sozinho: ele move sua região mais calma e de melhor contraste para trás das suas palavras, e a tinta automática escolhe texto claro ou escuro em cada linha a partir da própria paleta do Mark. Sem caixas nem sombras.

CSS de gradiente coral para um botão

O coral rende uma chamada para ação simpática. Mantenha o gradiente claro o bastante para que um rótulo escuro continue legível, e deslize a posição no hover em vez de trocar as cores. Botões com gradiente em CSS traz mais padrões.

.button-coral {
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 999px;
  color: #3b0d0c;
  font-weight: 600;
  background: linear-gradient(135deg, #ffb199 0%, #ff7f50 100%);
  background-size: 150% 150%;
  background-position: 0% 50%;
  transition: background-position 300ms ease;
}

.button-coral:hover {
  background-position: 100% 50%;
}