# Gradientes rosa com cara moderna, sem ficar melosos [Canonical HTML page](https://gradiently.design/pt-br/guide/pink-gradient) O rosa pode parecer uma loja de doces ou uma revista de moda. A diferença raramente está no rosa em si; está no que você coloca ao lado dele. Aqui estão paletas, combinações e códigos para um rosa atual. ## The short version - Um gradiente rosa mistura tons de rosa, do blush claro e do rosa antigo ao coral e ao pink, muitas vezes com um vizinho pêssego, vermelho ou violeta. - O rosa fica meloso quando é claro, saturado e combinado só com outros pastéis, e moderno quando é combinado com um tom profundo. - Parceiros profundos como sangue de boi, azul-marinho, verde-floresta e quase preto dão contraste ao rosa e um ar editorial. - Texto branco funciona sobre rosas profundos como #be185d, mas fica abaixo do contraste de texto comum em rosas mais vivos como #ec4899. - Rosas empoeirados, levemente acinzentados, parecem mais adultos que os rosas puros de bala e combinam com marcas de moda, beleza e cultura. Um **gradiente rosa** mistura tons de rosa, do blush claro e do rosa antigo, passando pelo coral, até o pink e o framboesa, muitas vezes com um vizinho pêssego, vermelho ou violeta. O rosa vive um longo momento na moda, na beleza, na gastronomia e na cultura, mas tem um defeito bem conhecido: claro demais, doce demais, açucarado demais. A solução quase sempre é contraste. Combine o rosa com algo profundo e ele fica marcante e editorial. Abaixo estão paletas, combinações e códigos CSS para gradientes rosa com cara moderna. ## A gama dos rosas O rosa é um vermelho mais claro, mas a família é ampla. O blush e o rosa antigo são suaves e levemente acinzentados, o que os torna calmos e adultos. O coral e o salmão puxam para o laranja e são quentes e ensolarados. O pink e o fúcsia puxam para o violeta e são barulhentos e divertidos. O framboesa e o frutas vermelhas são profundos o bastante para receber texto branco. - Blush: #fbe4e4 - Rosa antigo: #e8b4b8 - Salmão: #f9a28b - Rosa coral: #fb7185 - Pink: #ec4899 - Fúcsia: #c026d3 - Framboesa: #be185d - Frutas vermelhas: #831843 Oito rosas, do mais claro ao mais profundo. Suaves e acinzentados à esquerda, barulhentos no meio, profundos à direita. O rosa que você escolhe define o tom antes de qualquer outra coisa: - **Beleza e skincare:** blush e rosa antigo, muitas vezes com creme e um marrom quente. - **Moda e publicações:** rosa antigo ou pink contra preto, azul-marinho ou sangue de boi. - **Comida e bebida:** coral, salmão e framboesa, as cores das frutas e do sorbet. - **Música e vida noturna:** pink e fúcsia brilhando sobre quase preto. - **Casamentos e papelaria:** blush e rosé sobre papel quente, com detalhes em verde profundo ou bordô. Os rosas claros se sobrepõem à família mais ampla dos pastéis; [gradientes pastel](https://gradiently.design/pt-br/guide/pastel-gradients) mostra como mantê-los frescos em vários matizes. ## Por que o rosa fica meloso ### Meloso - Rosa claro misturado com azul-bebê ou lilás - Todas as cores em pastel, nada escuro - Rosa de bala puro e vivo, sem nada de cinza - Letras arredondadas e fofas no mesmo rosa ### Moderno - Rosa contra um tom profundo - Um escuro forte para o texto e o peso - Rosas empoeirados, levemente suavizados - Tipografia nítida em quase preto ou creme Nenhuma das escolhas melosas é errada por si só; marcas infantis e confeitarias as usam de propósito. Mas se você quer que o rosa pareça confiante em vez de fofo, precisa de peso em algum lugar do design, e uma cor parceira profunda é o caminho mais rápido para isso. ## Gradientes rosa suaves Rosas suaves são calmos, quentes e táteis. Combinam com skincare, papelaria, casamentos e bem-estar. Mantenha-os levemente empoeirados em vez de vivos e use tinta escura no texto. - Papel blush: `linear-gradient(135deg, #fdf2f0 0%, #f6cfd2 100%)` - Rosa antigo: `linear-gradient(160deg, #f5e1dc 0%, #e8b4b8 55%, #c98b95 100%)` - Rosé a damasco: `linear-gradient(135deg, #fde2e4 0%, #fed7aa 100%)` - Brilho de pétala: `radial-gradient(circle at 30% 30%, #fff1f2 0%, #fbcfe8 45%, #e9a6c0 100%)` Gradientes rosa suaves. O damasco e o rosé suavizado os mantêm quentes, sem açúcar. ## Rosa com tons profundos É aqui que o rosa fica editorial. Um parceiro profundo dá ao rosa algo contra o qual brilhar e dá à tipografia um lugar firme para ficar. As combinações abaixo são comuns em moda, publicações e hotelaria, e com razão. - Sangue de boi a rosé: `linear-gradient(160deg, #2a0a12 0%, #6b1d2a 50%, #f4a6b8 100%)` - Azul-marinho a rosa: `linear-gradient(160deg, #0f1a33 0%, #3a2a5c 50%, #f9a8c2 100%)` - Floresta e rosa, divididos: `linear-gradient(90deg, #14352a 0% 50%, #f7b6c2 50% 100%)` - Cacau a rosé: `linear-gradient(160deg, #1c1210 0%, #4a2c25 50%, #e9a8a0 100%)` - Luz rosa sobre preto: `radial-gradient(circle at 70% 80%, #ff7ab8 0%, #7a1f4b 40%, #0d0508 80%)` - Ameixa a framboesa: `linear-gradient(135deg, #3b0764 0%, #9d174d 55%, #fda4af 100%)` Rosa com parceiros profundos. A combinação com verde-floresta usa uma divisão seca porque rosa e verde são quase opostos e virariam cinza ao se misturar. Verde e rosa ficam quase em lados opostos do círculo cromático, então formam um par marcante e uma mistura ruim. Mantenha os dois em áreas separadas, como na divisão acima. [Cores complementares](https://gradiently.design/pt-br/guide/complementary-colors) explica por que os opostos viram cinza quando misturados. ## Gradientes rosa fortes e pink Os pinks são as cores mais barulhentas da família. Combinam com música, vida noturna, momentos de promoção e marcas que querem ser vistas do outro lado da sala. Misture-os em direção ao laranja ou ao violeta, nunca ao verde ou ao verde-azulado. - Pink a tangerina: `linear-gradient(135deg, #db2777 0%, #f97316 100%)` - Framboesa em alta: `linear-gradient(135deg, #be185d 0%, #ec4899 50%, #f9a8d4 100%)` - Violeta a rosa: `linear-gradient(135deg, #7c3aed 0%, #ec4899 100%)` - Pôr do sol rosa: `linear-gradient(180deg, #ff4d8d 0%, #ff8a5c 60%, #ffd29d 100%)` Gradientes rosa vivos. Cada um segue em direção a um vizinho quente ou violeta, então o meio continua brilhante. Violeta a rosa é um dos gradientes mais conhecidos da internet. Se for usar, deixe com a sua cara com uma base profunda, um realce quente ou grão. O guia de [gradientes roxos](https://gradiently.design/pt-br/guide/purple-gradient) fala mais sobre isso. ## O rosa no design editorial Uma capa editorial vertical com o título A edição da suavidade sobre um gradiente em tons de rosa O rosa como capa de revista: campo calmo, tipografia confiante. Um post quadrado de citação com letras escuras sobre um gradiente suave Um post de citação em que a tipografia escura dá peso ao rosa. O rosa editorial funciona porque trata a cor como base, não como decoração. Um único campo grande, espaço generoso, tipografia serifada ou grotesca nítida em quase preto ou creme e um detalhe em uma cor parceira profunda. [Design editorial para redes sociais](https://gradiently.design/pt-br/guide/editorial-design-for-social) explica os recursos em detalhe. ## Texto sobre gradientes rosa | Texto sobre fundo | Contraste | Veredito | | --- | --- | --- | | Branco sobre `#831843` | 9,7:1 | Excelente | | Branco sobre `#be185d` | 6,0:1 | Bom para texto comum | | Branco sobre `#db2777` | 4,6:1 | Passa por pouco para texto comum | | Branco sobre `#ec4899` | 3,5:1 | Só texto grande | | `#3b0a1e` sobre `#f472b6` | 6,4:1 | A tinta escura funciona aqui | | `#1f2a44` sobre `#f9c6d0` | 9,5:1 | Azul-marinho sobre rosa: excelente | Razões de contraste WCAG, calculadas. Texto comum precisa de 4,5:1, e texto grande, de 3:1. ```css .cover { background-color: #2a0a12; background-image: linear-gradient(160deg, #2a0a12 0%, #6b1d2a 50%, #f4a6b8 100%); color: #fdf2f0; } ``` Sangue de boi a rosé, com texto creme. Coloque as palavras na parte superior, mais escura, do campo. Em um gradiente, sempre confira o contraste onde o rosa é mais claro atrás do texto. [Texto sobre gradiente](https://gradiently.design/pt-br/guide/text-on-gradient) mostra como encontrar a zona calma. ## FAQ ### Que cores combinam com rosa em um gradiente? Pêssego, coral, vermelho e violeta se misturam bem com o rosa. Para contraste, combine o rosa com tons profundos como sangue de boi, azul-marinho, cacau ou quase preto. Mantenha o verde em uma área separada, porque rosa e verde viram cinza ao se misturar. ### Como deixar o rosa com uma cara menos infantil? Use rosas empoeirados ou profundos em vez do rosa de bala vivo, adicione uma cor parceira profunda e ponha a tipografia em quase preto ou creme, e não em outro rosa. ### Que cor de texto funciona sobre um gradiente rosa? O branco funciona sobre rosas profundos como framboesa e frutas vermelhas. Em rosas mais claros, use uma tinta escura, como um bordô profundo ou um azul-marinho. ### Qual é o CSS de um gradiente rosa? Por exemplo, linear-gradient(160deg, #2a0a12 0%, #6b1d2a 50%, #f4a6b8 100%) dá um gradiente de sangue de boi a rosé. Todas as paletas desta página podem ser copiadas como CSS.