Gradiente laranja: 25 códigos quentes do pêssego ao queimado

Um gradiente laranja mistura dois ou mais laranjas, muitas vezes com um amarelo, vermelho ou rosa vizinho, e poucas misturas parecem mais quentes. As versões de pêssego claro e alperce parecem suaves e acolhedoras, a tangerina viva parece ruidosa e brincalhona, e o laranja queimado ou ferrugem parece terroso e adulto. Abaixo estão 25 códigos agrupados por esses ambientes, seguidos do que lhes combinar e de como compor texto sobre eles sem perder as palavras.

Gradientes laranja suaves: pêssego e alperce

Os laranjas pálidos são a forma mais simpática de entrar na cor. Ficam perto da pele, do pão e da luz do fim da tarde, e é por isso que as padarias, os cuidados de pele e as marcas infantis se apoiam neles. Mantém a paragem mais clara quase creme, para a mistura ter um sítio calmo onde descansar. Para um artigo inteiro sobre o extremo mais pálido, vê gradientes pêssego.

Gradientes laranja vivos: tangerina e citrinos

O laranja saturado é pura energia. Serve promoções, entrega de comida, desporto, festivais e tudo o que tem de ser notado em tamanho de miniatura. O risco é o laranja vivo achatar-se num único bloco ruidoso, por isso dá-lhe uma paragem mais clara para o amarelo ou uma mais profunda para o vermelho. Essa pequena mudança é o que o faz parecer luz e não tinta.

Gradientes laranja de pôr do sol e âmbar

Correr o laranja na vertical, do dourado no topo ao vermelho ou ameixa em baixo, dá um pôr do sol, provavelmente o gradiente mais familiar que existe. As misturas âmbar são o primo mais calado: tons de mel, doce de laranja e uísque que parecem ricos sem gritar. Se queres o tratamento completo do céu, gradientes de pôr do sol vai mais longe.

Gradientes laranja queimado e ferrugem

Empurra o laranja para o castanho e torna-se terracota, ferrugem e cobre: cores de potes de barro, folhas de outono e couro velho. Parecem artesanais e ponderadas, por isso servem interiores, café, cerâmica, marcas de exterior e tudo o que tenha uma história feita à mão. Também suportam muito melhor o texto branco do que o laranja vivo.

Luz laranja sobre fundo escuro

A forma mais premium de usar o laranja é com parcimónia. Parte de um quase preto, de um castanho profundo ou de um azul-marinho e deixa um laranja brilhar de um canto como uma brasa ou um candeeiro de rua. É o tratamento para eventos noturnos, restaurantes, música e tudo o que deva parecer quente depois de escurecer. As misturas escuras criam bandas com facilidade, por isso lê fundos de gradiente escuros antes de exportares.

Cores que combinam com um gradiente laranja

O laranja tem dois tipos de bons parceiros. Os vizinhos como o amarelo, o rosa e o vermelho misturam-se diretamente com ele. Os opostos como o azul profundo e o azul-petróleo fazem-no vibrar, mas devem ficar ao lado do laranja como destaque, não dentro da mesma mistura, porque o ponto médio entre eles fica cinzento. Gradientes turvos explica porquê, e cores complementares mostra como usar a atração em segurança.

Texto sobre gradientes laranja

É aqui que a maioria dos designs laranja falha. O branco sobre tangerina viva parece ousado mas tem uma razão de contraste de cerca de 2,8 para 1, bem abaixo dos 4,5 para 1 que as WCAG pedem para texto corrido. O quase preto sobre o mesmo laranja pontua acima de 6 para 1. A regra é simples: texto escuro sobre laranjas claros e vivos, texto branco só do laranja queimado para baixo. O método completo está em contraste de cor e acessibilidade.

O Gradiently trata desta parte por ti. Um Mark sabe onde estão as palavras: move a sua zona mais calma para trás delas e a tinta automática escolhe texto claro ou escuro linha a linha a partir da paleta do próprio Mark, por isso um design laranja continua legível em todos os tamanhos sem caixas nem sombras.

CSS de gradiente laranja

Cada código acima é um único valor CSS que podes colar em background. Para uma secção que precisa de calor e profundidade, sobrepõe uma luz radial a uma base linear e define sempre uma cor sólida de reserva. Lê gradientes lineares em CSS para a sintaxe completa.

.hero {
  background-color: #9a3412; /* fallback */
  background-image:
    radial-gradient(circle at 78% 22%, #fdba74 0%, transparent 40%),
    linear-gradient(160deg, #f97316 0%, #c2410c 55%, #7c2d12 100%);
  color: #ffffff; /* safe here: the words sit on the darker lower half */
}

Se queres um visual laranja que mais ninguém esteja a publicar, explora o Mercado por Marks quentes: procura palavras como “laranja queimado” ou “alperce”, desenha de graça com qualquer um por reivindicar e reivindica-o se se tornar a tua marca.