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

Um degradê laranja mistura dois ou mais laranjas, muitas vezes com um amarelo, vermelho ou rosa vizinho, e poucas misturas parecem mais quentes. As versões pêssego e damasco claras parecem suaves e acolhedoras, a tangerina viva parece alta e brincalhona, e o laranja queimado ou a ferrugem parecem terrosos e adultos. Abaixo estão 25 códigos agrupados por esses climas, seguidos do que combinar com eles e de como compor texto sobre eles sem perder suas palavras.

Degradês laranja suaves: pêssego e damasco

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 de tarde, e por isso padarias, cuidados com a pele e marcas infantis se apoiam neles. Mantenha a parada mais clara quase creme, para a mistura ter onde descansar. Para um artigo inteiro sobre a ponta mais pálida, veja degradês pêssego.

Degradês laranja vivos: tangerina e cítrico

O laranja saturado é pura energia. Combina com promoções, delivery de comida, esporte, festivais e tudo que precisa ser notado no tamanho de miniatura. O risco é que o laranja vivo se achate num único bloco barulhento, então dê a ele uma parada mais clara em direção ao amarelo ou uma mais escura em direção ao vermelho. Essa pequena mudança é o que o faz parecer luz e não tinta.

Degradês laranja de pôr do sol e âmbar

Aplicar o laranja na vertical, do dourado no topo ao vermelho ou ameixa embaixo, dá um pôr do sol, provavelmente o degradê mais familiar que existe. As misturas âmbar são a prima mais quieta: tons de mel, geleia de laranja e uísque que parecem ricos sem gritar. Se você quer o tratamento completo do céu, degradês de pôr do sol vai mais longe.

Degradês laranja queimado e ferrugem

Empurre o laranja para o marrom e ele vira terracota, ferrugem e cobre: cores de vasos de barro, folhas de outono e couro velho. Parecem artesanais e pensados, então combinam com interiores, café, cerâmica, marcas outdoor e tudo com uma história feita à mão. Também sustentam texto branco muito melhor que o laranja vivo.

Luz laranja sobre fundo escuro

A forma mais premium de usar o laranja é com moderação. Parta de um quase preto, um marrom profundo ou um marinho e deixe um laranja brilhar num canto, como uma brasa ou um poste de luz. É o tratamento para eventos noturnos, restaurantes, música e tudo que deve parecer quente depois de escurecer. Misturas escuras formam faixas com facilidade, então leia fundos degradê escuros antes de exportar.

Cores que combinam com um degradê laranja

O laranja tem dois tipos de bons parceiros. Vizinhos como amarelo, rosa e vermelho se misturam direto a ele. Opostos como azul profundo e azul-petróleo o fazem vibrar, mas devem ficar ao lado do laranja como acento, não dentro da mesma mistura, porque o ponto médio entre eles vira cinza. Degradês barrentos explica por quê, e cores complementares mostra como usar essa atração com segurança.

Texto sobre degradês laranja

É aqui que a maioria dos designs laranja falha. 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 a WCAG pede para texto corrido. Quase preto sobre o mesmo laranja marca mais 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 cores e acessibilidade.

O Gradiently cuida dessa parte para você. Um Mark sabe onde estão as palavras: move sua região 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, então um design laranja continua legível em todos os tamanhos, sem caixas nem sombras.

CSS de degradê laranja

Todo código acima é um único valor CSS que você pode colar em background. Para uma seção que precisa de calor e profundidade, sobreponha uma luz radial a uma base linear e sempre defina uma cor sólida de reserva. Leia degradês 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 você quer um visual laranja que ninguém mais esteja publicando, navegue pelo Mercado atrás de Marks quentes: busque palavras como “laranja queimado” ou “damasco”, crie de graça com qualquer um ainda não reservado e reserve-o se virar a sua marca.