# Gradiente lavanda: códigos de roxo suave

[Canonical HTML page](https://gradiently.design/pt-pt/guide/lavender-gradient)

A lavanda é o roxo com o volume baixo: calma, um pouco sonhadora, nunca ruidosa. O difícil é mantê-la suave sem a deixar ficar cinzenta ou açucarada. Estes códigos conseguem as duas coisas.

## The short version

- Um gradiente lavanda mistura roxos claros e ligeiramente azulados, muitas vezes com branco, rosa-pálido, pêssego ou um azul suave.
- A lavanda fica cinzenta quando as paragens são pouco saturadas, e fica açucarada quando todas as paragens são rosa e violeta pastel.
- Um parceiro quente como o pêssego ou a manteiga, ou um verde frio como a salva, dá carácter à lavanda.
- O texto branco não se lê sobre lavanda clara; uma ameixa profunda como #2e1065 lê-se.
- A lavanda serve bem-estar, sono, casamentos, beleza e produtos digitais calmos.

Um **gradiente lavanda** mistura roxos claros e suavemente azulados, normalmente de quase branco a um lilás ou pervinca delicado. Dá uma sensação calma, leve e um pouco sonhadora, e é por isso que as marcas de bem-estar, sono, beleza e casamentos gostam tanto dele. Duas coisas podem correr mal: se lhe tirares cor a mais fica um cinzento poeirento, se lhe juntares rosa a mais fica açucarado. Mantém uma paragem claramente colorida, combina-a com um parceiro quente ou verde e compõe o texto em ameixa profunda.

## Lavanda, lilás, pervinca e malva

Os roxos suaves têm vários nomes, e cada um tende para um lado. Saber qual queres facilita a mistura: a lavanda e a pervinca tendem para o azul, o lilás e a malva tendem para o rosa.

- Névoa de lavanda: #f5f3ff
- Lavanda: #e6e0f8
- Violeta suave: #ddd6fe
- Lilás: #c4b5fd
- Pervinca: #c7d2fe
- Orquídea: #d8b4e2
- Malva: #b497bd
- Tinta ameixa: #2e1065

A família dos roxos suaves e uma ameixa profunda para o texto. A lavanda e a pervinca são mais frias; a orquídea e a malva são mais quentes.

## Gradientes de lavanda clara

Estes são os mais discretos, os mais próximos do branco, para fundos que levam muito texto: ementas de uma casa de chá, uma newsletter, os ecrãs de introdução de uma app. Quase não se notam, por isso usa-os onde o conteúdo é o que importa.

- Névoa de lavanda: `linear-gradient(180deg, #faf9ff 0%, #e6e0f8 100%)`
- Violeta suave: `linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 100%)`
- Banho de pervinca: `linear-gradient(135deg, #eef2ff 0%, #e6e0f8 50%, #f5f3ff 100%)`
- Luz lilás: `radial-gradient(circle at 70% 25%, #ddd6fe 0%, #f5f3ff 55%, #ffffff 100%)`

Lavandas quase brancas. Cada uma mantém uma paragem com cor a sério para nunca se ler como cinzento.

## Gradientes de lilás e pervinca

Um passo mais fundo, a lavanda passa a ser uma cor clara e não um tom esbatido. Do lilás à pervinca dá uma mistura fria e moderna que fica bem em ecrãs de telemóvel; do lilás à orquídea é mais quente e mais romântica. Mantém as duas pontas com luminosidade semelhante e a mistura fica suave.

- De lilás a pervinca: `linear-gradient(135deg, #c4b5fd 0%, #a5b4fc 100%)`
- De lilás a orquídea: `linear-gradient(135deg, #ddd6fe 0%, #d8b4e2 100%)`
- Lilás crepuscular: `linear-gradient(160deg, #e0e7ff 0%, #c4b5fd 50%, #a78bfa 100%)`
- De azul-bebé a lilás: `linear-gradient(90deg, #bfdbfe 0%, #c4b5fd 100%)`

Lavandas médias. As que tendem para o azul parecem digitais e calmas; as que tendem para o rosa parecem românticas.

## Lavanda com pêssego, manteiga ou salva

Sozinha, a lavanda pode parecer doce demais. Um parceiro de fora da família do roxo resolve isso. O pêssego e a manteiga acrescentam calor e fazem a lavanda parecer a luz do início da noite. A salva acrescenta algo adulto e botânico, e é por isso que lavanda e salva é uma combinação tão popular em casamentos. Nestes tons claros, as cores opostas misturam-se sem ficarem turvas, porque há pouca saturação a perder. Os [gradientes pastel](https://gradiently.design/pt-pt/guide/pastel-gradients) tratam desse princípio em toda a roda de cores.

- Lavanda e pêssego: `linear-gradient(135deg, #ddd6fe 0%, #fde2cf 100%)`
- Lavanda e manteiga: `linear-gradient(135deg, #e6e0f8 0%, #fef3c7 100%)`
- Lavanda e salva: `linear-gradient(135deg, #e6e0f8 0%, #dbe5d4 100%)`
- Céu de fim de tarde: `linear-gradient(180deg, #c7d2fe 0%, #ddd6fe 45%, #fbcfe8 100%)`

Lavanda com um parceiro. Cada uma parece menos doce e mais um lugar ou uma hora do dia verdadeiros.

## Gradientes de lavanda crepuscular

Levar a lavanda até ao violeta ou à ameixa dá-te o crepúsculo: ainda suave no topo, rico em baixo. Funcionam para apps de sono, marcas de velas, ioga ao fim do dia, perfumaria e livrarias. A ponta escura dá também ao texto branco um sítio onde assentar. Para toda a gama de roxos mais fortes, vê os [gradientes roxos](https://gradiently.design/pt-pt/guide/purple-gradient).

- Crepúsculo: `linear-gradient(180deg, #e6e0f8 0%, #a78bfa 50%, #4c1d95 100%)`
- Hora de dormir: `linear-gradient(180deg, #ddd6fe 0%, #8b5cf6 55%, #2e1065 100%)`
- Crepúsculo malva: `radial-gradient(circle at 50% 20%, #ede9fe 0%, #b497bd 40%, #4a2e5c 100%)`

Lavanda no topo, ameixa em baixo. Põe os títulos a branco na metade inferior, ou a ameixa na metade superior.

## Ideias de gradiente lavanda que podes publicar esta semana

A lavanda escolhe-se muitas vezes porque é agradável e depois usa-se sem plano. Estas são peças concretas em que ajuda a sério:

- **Uma app de sono ou meditação:** “Hora de dormir” como fundo de introdução, texto ameixa no topo, o botão na zona violeta profunda.
- **Uma publicação de florista para o Dia da Mãe a 1080×1350:** “Lavanda e pêssego” com uma frase, “Encomendas até quinta-feira.”
- **Um lançamento de cuidados de pele:** “Névoa de lavanda” por trás das fotografias do produto, para a embalagem levar a cor.
- **Um banner de LinkedIn de terapeuta ou coach a 1584×396:** “Banho de pervinca” lê-se calmo e profissional sem a frieza do azul empresarial.
- **Uma tabela de preços de spa num cartaz A4:** “Lavanda e salva” com letra cor de beringela, legível do outro lado da receção.

## Como evitar a lavanda cinzenta e açucarada

### Fica cinzenta ou açucarada

- Todas as paragens pouco saturadas, como `#e2e0e6`
- Lavanda ao lado de cinzento frio
- Lavanda, rosa-bebé e violeta todos ao mesmo tempo
- Texto branco sobre um lilás claro

### Fica suave e clara

- Pelo menos uma paragem com cor clara, como `#c4b5fd`
- Lavanda ao lado de branco quente ou creme
- Um só parceiro: pêssego, manteiga ou salva
- Texto ameixa profundo sobre as zonas claras

Uma verificação útil: põe uma amostra de cinzento puro ao lado da tua lavanda. Se tiveres dificuldade em distingui-las de relance, sobe a cor um ponto. Verifica também num telemóvel com pouco brilho, onde os tons muito claros se perdem com facilidade.

## Texto sobre um gradiente lavanda

A lavanda é muito clara, por isso a letra branca falha em quase toda ela: branco sobre lilás `#c4b5fd` mede menos de 2 para 1. Ameixa profunda `#2e1065` sobre o mesmo lilás mede mais de 8 para 1 e mantém o texto dentro da família do roxo em vez da dureza do preto. Para um aspeto mais suave nas lavandas mais pálidas, uma beringela suave como `#3b2f4a` continua a passar com folga. A [cor, contraste e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) tem os pormenores.

Um convite de casamento save the date com texto ameixa profundo sobre um gradiente lavanda clara e pêssego

Um convite de 5×7 polegadas a 300 dpi, em lavanda clara com letra ameixa.

O mesmo design save the date como story alto de telemóvel sobre o gradiente lavanda

O mesmo design como story para partilhar a novidade, renderizado no seu próprio tamanho.

Com o Pro, o Gradiently pode levar esse único design da impressão para todos os tamanhos sociais num só passo: o Mark é renderizado de novo em cada formato, e a tinta automática escolhe letra clara ou escura linha a linha a partir da paleta do próprio Mark. Para saber mais sobre papelaria, vê as [paletas de cores para casamentos](https://gradiently.design/pt-pt/guide/wedding-color-palettes).

## CSS de gradiente lavanda

Por omissão, os navegadores misturam as cores do gradiente em sRGB, o que pode esbater o meio de uma mistura entre dois matizes. Interpolar em OKLCH mantém o ponto médio limpo, e um recurso em hex cobre os navegadores sem suporte. Vê os [gradientes CSS em OKLCH](https://gradiently.design/pt-pt/guide/css-gradient-oklch) para o suporte.

```css
.card-lavender {
  background: linear-gradient(135deg, #f5f3ff, #ddd6fe, #fde2cf);
  color: #2e1065;
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .card-lavender {
    background: linear-gradient(in oklch 135deg, #f5f3ff, #ddd6fe, #fde2cf);
  }
}
```

De névoa de lavanda a violeta suave a pêssego, com texto ameixa. A versão OKLCH mantém a mistura luminosa até ao meio.

## FAQ

### Qual é o código hex da lavanda?

A cor CSS com nome `lavender` é `#e6e6fa`, um roxo azulado muito claro. Muitos designers usam versões ligeiramente mais ricas, como `#e6e0f8` ou `#ddd6fe`.

### Que cores combinam com um gradiente lavanda?

Pêssego, amarelo-manteiga, verde-salva, creme e azul suave. Uma ameixa profunda funciona bem para o texto.

### Porque é que o meu gradiente lavanda parece cinzento?

As paragens são pouco saturadas ou estão ao lado de cinzento frio. Dá cor clara a pelo menos uma paragem e combina-a com branco quente em vez de cinzento.

### Qual é a diferença entre lavanda e lilás?

A lavanda tende ligeiramente para o azul e costuma ser mais clara; o lilás tende ligeiramente para o rosa e é um pouco mais forte.

### Que cor de texto se usa sobre lavanda?

Ameixa profunda ou beringela, como `#2e1065`. O texto branco falha o contraste sobre lavanda clara.