Paletas de cores para UI: o que cada cor pode e não pode fazer
Doze paletas de cores para UI com códigos hex exatos, testadas papel por papel. Quais acentos funcionam como botão e como link, qual texto cinza falha num card tingido e por que um acento claro preenche, mas nunca escreve.
Uma paleta de cores para UI não é um conjunto de cores bonitas. É um conjunto de papéis, e cada cor consegue fazer alguns trabalhos e outros não. Aqui estão doze paletas, cada uma testada em um papel que costuma dar errado, com todos os códigos hex.
Os três papéis de uma paleta de UI
A tinta escreve. É a cor de cada linha de texto, então precisa ser escura o bastante sobre a superfície, como Ink Navy #141238 sobre Indigo Mist #EEF0FB. Você também a usa nos links quando o acento não dá conta.
A superfície sustenta. É a página ou o card atrás de todo o resto. Não precisa ser branca, e o tom que você escolhe muda o comportamento de todas as outras cores.
O acento toca. É a única cor que diz "isso faz alguma coisa". Parece um trabalho só, e a próxima seção mostra que são dois.
Um acento tem dois trabalhos
Num botão, o rótulo precisa ser legível sobre o acento, e o botão precisa se destacar da página. Numa frase, o mesmo acento é um link, e link é texto, então precisa ser legível sobre essa mesma página. Os dois trabalhos usam o mesmo par de cores, mas o segundo tem uma régua mais alta.
Isso significa que um acento pode ser um bom botão e um mau link. Sky e Coral ficam exatamente nessa brecha. Indigo e Berry passam nos dois.
Indigo
Indigo #4338CA, rótulo branco: passa
Indigo como link sobre Indigo Mist #EEF0FB: passa
Ink Navy #141238 como link: passa
Indigo funciona como botão e como link. Uma cor, dois trabalhos, nada para consertar.
Berry
Berry #A61E4D, rótulo branco: passa
Berry como link sobre Berry Milk #FBEAF0: passa
Deep Berry #2A0A18 como link: passa
Berry faz o mesmo: rótulo branco no botão, link legível sobre a superfície rosa clara.
Sky
Sky #248AE4, rótulo Harbor Ink: passa
Sky como link sobre Sky Wash #EAF4FC: falha
Harbor Ink #021828 como link: passa
Sky é um bom botão e um link difícil. Guarde-o para botões e coloque os links em Harbor Ink, sublinhados.
Coral
Coral #E85446, rótulo Burnt Clay: passa
Coral como link sobre Coral Milk #FDEEEB: falha
Burnt Clay #290E0A como link: passa
Coral tem a mesma divisão. Um botão que as pessoas enxergam e um link que some dentro do Coral Milk.
Guarde o acento para os botões
A solução é barata. Guarde Sky e Coral para botões e coloque os links na tinta, sublinhados. Aqui está a mesma frase das duas formas.
Senha
Esqueceu sua senha?
✕ Sky como link: difícil de ler
Senha
Esqueceu sua senha?
✓ Harbor Ink como link: fácil de ler
Texto cinza em cards tingidos
O texto secundário costuma ser a sua tinta a cerca de 65%. No branco ele é fácil de ler nas quatro paletas, e numa superfície clara quase não muda. Numa tinta de verdade, ele pode ficar abaixo da linha.
Por isso, teste na superfície em que ele está, não no branco. Numa tinta forte, suba o cinza para 70% e ele se recupera.
Red Panda
Sombre Night
Red Panda
#636772 sobre Sugar Milk #FAF7F0: passa
Mesma mistura de 65% #656A77 no branco: passa
Sugar Milk é quase branco, então o cinza quase não muda. Passa no card e no branco.
Warm Purple
English Walnut
Warm Purple
#606146 sobre Oh Pistachio #BCDBA4: falha
A 70%, #59573F: passa
Oh Pistachio é uma tinta de verdade. O mesmo cinza que passa no branco fica abaixo da linha aqui, e 70% o traz de volta.
Mango
Jedi Night
Mango
#5E6C68 sobre Heart of Ice #F2F5FA: passa
Mesma mistura de 65% #626F6A no branco: passa
Heart of Ice é uma tinta fria e clara, então o cinza aguenta.
Viridian
Midnight Dreams
Viridian
#535D71 sobre Digital Lavender #D3CAEE: falha
A 70%, #495467: passa
Digital Lavender é uma tinta forte o bastante para reprovar o mesmo cinza. Suba para 70% e o card volta a ser legível.
Um acento claro preenche, nunca escreve
Um acento claro é um preenchimento lindo e uma cor de texto sem esperança. Na própria página, nenhum desses quatro pode ser lido como texto. Transforme a mesma cor em preenchimento e funciona, desde que você escolha as palavras certas para ele.
Purple Estate
Blue Horizon #72AFCC como texto sobre Sunwashed Paper #F5EDCE: falha
Purple Estate #58287F sobre Blue Horizon: só tipo grande
Purple Estate sobre Sunwashed Paper: passa
O azul claro falha como texto sobre o papel. Como preenchimento, aceita Purple Estate, que serve para uma data grande e não para tipo pequeno.
Blue Horizon
Blue Horizon #2FA4D7 como texto sobre Desert Cream #F5E9D8: falha
Cocoa Noir #3E2C23 sobre Blue Horizon: passa
Cocoa Noir sobre Desert Cream: passa
O azul mais vivo também falha como texto sobre Desert Cream. Como preenchimento, carrega Cocoa Noir com facilidade.
Herb Garden
Herb Garden #BCD9A2 como texto sobre Sun Linen #FEFFD3: falha
Red Monarch #A82323 sobre Herb Garden: passa
Red Monarch sobre Sun Linen: passa
O mais fraco dos quatro na sua página. Coloque Red Monarch sobre o verde e o número fica bem claro.
Nordic Sky
Nordic Sky #7288AE como texto sobre Manor Cream #EAE0CF: falha
Branco #FFFFFF sobre Nordic Sky: só tipo grande
Velvet Indigo #4B5694 sobre Manor Cream: passa
Nordic Sky só aceita branco, e só em tipo grande: números sim, letra miúda não. O texto da página vai em Velvet Indigo.
Portanto, confira o preenchimento e as palavras sobre ele, não só a página. Se as palavras sobre o preenchimento só alcançam o contraste de tipo grande, mantenha-as grandes.
As doze paletas numa tabela
| Paleta | Cores | O papel que testa |
|---|---|---|
| Indigo | Ink Navy #141238, Indigo #4338CA, Indigo Mist #EEF0FB | Botão e link passam |
| Berry | Deep Berry #2A0A18, Berry #A61E4D, Berry Milk #FBEAF0 | Botão e link passam |
| Sky | Harbor Ink #021828, Sky #248AE4, Sky Wash #EAF4FC | Botão passa, link falha |
| Coral | Burnt Clay #290E0A, Coral #E85446, Coral Milk #FDEEEB | Botão passa, link falha |
| Red Panda | Sombre Night #121A2E, Red Panda #B54302, Sugar Milk #FAF7F0 | Cinza passa no card |
| Warm Purple | English Walnut #2E1F14, Warm Purple #812E7D, Oh Pistachio #BCDBA4 | Cinza falha no card |
| Mango | Jedi Night #0E2219, Mango #FAA828, Heart of Ice #F2F5FA | Cinza passa no card |
| Viridian | Midnight Dreams #0E222D, Viridian #007F5B, Digital Lavender #D3CAEE | Cinza falha no card |
| Purple Estate | Sunwashed Paper #F5EDCE, Blue Horizon #72AFCC, Purple Estate #58287F | Azul claro preenche, só tipo grande |
| Blue Horizon | Blue Horizon #2FA4D7, Desert Cream #F5E9D8, Cocoa Noir #3E2C23 | Preenchimento passa com Cocoa Noir |
| Herb Garden | Red Monarch #A82323, Sun Linen #FEFFD3, Herb Garden #BCD9A2 | Preenchimento passa com Red Monarch |
| Nordic Sky | Velvet Indigo #4B5694, Nordic Sky #7288AE, Manor Cream #EAE0CF | Preenchimento aceita branco, só tipo grande |
Os números, para quem precisa defender a escolha
Cada par foi medido com a fórmula de contraste do WCAG 2 contra a superfície em que está. Esta é a única tabela do paper com proporções.
| Paleta | Teste | Proporção | Resultado |
|---|---|---|---|
| Indigo | Rótulo branco / botão na página / link na página | 7.90:1 / 6.96:1 / 6.96:1 | Passa em tudo |
| Berry | Rótulo branco / botão na página / link na página | 7.21:1 / 6.22:1 / 6.22:1 | Passa em tudo |
| Sky | Rótulo de tinta / botão na página / link na página | 5.01:1 / 3.23:1 / 3.23:1 | Passa, passa, falha |
| Coral | Rótulo de tinta / botão na página / link na página | 4.98:1 / 3.21:1 / 3.21:1 | Passa, passa, falha |
| Red Panda | Cinza 65% no card / no branco | 5.2:1 / 5.4:1 | Passa nos dois |
| Warm Purple | Cinza 65% no card / no branco / a 70% | 4.1:1 / 5.0:1 / 4.8:1 | Falha, passa, passa |
| Mango | Cinza 65% no card / no branco | 5.0:1 / 5.2:1 | Passa nos dois |
| Viridian | Cinza 65% no card / no branco / a 70% | 4.2:1 / 5.1:1 / 4.8:1 | Falha, passa, passa |
| Purple Estate | Acento claro como texto / melhor texto sobre ele / tinta na página | 2.05:1 / 4.31:1 / 8.83:1 | Falha, tipo grande, passa |
| Blue Horizon | Acento claro como texto / melhor texto sobre ele / tinta na página | 2.36:1 / 4.66:1 / 11.03:1 | Falha, passa, passa |
| Herb Garden | Acento claro como texto / melhor texto sobre ele / tinta na página | 1.51:1 / 4.64:1 / 6.98:1 | Falha, passa, passa |
| Nordic Sky | Acento claro como texto / branco sobre ele / tinta na página | 2.75:1 / 3.59:1 / 5.25:1 | Falha, tipo grande, passa |
Como montar sua própria paleta de UI
- Comece pela tinta e pela superfície. Escolha uma tinta escura e uma superfície, tingida ou branca, e confira a tinta sobre a superfície. Harbor Ink #021828 sobre Sky Wash #EAF4FC é o caso fácil.
- Escolha o acento pelo rótulo. Decida se vai texto branco ou escuro sobre ele e confira o rótulo sobre o acento.
- Teste o acento como link. Coloque-o na sua superfície como texto. Se falhar, guarde-o para botões e coloque os links na tinta.
- Teste o texto secundário em toda superfície. Misture a tinta a 65% sobre a cor de cada card. Suba para 70% onde ela escorregar.
- Guarde as cores claras para preenchimentos. Escolha as palavras que vão sobre elas antes de se comprometer. Nossos papers sobre erros de cor em UI e contraste de cor acessível aprofundam os limites.
Baixe os arquivos de cada conjunto
Cada conjunto é um color set gratuito no Forge, com códigos para copiar com um toque, arquivos de swatches para Figma e Adobe (ASE), variáveis CSS e design tokens.
Color set gratuito
Um acento tem dois trabalhos: Indigo, Berry, Sky, Coral
Todos os hex, mais swatches ASE, variáveis CSS e design tokens.
Color set gratuito
Texto cinza em cards tingidos: Red Panda, Warm Purple, Mango, Viridian
Todos os hex, mais swatches ASE, variáveis CSS e design tokens.
Color set gratuito
Um acento claro preenche, nunca escreve: Purple Estate, Blue Horizon, Herb Garden, Nordic Sky
Todos os hex, mais swatches ASE, variáveis CSS e design tokens.
FAQ
Que cores uma paleta de cores para UI deve ter?
Pelo menos três papéis: uma tinta para o texto, um acento para botões e links e uma superfície para a página. Indigo #4338CA com Ink Navy #141238 e Indigo Mist #EEF0FB é um exemplo completo.
Que cor os links devem ter numa UI?
O acento, só se ele passar como texto na sua superfície. Indigo passa. Sky #248AE4 não passa, então seus links vão em Harbor Ink #021828, sublinhados.
Que cor o texto secundário deve ter?
Sua tinta a cerca de 65%, conferida na superfície em que ele está. Numa tinta forte como Oh Pistachio #BCDBA4 ele pode falhar, e subir para 70% resolve.
Por que o texto cinza é difícil de ler num card colorido?
Um card tingido é mais escuro que o branco, então a distância entre o cinza e o card diminui. O branco esconde o problema, e por isso você testa na superfície real.
Posso usar um tom pastel como cor de acento?
Como preenchimento, sim. Como texto, não. Herb Garden #BCD9A2 falha como texto sobre Sun Linen #FEFFD3 e funciona como preenchimento com Red Monarch #A82323 sobre ele.
A cor do botão precisa funcionar como cor de link?
Precisa, se você usa a mesma para os dois. Um botão tem de se destacar da página e carregar seu rótulo. Um link é texto, então exige uma régua mais alta na mesma página.
Fontes
- Nomes de cores e códigos hex dos color sets UX Brainy no Forge, vol 04, 08 e 12. O contraste foi calculado com a fórmula do WCAG 2 contra a superfície em que cada cor está.
- Os limites para texto e formas seguem o W3C WCAG 2.2: Contrast (Minimum) e Non-text Contrast.
- O cinza de cada tile é a tinta da paleta misturada com a superfície a 65%, ou 70% onde indicado, então esse hex é derivado da paleta.
- Publicado originalmente como três carrosséis no UX Brainy: Uma cor de acento tem dois trabalhos, O mesmo cinza pode passar no branco e falhar no seu card tingido e Seu acento claro pode preencher uma forma.
Want a UI palette built for your product, with every role tested on your real screens? Our team designs interfaces that hold up in every state.
Get Started
