Paletas de cores para sites
Doze conjuntos que sobrevivem a um layout real: faixa suficiente para um fundo, uma superfície, um texto e um acento, sem duas cores disputando o mesmo papel.
- Astro
Texto legível sobre #1e1e76: #FFFFFF
- Moon
Texto legível sobre #e7e2f3: #111827
- Luna Of Gale
Texto legível sobre #d6e4f5: #111827
- Ithriel
Texto legível sobre #d1c7e1: #111827
- Moon Stone
Texto legível sobre #a6c5d9: #111827
- Astro Novalite ♡
Texto legível sobre #1e1f2a: #FFFFFF
- What Have You Done?
Texto legível sobre #e63746: #111827
- 男性向け Manly
Texto legível sobre #1e3b71: #FFFFFF
- Astro
Texto legível sobre #1a1f3d: #FFFFFF
- Deep Winter
Texto legível sobre #3a498d: #FFFFFF
- Powder Ash
Texto legível sobre #bbc9c1: #111827
- Diamond
Texto legível sobre #badae9: #111827
Como usar em um site
- Defina os papéis antes das cores: fundo, superfície, borda, texto e acento. Uma paleta que não preenche os cinco precisa de um neutro, não de ser descartada.
- Use a cor mais clara nas áreas grandes e a mais escura no texto. Os tons médios ficam em bordas, estados hover e texto secundário.
- Reserve o acento para o que dá para clicar. Se tudo se destaca, nada se destaca.
A cor de texto sob cada paleta é a que alcança maior contraste — quase preto ou branco — contra a primeira cor dela. Confira qualquer outra combinação antes de usar em texto de leitura.