Paletas de Cor de Destaque: 16 Cores de Destaque e o Rótulo de Cada Uma
Dezesseis paletas de cor de destaque com códigos hex exatos, cada uma testada para a única coisa que um destaque precisa fazer: carregar um rótulo legível em um botão. Veja quais aceitam branco, quais aceitam escuro e quais não aceitam nenhum.
Uma cor de destaque é a única cor da sua interface que significa "toque aqui". Ela só funciona se as palavras em cima dela puderem ser lidas, então é o rótulo que decide qual destaque é um bom destaque. Aqui estão dezesseis destaques em quatro testes, com cada código hex e o rótulo que cada um aceita.
O que um destaque precisa aguentar
Um destaque é julgado pelo que acontece quando você coloca uma palavra nele. O rótulo precisa ser legível, e o botão precisa se destacar da página ao fundo.
Isso dá quatro testes. Ele aceita rótulo branco ou escuro, ou cai no meio onde nenhum funciona? Consegue carregar texto pequeno de tag? É pálido demais para ser botão, como Butterscotch Gold #F7C873?
Cada paleta abaixo é uma tinta, um destaque e uma superfície, e o último bloco mostra o teste.
Qual rótulo o destaque aceita
Teal, Cobalt e Rose são escuros o bastante para que um rótulo branco seja lido de longe. Amber #C88A16 não é.
Teal
Mar Profundo
Teal
Giz
Branco no Teal
Um teal profundo que carrega um rótulo branco com folga de sobra.
Cobalt
Tinta Marinho
Cobalt
Névoa
Branco no Cobalt
O mais forte dos quatro. Branco no Cobalt é lido de longe.
Rose
Tinta Ameixa
Rose
Concha
Branco no Rose
Rose é o mais claro dos três destaques com rótulo branco, então tem a menor folga. Não o clareie mais.
Amber
Bark
Amber
Aveia
Bark no Amber
Amber é o honesto. Branco nele falha, e a resposta não é um âmbar mais escuro: escreva o rótulo em Bark e mantenha a cor exatamente como está.
Esse é todo o trabalho de um destaque: ele precisa sobreviver às palavras que você coloca em cima. O Amber mostra que a solução raramente é outra cor. Mude o rótulo, mantenha a marca.
A zona morta dos tons médios
Alguns destaques ficam no meio da escala de luminosidade: claros demais para texto branco, escuros demais para texto escuro. Dois destes quatro escapam em direções opostas, e dois ficam presos.
French Winery
French Winery
Branco no French Winery: passa
Midnight Express #1D2433 no French Winery: falha
Magnolia Petal
Escuro o bastante para o texto branco funcionar. French Winery sai da zona morta ficando mais escuro.
Wild Forest
Wild Forest
Branco no Wild Forest: falha
Nightwalker #2B1A35 no Wild Forest: falha
Vintage Porcelain
Um verde fresco bem no meio. Branco falha nele e escuro também. Um tom mais escuro e o branco passa, então ajuste o verde antes de desenhar um único botão.
Glowing Lantern
Glowing Lantern
Branco no Glowing Lantern: falha
Aztec #153023 no Glowing Lantern: passa
Silent Snowfall
Claro o bastante para o texto escuro funcionar. Glowing Lantern sai da zona morta pelo outro lado, ficando mais claro, então seu rótulo é Aztec, nunca branco.
Pink Orchid
Pink Orchid
Branco no Pink Orchid: falha
Royal Neptune #0F2E30 no Pink Orchid: falha
Snowflake
Um rosa de tom médio com o mesmo problema do Wild Forest. Um tom mais escuro e o branco passa.
Tipografia grande tem uma régua mais baixa que texto miúdo, então um título enorme pode parecer ok nessas cores enquanto o rótulo do botão falha. Verifique o menor texto que você vai colocar no destaque. Se o destaque da sua marca cair no meio, ajuste-o antes de montar o conjunto de botões.
Botão não é badge
Um badge normalmente é o destaque a cerca de 15% no fundo, com o destaque inteiro como texto. Essa tinta clareia o fundo, então o texto sobre ele perde contraste. Um destaque pode carregar um rótulo branco de botão e ainda assim falhar dentro do próprio badge. O terceiro bloco é o destaque a 15% sobre a superfície.
Peacock Pride
Peacock Pride
Rótulo branco do botão: passa
Peacock Pride na tinta #D5E1D2: passa
Wood Bark #2A2320 na tinta: passa
Um verde-azulado profundo que sobrevive às duas funções sobre Cosmic Latte #FBF7E6.
Furnace
Furnace
Rótulo branco do botão: passa
Furnace na tinta #EAD9D1: falha
Elite Teal #13302A na tinta: passa
Um botão vermelho-alaranjado forte que fica fraco como tag. Sobre White Glove #EEF4F0, escreva o texto da tag na cor de tinta e o badge fica legível.
Purple Heart
Purple Heart
Rótulo branco do botão: passa
Purple Heart na tinta #E6D3DF: passa
Black Velvet #1B2838 na tinta: passa
Escuro o bastante para que a tinta atrás, sobre Vanilla Blush #FDF1EC, não faça diferença.
French Blue
French Blue
Rótulo branco do botão: passa
French Blue na tinta #D9E3E3: falha
Nightly Voyager #2A1630 na tinta: passa
A mesma história do Furnace: um botão que funciona e um badge que não. Sobre Powdered #FFF6E8, a cor de tinta salva o texto do badge.
Se o seu destaque é um tom médio, escreva o texto de badge e de tag na cor de tinta. As tags do Furnace e os badges do French Blue ficam fáceis de ler no instante em que o texto passa para a tinta.
O brilhante não é o botão
Um botão precisa se destacar com clareza da página onde está. Um destaque pálido e brilhante numa página creme não se destaca, mesmo sendo a cor mais bonita da paleta.
Então troque as funções. A cor escura vira o botão, e a brilhante vira a tag, o badge e o estado selecionado. Duas dessas paletas fazem isso, e as outras duas têm um destaque escuro o bastante para tocar.
Butterscotch
Storm Graphite #434343 botão, Butter Canvas #FAEBCD rótulo: passa
Butterscotch Gold #F7C873 tag: passa
Butterscotch Gold na página: quase invisível
Butterscotch Gold é lindo e some como botão sobre Butter Canvas. Troque as funções: Storm Graphite recebe o toque, o dourado vira a tag.
Ocean Breeze
Midnight Navy #0C2C55 botão, Vanilla Linen #EDEDCE rótulo: passa
Ocean Breeze #629FAD tag: passa
Ocean Breeze na página: quase invisível
Um azul-petróleo suave sobre um linho pálido. Mesma solução: Midnight Navy é o botão, Ocean Breeze é a tag e o estado selecionado.
Silent Grove
Silent Grove #215E61 botão: passa
Link no Morning Paper #F5FBE6: passa
Blue Monolith #233D4D
Este faz tudo. Um teal escuro é botão e link sobre Morning Paper, com um rótulo branco que se lê com facilidade.
Wild Berry
Wild Berry #CF4173 botão: passa
Link Wild Berry no Peach Cashmere #F6D8BD: falha
Link Deep Berry Plum #5D3140: passa
Wild Berry só passa raspando como botão com rótulo branco. Como texto sobre Peach Cashmere ele fica aquém, então seus links vão em Deep Berry Plum.
Um link é feito de palavras, então precisa passar na régua do texto, não só na do botão. Quando o destaque só passa raspando como botão, escreva os links na cor de tinta.
Os dezesseis destaques em uma tabela
| Paleta | Destaque | Rótulo que funciona | Atenção a |
|---|---|---|---|
| Teal | Teal #0E7C6B | Branco | Nenhuma das quatro funções |
| Cobalt | Cobalt #2F4BD6 | Branco | Nenhuma das quatro funções |
| Rose | Rose #C2445F | Branco | Menor folga dos três, não clarear |
| Amber | Amber #C88A16 | Bark #2C2415 | Branco falha |
| French Winery | French Winery #9A0A2C | Branco | Texto escuro falha |
| Wild Forest | Wild Forest #009041 | Nenhum, até ficar um tom mais escuro | Os dois rótulos falham |
| Glowing Lantern | Glowing Lantern #FFBB40 | Aztec #153023 | Branco falha |
| Pink Orchid | Pink Orchid #C157AD | Nenhum, até ficar um tom mais escuro | Os dois rótulos falham |
| Peacock Pride | Peacock Pride #006262 | Branco | Nenhuma das quatro funções |
| Furnace | Furnace #D23D20 | Branco | Texto de badge, use Elite Teal #13302A |
| Purple Heart | Purple Heart #652A97 | Branco | Nenhuma das quatro funções |
| French Blue | French Blue #0075C9 | Branco | Texto de badge, use Nightly Voyager #2A1630 |
| Butterscotch | Butterscotch Gold #F7C873 | Texto escuro, como tag | Pálido demais para ser botão |
| Ocean Breeze | Ocean Breeze #629FAD | Texto escuro, como tag | Pálido demais para ser botão |
| Silent Grove | Silent Grove #215E61 | Branco | Nenhuma das quatro funções |
| Wild Berry | Wild Berry #CF4173 | Branco | Links, use Deep Berry Plum #5D3140 |
Os números, para quem precisa defender a escolha
Cada par acima foi medido com a fórmula de contraste do WCAG 2. Esta é a única tabela do paper com razões.
| Paleta | Teste | Razão | Resultado |
|---|---|---|---|
| Teal | Rótulo branco no destaque | 5.10:1 | Passa |
| Cobalt | Rótulo branco no destaque | 6.78:1 | Passa |
| Rose | Rótulo branco no destaque | 4.90:1 | Passa |
| Amber | Rótulo branco no destaque | 2.96:1 | Falha |
| French Winery | Rótulo branco | 8.5:1 | Passa |
| French Winery | Rótulo escuro | 1.8:1 | Falha |
| Wild Forest | Rótulo branco | 4.1:1 | Falha |
| Wild Forest | Rótulo escuro | 3.8:1 | Falha |
| Wild Forest | Rótulo branco, um tom mais escuro | 4.6:1 | Passa |
| Glowing Lantern | Rótulo escuro | 8.4:1 | Passa |
| Glowing Lantern | Rótulo branco | 1.6:1 | Falha |
| Pink Orchid | Rótulo branco | 4.0:1 | Falha |
| Pink Orchid | Rótulo escuro | 3.6:1 | Falha |
| Pink Orchid | Rótulo branco, um tom mais escuro | 4.6:1 | Passa |
| Peacock Pride | Rótulo do botão / texto do badge | 7.1:1 / 5.3:1 | Passa nos dois |
| Furnace | Rótulo do botão / texto do badge / texto do badge em tinta | 4.7:1 / 3.4:1 / 10.3:1 | Passa, falha, passa |
| Purple Heart | Rótulo do botão / texto do badge | 9.0:1 / 6.3:1 | Passa nos dois |
| French Blue | Rótulo do botão / texto do badge / texto do badge em tinta | 4.7:1 / 3.6:1 / 12.7:1 | Passa, falha, passa |
| Butterscotch | Dourado na página / texto escuro na tag dourada | 1.32:1 / 6.34:1 | Falha, passa |
| Ocean Breeze | Destaque na página / texto escuro na tag do destaque | 2.49:1 / 4.7:1 | Falha, passa |
| Silent Grove | Rótulo branco no destaque | 7.4:1 | Passa |
| Wild Berry | Rótulo branco no destaque | 4.51:1 | Passa raspando |
Como testar o seu próprio destaque
- Teste o branco primeiro. Se o branco passa no destaque, como no Cobalt #2F4BD6, seu rótulo está resolvido.
- Teste sua tinta mais escura em seguida. Se o branco falha e a tinta passa, escreva todos os rótulos na tinta, como em Amber e Glowing Lantern.
- Se os dois falham, mova o destaque. Um tom mais escuro ou mais claro tira você do meio.
- Teste a tag separadamente. Faça a tinta de 15% e verifique o destaque como texto sobre ela. Se falhar, escreva as tags na tinta.
- Confira o botão contra a página. Um destaque pálido é tag, não botão. Nossos papers sobre contraste de cor acessível e erros de cor em UI cobrem os limites.
Baixe os arquivos de cada conjunto
Cada conjunto é um conjunto de cores gratuito no Forge, com códigos para copiar com um toque, arquivos de swatch para Figma e Adobe (ASE), variáveis CSS e design tokens.
Conjunto de cores gratuito
Tinta, superfície, uma coisa para tocar: Teal, Cobalt, Rose, Amber
Todos os hex, mais swatches ASE, variáveis CSS e design tokens.
Conjunto de cores gratuito
A zona morta: French Winery, Wild Forest, Glowing Lantern, Pink Orchid
Todos os hex, mais swatches ASE, variáveis CSS e design tokens.
Conjunto de cores gratuito
Botão não é badge: Peacock Pride, Furnace, Purple Heart, French Blue
Todos os hex, mais swatches ASE, variáveis CSS e design tokens.
Conjunto de cores gratuito
O brilhante não é o botão: Butterscotch, Ocean Breeze, Silent Grove, Wild Berry
Todos os hex, mais swatches ASE, variáveis CSS e design tokens.
FAQ
Que cor de texto vai em um botão de cor de destaque?
Branco se o destaque for escuro o bastante, tinta escura se for claro. Teal #0E7C6B aceita branco. Amber #C88A16 aceita Bark #2C2415. Se nenhum funciona, o destaque está no meio e precisa se mover um tom.
Por que o texto branco falha em alguns botões coloridos?
Porque o botão é claro demais. Amber, Glowing Lantern #FFBB40 e Butterscotch Gold #F7C873 são brilhantes, então o texto branco neles fica fraco. Tons médios como Wild Forest #009041 falham tanto com texto branco quanto com texto escuro.
Como escolho uma cor de destaque para uma paleta de UI?
Escolha primeiro o rótulo. Decida se o destaque vai carregar texto branco ou escuro, depois escolha uma cor claramente de um dos lados do meio. Teste como botão, como texto de badge e contra a página.
Por que meu destaque fica bom como botão, mas ruim como badge?
Um badge coloca o destaque como texto sobre uma tinta clara dele mesmo, o que reduz o contraste. Furnace #D23D20 e French Blue #0075C9 carregam um rótulo branco de botão com facilidade e falham como texto de badge. Escreva o texto do badge na sua tinta.
Uma cor de destaque clara pode ser um botão?
Raramente. Ela precisa se destacar da página ao fundo, e um destaque pálido numa página creme mal consegue. Faça de uma cor escura o botão e use o destaque pálido como tag ou estado selecionado.
Fontes
- Nomes de cores e códigos hex dos conjuntos de cores do UX Brainy no Forge, vol 02, 06, 07 e 11. O contraste foi calculado com a fórmula do WCAG 2 contra a superfície em que cada cor fica.
- Os limites de contraste para texto e para formas seguem o W3C WCAG 2.2: Contrast (Minimum) e Non-text Contrast.
- O hex da tinta em cada bloco de badge é o destaque a 15% sobre a superfície, derivado da paleta.
- Publicado originalmente como quatro carrosséis no UX Brainy: Seu destaque decide de que cor precisa ser o rótulo nele, A zona morta, Botão não é badge e O brilhante não é o botão.
Want an accent and a full UI palette built for your product and tested on your real screens? Our team designs interfaces that hold up in every state.
Get Started
