# Paletas de cores vivas que continuam legíveis

[Canonical HTML page](https://gradiently.design/pt-pt/guide/bright-color-palettes)

As cores vibrantes são fáceis de adorar e fáceis de tornar ilegíveis. O segredo está em saber que cores vivas pedem texto preto, quais pedem branco, e dar a toda a paleta um sítio calmo onde descansar.

## The short version

- Uma paleta de cores vivas usa cores muito saturadas, como rosa choque, tangerina, limão, azul elétrico e verde vivo.
- Os amarelos, verdes, cianos, verde-água e laranjas vivos são cores claras, por isso pedem texto escuro e não branco.
- Os vermelhos e rosas vivos medem cerca de 3,5:1 contra o branco, o que não cumpre o nível AA das WCAG para texto corrido; use preto no texto pequeno sobre eles e reserve o branco para títulos grandes.
- Duas cores vivas de luminosidade semelhante lado a lado parecem vibrar, por isso separe-as com um neutro ou com uma diferença clara de luminosidade.
- Toda a paleta viva precisa de uma âncora calma, normalmente um quase preto ou um branco quente, para carregar o texto e dar espaço à cor.

Uma **paleta de cores vivas** mantém-se legível quando trata cada cor vibrante pela sua luminosidade e não pela sua intensidade. O limão `#FFD60A`, o verde vivo `#34C759`, o azul-turquesa `#00C2FF` e a tangerina `#FF7A00` são todos suficientemente claros para pedir texto quase preto. O rosa choque `#FF2D87` e o vermelho papoila `#FF3B30` ficam num meio-termo difícil: o texto preto passa, mas o branco só funciona em títulos grandes. Junte uma cor âncora calma, dê a cada cor viva o seu espaço, e uma paleta que parece uma loja de doces passa a ser uma onde se pode mesmo escrever.

## Que cores vivas pedem texto preto

A saturação faz uma cor parecer forte, mas a legibilidade depende da luminosidade. Muitas cores vivas são bem mais claras do que parecem, e é por isso que o texto branco sobre verde vivo ou amarelo é berrante e continua difícil de ler. A tabela abaixo mede onze cores vivas contra o branco e contra o quase preto `#111111`.

| Cor | Hex | Com texto branco | Com texto preto |
| --- | --- | --- | --- |
| Limão | `#FFD60A` | 1,41:1 | 13,38:1, use preto |
| Azul-turquesa | `#00C2FF` | 2,07:1 | 9,14:1, use preto |
| Verde-água | `#00D1B2` | 1,95:1 | 9,68:1, use preto |
| Verde vivo | `#34C759` | 2,22:1 | 8,51:1, use preto |
| Tangerina | `#FF7A00` | 2,61:1 | 7,23:1, use preto |
| Vermelho papoila | `#FF3B30` | 3,55:1 | 5,32:1, use preto |
| Rosa choque | `#FF2D87` | 3,51:1 | 5,37:1, use preto |
| Framboesa | `#E0115F` | 4,76:1, use branco | 3,97:1 |
| Violeta elétrico | `#8B3DFF` | 4,99:1, use branco | 3,78:1 |
| Azul cobalto | `#1D4ED8` | 6,70:1, use branco | 2,82:1 |
| Vermelho sinal | `#C81D11` | 5,77:1, use branco | 3,27:1 |

As WCAG AA pedem 4,5:1 para texto corrido e 3:1 para texto grande. A framboesa e o violeta elétrico são casos limite: o branco passa, mas por pouco.

Uma regra prática: o lado claro da roda, do laranja ao amarelo e ao verde até ao ciano, leva preto, tal como os rosas e vermelhos mais quentes; o lado profundo, do azul ao violeta e ao carmesim, leva branco. Se desenha para um público amplo, leia também [paletas amigas dos daltónicos](https://gradiently.design/pt-pt/guide/color-blindness-design), porque cores vivas que só diferem no matiz podem parecer iguais a alguns leitores.

## Seis paletas de cores vivas com códigos hex

- Branco quente: #fff8ec
- Rosa choque: #ff2d87
- Tangerina: #ff7a00
- Limão: #ffd60a
- Tinta: #111111

Banca de fruta. Três cores vivas quentes entre um branco quente e uma tinta. A tinta leva todo o texto; as cores vivas levam formas e palavras grandes.

- Violeta noturno: #1a1033
- Verde-água: #00d1b2
- Limão: #ffd60a
- Rosa choque: #ff2d87
- Branco lilás: #f4f1ff

Arcade. Um fundo escuro faz as cores vivas brilhar, e as três passam o AA contra ele: limão a 12,76:1, verde-água a 9,23:1, rosa choque a 5,13:1.

- **Festa na piscina:** azul-turquesa `#00C2FF`, verde vivo `#34C759`, limão `#FFD60A`, branco `#FFFFFF`, azul-marinho profundo `#0B1F3A` para o texto.
- **Escola primária:** azul cobalto `#1D4ED8`, vermelho sinal `#C81D11`, limão `#FFD60A`, papel `#FAF7F0`, tinta `#111111`.
- **Impressão riso:** rosa fluorescente `#FF48B0`, azul `#0078BF`, amarelo `#FFE800`, papel de jornal `#F2EFE6`, preto `#1A1A1A`.
- **Tropical:** framboesa `#E0115F`, manga `#FFA51F`, palmeira `#00A86B`, areia `#F6EBD9`, cacau `#2B1B14`.

## Como manter legível uma paleta de cores vivas

1. **Escolha primeiro uma âncora** Escolha um quase preto ou um branco quente e deixe-o cobrir a maior parte da superfície. O branco quente `#FFF8EC` com tinta `#111111` mede 17,89:1, por isso todas as palavras em tinta leem-se bem.
2. **Componha o texto na âncora, não numa cor viva** O texto corrido pertence à cor âncora. As cores vivas podem levar um título ou um único número grande, onde se aplica o limiar de 3:1 para texto grande.
3. **Separe cores vivas de igual luminosidade** O rosa choque ao lado de um azul elétrico como `#2F6BFF` mede 1,28:1, e a fronteira parece cintilar. Ponha branco, preto ou espaço entre eles, ou combine uma cor viva clara com uma profunda.
4. **Limite quantas cores vivas tocam nas palavras** Três cores vivas numa paleta é mais do que suficiente, e só uma deve ficar atrás de qualquer bloco de texto. A [regra 60 30 10](https://gradiently.design/pt-pt/guide/60-30-10-rule) ajuda: âncora 60, cor viva principal 30, acentos 10.
5. **Teste-a num telemóvel, ao ar livre** As cores vivas desbotam ao sol e em ecrãs com pouco brilho. Se as palavras ainda se leem num telemóvel com o brilho baixo, a paleta funciona.

Uma publicação viva de saldos de verão em que o texto de apoio pequeno se perde contra o fundo vibrante

Um fundo berrante com as palavras mesmo por cima: o título sobrevive, a linha de detalhe desaparece.

A mesma publicação viva de saldos de verão, com todas as linhas de texto nítidas sobre uma zona mais calma por trás

As mesmas cores, com o fundo a acalmar atrás do texto. Continua vivo e todas as linhas se leem.

A versão da direita é o que o Gradiently faz por defeito. Um Mark sabe onde estão as suas palavras, afasta delas a cor mais agitada e escolhe letra clara ou escura linha a linha, por isso pode manter uma paleta ruidosa sem caixa nem sombra atrás do texto.

## Gradientes vivos sem meio cinzento

Misture duas cores vivas de lados opostos da roda em sRGB simples e o ponto médio fica cinzento ou castanho. Ou escolhe vizinhas, ou pede ao navegador que interpole em oklch, o que mantém o meio saturado. [Interpolação de gradientes](https://gradiently.design/pt-pt/guide/gradient-interpolation) explica a diferença.

- Rosa a limão: `linear-gradient(135deg, #ff2d87 0%, #ff7a00 55%, #ffd60a 100%)`
- Azul-turquesa a verde: `linear-gradient(135deg, #00c2ff 0%, #00d1b2 50%, #34c759 100%)`
- Rosa a azul-turquesa em oklch: `linear-gradient(in oklch 135deg, #ff2d87 0%, #00c2ff 100%)`
- Brilho rosa sobre a noite: `radial-gradient(circle at 30% 30%, #ff2d87 0%, #8b3dff 45%, #1a1033 90%)`

As cores vivas vizinhas misturam-se limpas. Os opostos mantêm-se vivos quando interpolados em oklch.

Para mais combinações, veja [gradientes vibrantes](https://gradiently.design/pt-pt/guide/vibrant-gradients) e [gradientes néon](https://gradiently.design/pt-pt/guide/neon-gradients). Para orientação completa sobre contraste, leia [contraste de cor](https://gradiently.design/pt-pt/guide/color-contrast-accessibility).

Um aviso se a paleta for impressa: as cores de ecrã mais elétricas, sobretudo o azul-turquesa, o rosa choque e o verde vivo, ficam fora do que as tintas CMYK normais reproduzem, e saem da gráfica visivelmente mais baças. Peça uma prova ou conte com tintas diretas ou fluorescentes. [RGB vs CMYK](https://gradiently.design/pt-pt/guide/rgb-vs-cmyk) explica o que esperar.

## FAQ

### O que é uma paleta de cores vivas?

Um conjunto de cores muito saturadas, como rosa choque, tangerina, limão, azul-turquesa e verde vivo, normalmente equilibradas com uma âncora neutra para o texto.

### Devo usar texto branco ou preto sobre cores vivas?

Use preto nas cores vivas claras, como amarelo, laranja, verde, azul-turquesa e verde-água, e também no rosa choque e no vermelho papoila. Use branco nas cores vivas profundas, como cobalto, violeta, framboesa e vermelho sinal.

### Porque é que algumas cores vivas parecem vibrar?

Duas cores saturadas de luminosidade semelhante lado a lado, como o rosa choque e o azul elétrico, fazem a fronteira entre elas cintilar. Separe-as com um neutro ou mude a luminosidade de uma.

### Quantas cores vivas deve ter uma paleta?

Duas ou três cores vivas mais um ou dois neutros chegam e sobram. Só uma cor viva deve ficar atrás de qualquer bloco de texto.

### As cores vivas prejudicam a acessibilidade?

Em si, não. Os problemas vêm do texto sobre cores vivas com contraste a menos, por isso verifique cada par de texto segundo as WCAG e mantenha o texto corrido numa âncora escura ou clara.