Paletas de Cores para Dark Mode: 12 Paletas com Códigos Hex para a Noite
Doze paletas de cores para dark mode com códigos hex exatos: acentos que brilham à noite, acentos que afundam, um acento para dois temas e texto off-white que não ofusca.
Uma paleta de dark mode não é a paleta clara de cabeça para baixo. O acento se comporta de outro jeito numa página escura, o texto precisa ser mais suave e algumas cores simplesmente deixam de funcionar. Aqui estão doze paletas escuras com todos os códigos hex, feitas para mostrar o que muda à noite.
O dark mode vira o seu acento do avesso
Os acentos que penam no branco são os que brilham numa superfície escura. Os acentos que parecem sólidos no branco podem perder o fio. Ou seja, um tema escuro não pode pegar emprestado o acento do tema claro sem conferir.
Cada paleta abaixo é uma tinta clara, um acento e uma superfície escura. Os tiles mostram o acento na página escura e no branco. Para entender o sistema por trás de um tema escuro, veja nosso paper sobre sistemas de cores para dark mode.
Lime
Electric Lime #C6F432 sobre Graphite #17181C: brilha
O mesmo acento no branco: apagado
Chalk #F2F3EE sobre Graphite
Electric Lime é quase invisível no branco e brilha em Graphite. As cores que penam no branco são as que reluzem à noite.
Pink
Hot Pink #FF4F9A sobre Night Plum #1A1218: brilha
O mesmo acento no branco: mais fraco
Blush White #F6EEF2 sobre Night Plum
Hot Pink é mais fraco no branco e muito mais forte em Night Plum.
Amber
Amber #FFB020 sobre Coffee Black #1B1610: brilha
O mesmo acento no branco: apagado
Warm White #F5F0E6 sobre Coffee Black
Amber é um acento fraco no branco e um acento quente e forte em Coffee Black.
Royal
Royal #3B4CCA sobre Midnight #121426: afunda
O mesmo acento no branco: forte
Frost #EEF0FA sobre Midnight
Royal é o azul de manual do modo claro. Em Midnight ele afunda abaixo do que um botão precisa para ser percebido como forma: mesmo hex, outra página.
Mesmo hex, outra página. Royal é o que merece atenção: um botão que funciona no branco pode afundar à noite.
Um acento, dois temas
Um botão precisa se destacar da página onde está. Waikiki consegue isso na página clara e na escura. Very Berry também. Um hex, os dois temas.
Lime Punch e Gentian Blue não conseguem. Cada um fica ótimo em um tema e desaparece no outro.
Waikiki
Waikiki
Sobre Silver Bird #FBF8F1: passa
Sobre Midnight Oil #10141F: passa
Um azul-petróleo de tom médio que se destaca nas duas páginas. Um hex, os dois temas.
Very Berry
Very Berry
Sobre French Porcelain #F7F4FB: passa
Sobre Twilight Zone #0F1C16: passa
Outro tom médio que funciona na página clara e na escura.
Lime Punch
Lime Punch
Sobre Ceramic #FBFAF5: falha
Sobre Infinite Night #171538: passa
Claro demais para o modo claro: na superfície diurna o botão quase desaparece. Em Infinite Night ele brilha.
Gentian Blue
Gentian Blue
Sobre Open Book #F6EFE5: passa
Sobre Balsamico #1C1612: falha
Escuro demais para o dark mode. É forte em Open Book e some em Balsamico.
Se você quer um acento para os dois temas, escolha um tom médio e confira duas vezes. Se não, dê a cada tema o seu próprio tom. Nosso guia de design de dark mode mostra como entregar esse segundo tema.
Off-white vence o branco puro
Branco puro numa superfície quase preta é o maior contraste possível, e esse é o problema: ele ofusca. Os off-whites destas paletas continuam muito mais legíveis do que o texto do corpo exige.
O tema escuro do Material Design define o texto principal em 87% de branco pelo mesmo motivo. Dê ao off-white um pouco de calor ou um pouco de frio, e deixe o acento falar.
Smoked Salmon
Distant Cloud #E7ECEC sobre Dark Moon #0B1B1F
Branco puro #FFFFFF sobre Dark Moon: ofusca
Smoked Salmon #FF887A sobre Dark Moon
Um off-white frio com um acento coral quente. O acento se destaca com clareza sem ajuda nenhuma.
Minted Elegance
Vanilla Sugar #F1EBDF sobre Violet Void #1C1022
Branco puro #FFFFFF sobre Violet Void: ofusca
Minted Elegance #4FCB9C sobre Violet Void
Vanilla Sugar tem um pouco de calor, e o acento menta tem muito espaço em Violet Void.
Malibu
Milk and Cookies #EFE7E7 sobre Asphalt #1C140F
Branco puro #FFFFFF sobre Asphalt: ofusca
Malibu #57BAF0 sobre Asphalt
Um off-white quente sobre um quase preto quente, com um azul-céu que corta tudo.
Dream Vapour
Star Magnolia #EAEFE4 sobre Black Stallion #0E1A16
Branco puro #FFFFFF sobre Black Stallion: ofusca
Dream Vapour #BB9DF0 sobre Black Stallion
Star Magnolia puxa levemente para o verde, o que combina bem com um acento lilás suave.
Todos os acentos desses quatro se destacam com clareza na superfície noturna, então o texto pode ficar quieto.
As doze paletas em uma tabela
| Paleta | Cores | O que mostra |
|---|---|---|
| Lime | Chalk #F2F3EE, Electric Lime #C6F432, Graphite #17181C | Brilha no escuro |
| Pink | Blush White #F6EEF2, Hot Pink #FF4F9A, Night Plum #1A1218 | Mais forte no escuro |
| Amber | Warm White #F5F0E6, Amber #FFB020, Coffee Black #1B1610 | Brilha no escuro |
| Royal | Frost #EEF0FA, Royal #3B4CCA, Midnight #121426 | Afunda no escuro |
| Waikiki | Midnight Oil #10141F, Waikiki #0098A4, Silver Bird #FBF8F1 | Funciona nos dois temas |
| Very Berry | Twilight Zone #0F1C16, Very Berry #CE4390, French Porcelain #F7F4FB | Funciona nos dois temas |
| Lime Punch | Infinite Night #171538, Lime Punch #B7DD31, Ceramic #FBFAF5 | Só funciona no escuro |
| Gentian Blue | Balsamico #1C1612, Gentian Blue #292BAE, Open Book #F6EFE5 | Só funciona no claro |
| Smoked Salmon | Distant Cloud #E7ECEC, Smoked Salmon #FF887A, Dark Moon #0B1B1F | Texto off-white |
| Minted Elegance | Vanilla Sugar #F1EBDF, Minted Elegance #4FCB9C, Violet Void #1C1022 | Texto off-white |
| Malibu | Milk and Cookies #EFE7E7, Malibu #57BAF0, Asphalt #1C140F | Texto off-white |
| Dream Vapour | Star Magnolia #EAEFE4, Dream Vapour #BB9DF0, Black Stallion #0E1A16 | Texto off-white |
Os números, para quem vai 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 razões.
| Paleta | Teste | Razão | Resultado |
|---|---|---|---|
| Lime | Acento na superfície escura / no branco | 13.84:1 / 1.28:1 | Brilha, apagado |
| Pink | Acento na superfície escura / no branco | 5.98:1 / 3.07:1 | Mais forte no escuro |
| Amber | Acento na superfície escura / no branco | 9.82:1 / 1.83:1 | Brilha, apagado |
| Royal | Acento na superfície escura / no branco | 2.66:1 / 6.83:1 | Afunda no escuro |
| Waikiki | Botão no claro / no escuro | 3.2:1 / 5.2:1 | Passa nos dois |
| Very Berry | Toggle no claro / no escuro | 3.9:1 / 4.0:1 | Passa nos dois |
| Lime Punch | Botão no claro / no escuro | 1.4:1 / 11.1:1 | Falha, passa |
| Gentian Blue | Botão play no claro / no escuro | 8.9:1 / 1.7:1 | Passa, falha |
| Smoked Salmon | Texto off-white / branco puro / acento | 14.7:1 / 17.6:1 / 7.6:1 | Passa, ofusca, passa |
| Minted Elegance | Texto off-white / branco puro / acento | 15.4:1 / 18.3:1 / 9.0:1 | Passa, ofusca, passa |
| Malibu | Texto off-white / branco puro / acento | 14.9:1 / 18.1:1 / 8.3:1 | Passa, ofusca, passa |
| Dream Vapour | Texto off-white / branco puro / acento | 15.2:1 / 17.8:1 / 7.8:1 | Passa, ofusca, passa |
Como montar a sua paleta escura
- Escolha primeiro a superfície escura. Um quase preto como Graphite #17181C ou Violet Void #1C1022 é mais suave que o preto puro.
- Defina o texto em off-white. Adicione um pouco de calor ou um pouco de frio, como em Vanilla Sugar #F1EBDF.
- Teste o acento na superfície escura. Não reaproveite o acento do tema claro sem conferir.
- Decida: um acento ou dois. Se um acento precisa servir aos dois temas, escolha um tom médio e confira nas duas páginas. Caso contrário, dê a cada tema o seu próprio tom.
- Confira o botão como forma. Ele precisa se destacar da página, não apenas ser lido como um rótulo.
Pegue 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.
Conjunto de cores gratuito
O dark mode vira o seu acento do avesso: Lime, Pink, Amber, Royal
Todos os hex, mais swatches ASE, variáveis CSS e design tokens.
Conjunto de cores gratuito
Um acento, dois temas: Waikiki, Very Berry, Lime Punch, Gentian Blue
Todos os hex, mais swatches ASE, variáveis CSS e design tokens.
Conjunto de cores gratuito
Off-white para dark mode: Smoked Salmon, Minted Elegance, Malibu, Dream Vapour
Todos os hex, mais swatches ASE, variáveis CSS e design tokens.
FAQ
Quais cores funcionam melhor em uma paleta de dark mode?
Uma superfície quase preta, um off-white para o texto e um acento que se destaque no escuro. Smoked Salmon #FF887A sobre Dark Moon #0B1B1F, com Distant Cloud #E7ECEC no texto, é um bom exemplo.
O dark mode deve usar texto em branco puro?
Não. Branco puro numa superfície quase preta ofusca. Um off-white como Vanilla Sugar #F1EBDF ainda é muito mais legível do que o texto do corpo exige, e é mais suave.
Posso usar o mesmo acento no modo claro e no dark mode?
Só se for um tom médio. Waikiki #0098A4 se destaca nas duas páginas. Lime Punch #B7DD31 some no claro e Gentian Blue #292BAE some no escuro.
Por que meu botão azul desaparece no dark mode?
Um azul forte no branco pode ser escuro demais para uma superfície escura. Royal #3B4CCA afunda em Midnight #121426. Use um azul mais claro no tema escuro.
Que cor devem ter os botões no dark mode?
Qualquer uma que se destaque da superfície escura. Electric Lime #C6F432, Hot Pink #FF4F9A e Amber #FFB020 conseguem, porque cores vivas brilham à noite.
Qual é a melhor cor de fundo para dark mode?
Um quase preto como Graphite #17181C ou Coffee Black #1B1610, em vez de preto puro. Fica mais suave ao lado de um off-white e ainda deixa o acento brilhar.
Fontes
- Nomes de cores e códigos hex dos color sets da UX Brainy no Forge, vol 05, 09 e 10. 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 tema escuro do Material Design define o texto principal em 87% de branco: Material Design, Dark theme.
- Publicado originalmente como três carrosséis na UX Brainy: O acento que funciona no branco pode desaparecer no dark mode, Um acento para o modo claro e o escuro só funciona no meio-termo e O dark mode não precisa de texto em branco puro.
Want a dark theme designed and tested for your own product, not borrowed from the light one? Our team designs interfaces that hold up in both themes.
Get Started
