# Degradês laranja e rosa: códigos quentes além do pôr do sol [Canonical HTML page](https://gradiently.design/pt-br/guide/orange-pink-gradient) Laranja e rosa são vizinhos, o que faz deles uma das misturas mais quentes e fáceis que existem. O desafio não é misturá-los; é não parecer com todo preset de pôr do sol. ## The short version - Um degradê laranja e rosa mistura matizes quentes vizinhos, como tangerina #f97316, coral #fb7185 e rosa #ec4899, então a transição fica viva sem uma cor de ponte. - O par é tão associado a pores do sol que uma diagonal simples de laranja para rosa parece um preset, e mudar o fundo ou a luminosidade evita isso. - O laranja vivo e o rosa choque são claros demais para texto branco pequeno, enquanto uma tinta ferrugem profunda ou marrom queimado se lê bem nas versões mais suaves. - Versões terrosas com terracota e rosa empoeirado parecem calmas e adultas, e versões escuras com brasa e framboesa parecem quentes e noturnas. - Laranja e rosa combinam com comida, bebida, beleza, campanhas de verão, viagens e qualquer marca que queira parecer quente e acolhedora. Um **degradê laranja e rosa** mistura dois vizinhos quentes: tangerina como `#f97316` ou pêssego como `#fed7aa` de um lado, rosa como `#ec4899` ou rosado como `#fda4af` do outro, em geral com coral no meio. Como os matizes ficam lado a lado, a mistura nunca fica barrenta. O que ela pode virar é previsível, porque a combinação é atalho para pôr do sol. Os códigos abaixo são agrupados por clima, do pêssego suave à brasa escura, para você escolher uma versão que pareça sua e não um papel de parede de celular. ## Cores entre o laranja e o rosa Caminhe do laranja ao rosa e você passa por coral, salmão e melancia, todas saturadas e quentes. Clareie o caminho e surgem damasco, pêssego e rosado. Escureça-o e surgem ferrugem, terracota e framboesa. A maioria dos bons degradês laranja e rosa usa três paradas da mesma faixa de luminosidade, em vez de um salto do pêssego pálido ao rosa choque. - Creme: #fff7ed - Pêssego: #fed7aa - Rosado: #fda4af - Damasco: #fb923c - Coral: #fb7185 - Tangerina: #f97316 - Rosa choque: #ec4899 - Ferrugem: #9a3412 - Sombra queimada: #431407 A faixa do laranja ao rosa, com um creme e dois marrons escuros para fundos e texto. ## Degradês suaves de pêssego e rosado Laranja e rosa pálidos juntos parecem pele, linho e luz do início da manhã. Isso os torna ideais para cuidados com a pele, noivas, bem-estar e padarias. Também fotografam bem atrás de produtos, porque valorizam tons quentes. Componha o texto em ferrugem profundo em vez de preto; isso mantém o calor. - Linho pêssego: `linear-gradient(135deg, #fff7ed 0%, #fed7aa 50%, #fecdd3 100%)` - Damasco rosado: `radial-gradient(circle at 70% 30%, #ffe4e6 0%, #fed7aa 60%, #fdba74 100%)` - Primeira luz: `linear-gradient(180deg, #fde68a 0%, #fecaca 55%, #fbcfe8 100%)` Laranja e rosa suaves. Tinta ferrugem ou sombra queimada se lê bem nos três. [Degradês pêssego](https://gradiently.design/pt-br/guide/peach-gradient) tem mais dessa família. ## Degradês coral, toranja e melancia Laranja e rosa saturados são puro verão: suco de toranja, toalhas de praia, cartazes de festival. São altos o bastante para parar uma rolagem e simpáticos o bastante para não parecerem agressivos. Mantenha-os longe de texto bem pequeno e dê a eles um canto calmo. - Tangerina para rosa: `linear-gradient(135deg, #f97316 0%, #fb7185 50%, #ec4899 100%)` - Toranja: `radial-gradient(circle at 25% 75%, #fdba74 0%, #fb7185 45%, #e11d48 100%)` - Melancia: `linear-gradient(160deg, #fb923c 0%, #f43f5e 70%, #be185d 100%)` - Smoothie de manga: `linear-gradient(90deg, #fbbf24 0%, #fb923c 35%, #f472b6 100%)` Degradês vivos de laranja e rosa. Cada parada é vizinha próxima da seguinte, então o meio continua vívido. [Degradês coral](https://gradiently.design/pt-br/guide/coral-gradient) vai mais fundo. ## Terracota terrosa e rosa empoeirado Atenue as duas cores e o par fica calmo e firme, a paleta de vasos de barro, flores secas e paredes aquecidas pelo sol. É a versão mais subutilizada e muitas vezes a mais elegante. Combina com oliva, areia e creme, e funciona bem ao lado de [paletas de tons terrosos](https://gradiently.design/pt-br/guide/earth-tone-colors). - Argila e rosa: `linear-gradient(135deg, #f5e6d8 0%, #d9967a 55%, #c27c7c 100%)` - Entardecer terracota: `radial-gradient(circle at 80% 20%, #e8a598 0%, #b4644a 50%, #6b2f22 100%)` - Pétalas secas: `linear-gradient(180deg, #faf3ec 0%, #e7b9a8 50%, #b97a6f 100%)` Laranja e rosa atenuados. Parecem feitos à mão e calmos, e combinam com interiores, cerâmica, floristas e marcas de slow living. > **Atrás de fotos de produto** Misturas quentes e atenuadas valorizam pele, madeira, pão e cerâmica porque ecoam essas cores. Escolha uma parada do próprio produto e construa o degradê a partir dela. [Fundos para fotos de produto](https://gradiently.design/pt-br/guide/product-photo-backgrounds) mostra como. ## Degradês escuros de brasa e framboesa Parta de um fundo marrom profundo ou ameixa e deixe o laranja e o rosa brilharem a partir dele, e o par deixa de ser alegre e vira íntimo: luz de vela, brasas, um cardápio de coquetéis. Eles sustentam texto claro com facilidade, o que os torna práticos para cartazes de eventos e ofertas noturnas. - Brasa: `radial-gradient(circle at 75% 80%, #fb923c 0%, #9f1239 35%, #1c0708 80%)` - Ferrugem para framboesa: `linear-gradient(160deg, #1f0a0a 0%, #7c2d12 45%, #db2777 100%)` - Última luz: `radial-gradient(ellipse at 50% 100%, #fdba74 0%, #be185d 40%, #2a0a14 85%)` Degradês escuros de laranja e rosa. Acrescente grão, porque misturas quentes e escuras formam faixas com facilidade. ## Como fugir do clichê do pôr do sol Laranja para rosa numa diagonal de 45 graus está por toda parte, de papéis de parede de celular a ícones de app, então parece o padrão. Se você quer o calor sem o preset, mude ao menos uma das coisas abaixo. [Degradês de pôr do sol](https://gradiently.design/pt-br/guide/sunset-gradient) cobre a versão literal, se é isso que você quer. ### Preset - Laranja forte para rosa forte, duas paradas - Diagonal reta de 45 graus - Cor distribuída por igual no quadro - Texto branco sobre a parte mais brilhante ### Pensado - Primeiro um fundo: creme, argila ou brasa - Luz vinda de um canto com um degradê radial - Paradas desiguais, com uma cor liderando - Tinta ferrugem nas versões suaves, tinta creme nas escuras ## Cores de texto sobre laranja e rosa O laranja é uma das cores saturadas mais claras, então texto branco sobre tangerina ou damasco é mais fraco do que parece. Ferrugem profundo ou sombra queimada é a tinta confiável nas versões suaves e vivas; o creme combina com as escuras. As razões usam a fórmula da WCAG, em que 4,5:1 é o mínimo habitual para texto corrido, e [contraste de cores](https://gradiently.design/pt-br/guide/color-contrast-accessibility) explica o resto. | Fundo | Texto | Contraste | Veredito | | --- | --- | --- | --- | | Damasco `#fb923c` | Branco | 2,3:1 | Falha | | Tangerina `#f97316` | Branco | 2,8:1 | Falha para a maioria dos textos | | Pêssego `#fed7aa` | Sombra queimada `#431407` | 11,6:1 | Excelente | | Coral `#fb7185` | Sombra queimada `#431407` | 5,8:1 | Bom | | Laranja profundo `#c2410c` | Branco | 5,2:1 | Bom | | Framboesa `#be185d` | Branco | 6,0:1 | Bom | Se o texto branco importa para o seu design, escureça as paradas atrás dele para laranja profundo ou framboesa. Uma promoção vertical de bar com letras creme sobre um degradê escuro que brilha em laranja e framboesa Uma promoção de bar em brasa para framboesa, com texto creme no lado escuro. Um post quadrado de cuidados com a pele com letras marrom escuro sobre um degradê suave de pêssego e rosado Um post de cuidados com a pele em pêssego e rosado com tinta sombra queimada. ## CSS de degradê laranja e rosa ```css .warm-hero { background-color: #fff7ed; background-image: radial-gradient(circle at 85% 20%, #fb7185 0%, transparent 45%), radial-gradient(circle at 10% 90%, #fdba74 0%, transparent 50%), linear-gradient(160deg, #fff7ed 0%, #fed7aa 100%); color: #431407; } ``` Um fundo creme com uma luz coral no canto superior direito e damasco no inferior esquerdo, e texto sombra queimada. Sobrepor duas luzes radiais suaves a uma base pálida dá um calor muito mais natural que uma única diagonal. Se você quer um calor que seja inconfundivelmente seu, o Mercado do Gradiently permite buscar Marks por palavras de cor como “coral” ou “pêssego”. Cada Mark é único, com exatamente um dono por vez, e depois que você o reserva só você pode exportar com ele. ## FAQ ### Qual é um bom código de degradê laranja e rosa? Um clássico vivo é `linear-gradient(135deg, #f97316 0%, #fb7185 50%, #ec4899 100%)`. Para uma versão mais suave, experimente `linear-gradient(135deg, #fff7ed 0%, #fed7aa 50%, #fecdd3 100%)`. ### Laranja e rosa combinam? Sim. São vizinhos na roda de cores, com o coral entre eles, então se misturam limpos e parecem quentes. ### Que cor de texto vai sobre um degradê laranja e rosa? Um ferrugem profundo ou sombra queimada como `#431407` se lê bem nas versões suaves e vivas. O branco só funciona nas paradas mais profundas, como `#c2410c` ou `#be185d`. ### Como faço um degradê laranja e rosa parecer menos um pôr do sol? Parta de um fundo como creme, argila ou uma brasa escura, ilumine-o de um canto em vez de uma diagonal e deixe uma cor liderar. ### Que cor fica entre o laranja e o rosa? Coral, em torno de `#fb7185`, com salmão e melancia como parentes próximos.