# Paletas de cores vibrantes que continuam legíveis [Canonical HTML page](https://gradiently.design/pt-br/guide/bright-color-palettes) Cores vivas são fáceis de amar e fáceis de deixar ilegíveis. O segredo é saber quais cores vibrantes pedem texto preto, quais pedem branco, e dar à paleta inteira um lugar tranquilo para descansar. ## The short version - Uma paleta de cores vibrantes usa cores muito saturadas, como rosa choque, tangerina, limão, azul elétrico e verde vivo. - Amarelos, verdes, cianos, verde-azulados e laranjas vibrantes são cores claras, então pedem texto escuro, e não branco. - Vermelhos e rosas vibrantes medem por volta de 3,5:1 contra o branco, o que reprova no WCAG AA para texto corrido, então use preto para texto pequeno sobre eles e guarde o branco para títulos grandes. - Duas cores vibrantes de luminosidade parecida, lado a lado, parecem vibrar, então separe-as com um neutro ou com uma diferença clara de luminosidade. - Toda paleta vibrante precisa de uma âncora calma, normalmente um quase preto ou um branco quente, para carregar o texto e dar espaço às cores. Uma **paleta de cores vibrantes** continua legível quando você trata cada cor viva pela luminosidade, e não pela intensidade. Limão `#FFD60A`, verde vivo `#34C759`, água `#00C2FF` e tangerina `#FF7A00` são todos claros o bastante para pedir texto quase preto. Rosa choque `#FF2D87` e vermelho papoula `#FF3B30` ficam num meio-termo incômodo: o texto preto passa, mas o branco só funciona em títulos grandes. Acrescente uma cor âncora calma, dê a cada cor vibrante o próprio espaço, e uma paleta que parece loja de doces vira uma paleta onde dá para escrever de verdade. ## Quais cores vibrantes pedem texto preto A saturação faz uma cor parecer forte, mas a legibilidade depende da luminosidade. Muitas cores vibrantes são bem mais claras do que parecem, e é por isso que texto branco sobre verde vivo ou amarelo parece gritante e mesmo assim é difícil de ler. A tabela abaixo mede onze cores vibrantes 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 | | Água | `#00C2FF` | 2,07:1 | 9,14:1, use preto | | Verde-água menta | `#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 papoula | `#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 | | Cobalto | `#1D4ED8` | 6,70:1, use branco | 2,82:1 | | Vermelho sinal | `#C81D11` | 5,77:1, use branco | 3,27:1 | O WCAG AA pede 4,5:1 para texto corrido e 3:1 para texto grande. Framboesa e violeta elétrico estão no limite: o branco passa, mas por pouco. Uma regra prática útil: o lado claro do círculo cromático, do laranja passando por amarelo e verde até o ciano, pede preto, assim como os rosas e vermelhos mais quentes; o lado profundo, do azul passando pelo violeta até o carmim, pede branco. Se você cria para um público amplo, leia também [paletas acessíveis para daltônicos](https://gradiently.design/pt-br/guide/color-blindness-design), porque cores vibrantes que diferem só no matiz podem parecer iguais para alguns leitores. ## Seis paletas de cores vibrantes com códigos hex - Branco quente: #fff8ec - Rosa choque: #ff2d87 - Tangerina: #ff7a00 - Limão: #ffd60a - Tinta: #111111 Banca de frutas. Três cores vibrantes quentes entre um branco quente e uma tinta escura. A tinta carrega todo o texto; as cores vibrantes ficam com formas e palavras grandes. - Violeta noturno: #1a1033 - Verde-água menta: #00d1b2 - Limão: #ffd60a - Rosa choque: #ff2d87 - Branco lilás: #f4f1ff Fliperama. Um fundo escuro faz as cores vibrantes brilharem, e as três passam no AA sobre ele: limão com 12,76:1, verde-água menta com 9,23:1, rosa choque com 5,13:1. - **Festa na piscina:** água `#00C2FF`, verde vivo `#34C759`, limão `#FFD60A`, branco `#FFFFFF`, azul-marinho profundo `#0B1F3A` para o texto. - **Escola primária:** cobalto `#1D4ED8`, vermelho sinal `#C81D11`, limão `#FFD60A`, papel `#FAF7F0`, tinta `#111111`. - **Risografia:** rosa fluorescente `#FF48B0`, azul `#0078BF`, amarelo `#FFE800`, papel jornal `#F2EFE6`, preto `#1A1A1A`. - **Tropical:** framboesa `#E0115F`, manga `#FFA51F`, palmeira `#00A86B`, areia `#F6EBD9`, cacau `#2B1B14`. ## Como manter uma paleta vibrante legível 1. **Escolha primeiro uma âncora** Escolha um quase preto ou um branco quente e deixe que ele cubra a maior parte da superfície. Branco quente `#FFF8EC` com tinta `#111111` mede 17,89:1, então toda palavra escrita em tinta fica legível. 2. **Escreva na âncora, não numa cor vibrante** O texto corrido fica na cor âncora. As cores vibrantes podem carregar um título ou um único número grande, onde vale o limite de 3:1 para texto grande. 3. **Separe cores vibrantes de mesma luminosidade** Rosa choque ao lado de um azul elétrico como `#2F6BFF` mede 1,28:1, e a borda parece tremeluzir. Coloque branco, preto ou espaço entre elas, ou combine uma cor vibrante clara com uma profunda. 4. **Limite quantas cores vibrantes tocam as palavras** Três cores vibrantes numa paleta já bastam, e só uma deve ficar atrás de cada bloco de texto. A [regra 60 30 10](https://gradiently.design/pt-br/guide/60-30-10-rule) ajuda: âncora 60, cor vibrante principal 30, destaques 10. 5. **Confira num celular ao ar livre** Cores vibrantes desbotam no sol e em telas com pouco brilho. Se as palavras continuam legíveis num celular com o brilho baixo, a paleta funciona. Um post vibrante de liquidação de verão em que o texto pequeno de apoio se perde no fundo vivo Um fundo gritante com as palavras direto por cima: o título sobrevive, a linha de detalhe desaparece. O mesmo post vibrante de liquidação de verão com todas as linhas de texto nítidas sobre uma área mais calma atrás delas As mesmas cores, com o fundo se acalmando atrás do texto. Continua vibrante, e todas as linhas ficam legíveis. A versão da direita é o que o Gradiently faz por padrão. Um Mark sabe onde estão as suas palavras, afasta delas a cor mais agitada e escolhe texto claro ou escuro linha por linha, então você pode manter uma paleta intensa sem caixa nem sombra atrás do texto. ## Degradês vibrantes sem um meio cinza Misture duas cores vibrantes de lados opostos do círculo cromático em sRGB simples e o ponto do meio fica cinza ou marrom. Escolha cores vizinhas, ou peça ao navegador para interpolar em oklch, que mantém o meio saturado. [Interpolação de degradês](https://gradiently.design/pt-br/guide/gradient-interpolation) explica a diferença. - Rosa para limão: `linear-gradient(135deg, #ff2d87 0%, #ff7a00 55%, #ffd60a 100%)` - Água para verde: `linear-gradient(135deg, #00c2ff 0%, #00d1b2 50%, #34c759 100%)` - Rosa para água 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%)` Cores vibrantes vizinhas se misturam de forma limpa. Opostas continuam vivas quando interpoladas em oklch. Para mais combinações, veja [degradês vibrantes](https://gradiently.design/pt-br/guide/vibrant-gradients) e [degradês neon](https://gradiently.design/pt-br/guide/neon-gradients). Para orientação completa sobre contraste, leia [contraste de cores](https://gradiently.design/pt-br/guide/color-contrast-accessibility). Um aviso se a paleta for impressa: as cores de tela mais elétricas, principalmente água, rosa choque e verde vivo, ficam fora do que as tintas CMYK padrão conseguem reproduzir e voltam da gráfica visivelmente mais apagadas. Peça uma prova, ou planeje usar cores especiais ou tintas fluorescentes. [RGB x CMYK](https://gradiently.design/pt-br/guide/rgb-vs-cmyk) explica o que esperar. ## FAQ ### O que é uma paleta de cores vibrantes? Um conjunto de cores muito saturadas, como rosa choque, tangerina, limão, água e verde vivo, normalmente equilibrado com uma âncora neutra para o texto. ### Devo usar texto branco ou preto sobre cores vibrantes? Use preto sobre cores vibrantes claras, como amarelo, laranja, verde, água e verde-azulado, e também sobre rosa choque e vermelho papoula. Use branco sobre cores vibrantes profundas, como cobalto, violeta, framboesa e vermelho sinal. ### Por que algumas cores vibrantes parecem vibrar? Duas cores saturadas de luminosidade parecida lado a lado, como rosa choque e azul elétrico, fazem a borda entre elas tremeluzir. Separe-as com um neutro ou mude a luminosidade de uma delas. ### Quantas cores vibrantes uma paleta deve ter? Duas ou três cores vibrantes mais um ou dois neutros já bastam. Só uma cor vibrante deve ficar atrás de cada bloco de texto. ### Cores vibrantes são ruins para a acessibilidade? Não por si só. Os problemas vêm de texto sobre cores vibrantes com pouco contraste, então confira cada par de texto com o WCAG e mantenha o texto corrido numa âncora escura ou clara.