Códigos de degradê rosa e roxo, do doce ao crepúsculo

Um degradê rosa e roxo mistura dois vizinhos na roda de cores, um rosa como #ec4899 e um violeta como #9333ea, com magenta e orquídea pelo meio. Como os matizes são adjacentes, a mistura mantém-se viva de ponta a ponta. O que muda tudo é a luminosidade: mantém-na pálida e obténs algodão-doce, aumenta a saturação e obténs glamour, escurece-a e obténs crepúsculo. Os códigos abaixo vão do claro ao escuro, para escolheres primeiro o ambiente e depois os valores hex.

Ambientes do degradê rosa e roxo num relance

Degradês rosa doce e roxo

Rosas e lilases pálidos juntos são o mais suave que a cor consegue ser. Servem tudo o que seja doce ou delicado, mas podem resvalar depressa para o infantil. A solução é um fundo ligeiramente quente, um pêssego ou creme numa das pontas, e texto escuro muito seguro.

Para mais desta suavidade, os degradês pastel cobrem toda a família, e os degradês de alfazema inclinam-se mais para o roxo.

Degradês orquídea e magenta

Sobe a saturação e o par torna-se glamoroso. É o território do verniz de unhas, das pulseiras de festival e das capas de álbuns. Usa um ligeiro ângulo ou um brilho radial em vez de uma diagonal plana e deixa uma zona mais calma para as palavras.

Crepúsculo: degradês rosa e roxo escuros

Escurece o par e ele cresce de imediato. Um fundo preto ameixa com luz de framboesa e violeta lê-se como o céu vinte minutos depois do pôr do sol, ou um bar de cocktails com luz baixa. São os mais versáteis do conjunto e levam facilmente texto branco ou rosa pálido.

Estes ficam perto dos degradês de pôr do sol e dos degradês de galáxia, e podes pedir emprestado livremente a qualquer um.

Acrescentar uma terceira cor sem turvar

A diagonal padrão de rosa-choque a violeta está em todo o lado, por isso uma cor extra é a forma mais rápida de a tornares tua. Escolhe uma cor vizinha do rosa ou do roxo: laranja e coral ficam ao lado do rosa, azul e índigo ao lado do roxo. O verde fica oposto ao magenta, e é por isso que o rosa para verde fica cinzento no meio.

Como escolher um degradê rosa e roxo para a tua marca

1. 1

   Decide primeiro claro ou escuro

   Grande parte do ambiente vem da luminosidade. Uma mistura pálida diz delicado; um fundo ameixa diz noite. Escolhe um e mantém-no em todas as publicações.

2. 2

   Escolhe que cor lidera

   O rosa a liderar parece mais quente e divertido. O roxo a liderar parece mais frio e misterioso. Dá ao líder cerca de dois terços da superfície.

3. 3

   Planeia onde ficam as palavras

   Põe o título sobre a ponta mais escura e calma e o rosa mais vivo num canto, para nunca competires com o fundo pela atenção.

4. 4

   Testa-o em todos os tamanhos

   Uma mistura que funciona numa publicação quadrada pode pôr a zona mais brilhante atrás do texto num story. Verifica publicação, story e banner antes de te comprometeres.

Se publicas com frequência, escreve o resultado como uma receita curta: base, cor principal, acento, onde fica a luz. Essa linha mantém um feed inteiro coerente, o que importa mais do que qualquer degradê bonito isolado. O artigo coerência de marca vai mais longe.

Cores de texto sobre rosa e roxo

O rosa vivo é mais claro do que parece, por isso os títulos brancos sobre rosa-choque são mais fracos do que se espera. O violeta e o magenta levam bem o branco. Na ponta pálida, uma ameixa profunda é a tinta que mantém o design numa só família. Os rácios são contraste WCAG; aponta a 4,5:1 para texto pequeno e a 3:1 no mínimo para títulos grandes. O artigo contraste de cor e acessibilidade explica os limiares.

CSS de degradê rosa e roxo

.dusk {
  background-color: #1e0b2e;
  background-image:
    radial-gradient(circle at 80% 85%, #db2777 0%, transparent 45%),
    linear-gradient(180deg in oklch, #1e0b2e 0%, #581c87 100%);
  color: #fce7f3;
}

.headline-gradient {
  background: linear-gradient(90deg, #ec4899, #9333ea);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

O texto em degradê é marcante, mas usa-o só em palavras curtas de destaque, nunca em texto corrente. O artigo texto em degradê com CSS trata das alternativas. Se queres um visual rosa e roxo que mais ninguém possa publicar, o Mercado da Gradiently deixa-te procurar Marks por palavras de cor como “orquídea”. Cada Mark é único e, depois de o reservares, só tu podes exportar com ele; também mantém o texto legível nas duas pontas da mistura por si só.