Hero Roster Dashboard UI
- Hero Tag Cyan#22d3ee
- Class Color Red#f87171
- Ability Icon Yellow#facc15
- Power Meter Purple#a78bfa
- UI Border Slate#64748b
- Dark Mode Panel#0f172a
Criado em 06/09/2025 19:39
A paleta consiste em cores Claro, Semi escuro, Escuro. Cores de destaque Ability Icon Yellow #facc15 e Power Meter Purple #a78bfa. A paleta tem Frio, Quente temperatura de cores.
Em luminosidade, a paleta vai de #0F172A (mais escuro) a #FACC15 (mais claro). A faixa de luminosidade é ampla.
A saturação global parece vívida (croma alto) — 67% das cores são vívidas.
Algumas cores ficam quase opostas no círculo cromático, dando à paleta um contraste complementar.
No geral, a temperatura tende para o frio (4 de 6).
Códigos HEX (ordenados): #0F172A, #22D3EE, #64748B, #A78BFA, #F87171, #FACC15
A paleta Hero Roster Dashboard UI combina 6 códigos de cor:
HEX: #22d3ee, RGB: (34, 211, 238); HEX: #f87171, RGB: (248, 113, 113); HEX: #facc15, RGB: (250, 204, 21)
HEX: #a78bfa, RGB: (167, 139, 250); HEX: #64748b, RGB: (100, 116, 139); HEX: #0f172a, RGB: (15, 23, 42)
Versão simplificada das cores da paleta
Tom claro de Turquesa-escuro, Tom escuro de Coral-claro, Tom escuro de Dourado, Tom claro de Roxo-médio, Tom escuro de Cinza-ardósia, Tom claro de Preto
O esquema de cores foi criado por hex
Códigos de cores na paleta
Hero Roster Dashboard UI códigos de cores HEX, informações RGB na tabela
| Cor | HEX | RGB | Nome | nome alternativo |
|---|---|---|---|---|
| #22d3ee | #22d3ee | RGB(34, 211, 238) | Hero Tag Cyan | — |
| #f87171 | #f87171 | RGB(248, 113, 113) | Class Color Red | — |
| #facc15 | #facc15 | RGB(250, 204, 21) | Ability Icon Yellow | — |
| #a78bfa | #a78bfa | RGB(167, 139, 250) | Power Meter Purple | — |
| #64748b | #64748b | RGB(100, 116, 139) | UI Border Slate | — |
| #0f172a | #0f172a | RGB(15, 23, 42) | Dark Mode Panel | — |
Contraste da paleta de cores
8 pares de cores têm contraste baixo e precisam de melhorias, o que pode afetar a legibilidade.
| Cor do texto | Cor de fundo | Razão de contraste |
|---|---|---|
#22d3ee | #f87171 | 1.53 |
#22d3ee | #facc15 | 1.18 |
#22d3ee | #a78bfa | 1.5 |
#f87171 | #facc15 | 1.8 |
#f87171 | #a78bfa | 1.01 |
#f87171 | #64748b | 1.72 |
Paleta de imagens Hero Roster Dashboard UI png
Exportar paleta
Baixe a "Hero Roster Dashboard UI" em vários formatos para integração perfeita em seus projetos de design.
Formatos disponíveis: