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

Um gradiente coral mistura laranjas quentes e rosados, as cores onde o rosa se torna laranja. Inclina-o para o rosa e parece encantador e fresco; inclina-o para a tangerina e parece solarengo e enérgico. O coral é alegre e muito visível, o que o torna favorito para o verão, a comida, a beleza e o fitness. As suas duas armadilhas são uma faixa cinzenta quando encontra o azul-petróleo e o texto que desaparece por cima. Ambas se evitam com facilidade depois de as conheceres.

Coral, salmão, pêssego e melancia

Os laranjas quentes e rosados partilham muitos nomes. Vale a pena separá-los, porque a palavra certa ajuda-te a escolher as paragens certas e a descrever o que queres a um designer ou ao Designer do Gradiently.

Gradientes coral vivos

Aqui está o coral no seu auge. Prendem a atenção em tamanho de miniatura, e por isso funcionam tão bem em publicações de saldos, lançamentos, aulas de fitness e tudo o que queiras que se note num feed cheio.

Algumas formas de os usar: o “Coral clássico” por trás de uma só frase como “Abrimos ao meio-dia” num story de 1080×1920; o “Ponche tropical” como capa de uma ementa de bebidas de verão; o “Pôr do sol coral” a descer num pin do Pinterest de 1000×1500 para um guia de férias. O coral é forte, por isso deixa-o encher o enquadramento e mantém tudo o resto na página simples: um título, um pormenor, muito espaço.

Gradientes coral do rosa ao laranja

Coral que puxa ao rosa

Empurra o coral para o rosa e o rubor e torna-se mais suave e romântico, ideal para beleza, floristas, casamentos e marcas de estilo de vida. Para o lado mais rosado da família, vê os gradientes rosa.

Coral que puxa ao laranja

Empurra-o para o outro lado, para o alperce e a tangerina, e o coral fica mais solarengo e mais forte: ementas de verão, bares de batidos, férias. Os gradientes laranja e rosa cobrem todo o intervalo entre os dois.

Coral e azul-petróleo sem o meio cinzento

Coral e azul-petróleo são um dos grandes pares: quente contra frio, recife contra mar. Mas ficam quase opostos na roda de cores, por isso uma mistura direta entre eles passa por um cinzento baço no meio. A solução é mantê-los separados. Usa o azul-petróleo como fundo com uma luz coral, o coral como fundo com um destaque azul-petróleo, ou faz a passagem por tons muito pálidos. Os gradientes lamacentos explicam porque o meio fica cinzento.

Numa ementa ou cartaz, experimenta um azul-petróleo muito escuro como #042f2e com títulos e botões em coral. O coral chega aí a cerca de 5,8 para 1, muito melhor do que o branco sobre coral, e tem um ar arrojado e de verão. O lado azul-petróleo está tratado nos gradientes azul-petróleo.

Coral sobre fundo escuro

O coral brilha de forma linda contra ameixa profunda, azul-marinho ou quase preto. Uma só luz coral sobre fundo escuro parece um néon ou um pôr do sol sobre o mar, e combina com bares, música, vida noturna e eventos ao fim do dia. Mantém a luz coral longe de onde ficam as palavras e escreve-as em concha pálido ou branco na zona escura.

Texto sobre um gradiente coral

O coral parece forte o bastante para letra branca, e é exatamente por isso que tantos designs em coral falham. O branco sobre #ff7f50 mede cerca de 2,5 para 1, muito abaixo dos 4,5 para 1 pedidos em texto corrido. Um castanho-bordô profundo como #3b0d0c mede cerca de 6,7 para 1 sobre o mesmo coral e mantém o calor. Se queres letra branca, aprofunda o coral para um vermelho como #e11d48, onde o branco chega a cerca de 4,7 para 1. O método está em contraste de cor e acessibilidade.

Um Mark do Gradiently faz este ajuste sozinho: move a sua região mais calma e de melhor contraste para trás das tuas palavras e a tinta automática escolhe letra clara ou escura para cada linha a partir da paleta do próprio Mark. Sem caixas nem sombras.

CSS de gradiente coral para um botão

O coral dá um apelo à ação simpático. Mantém o gradiente claro o bastante para que uma etiqueta escura continue legível e desliza a sua posição ao passar o rato em vez de trocar de cor. Os botões com gradiente em CSS têm 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%;
}