Interactive Web App UI Tokens
- Click Coral#fb7185
- Hover Indigo#6366f1
- Input Cream#fef9c3
- Transition Teal#14b8a6
- Form Shadow#9ca3af
- Field Mist#f3f4f6
- CTA Yellow#fcd34d
Criado em 06/27/2025 11:01
A paleta consiste em cores Claro. Cores de destaque Hover Indigo #6366f1 e Input Cream #fef9c3. A paleta tem Quente, Frio, Neutro temperatura de cores.
Em luminosidade, a paleta vai de #6366F1 (mais escuro) a #FEF9C3 (mais claro). A faixa de luminosidade é moderada.
A saturação global parece vívida (croma alto) — 71% 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 quente (3 de 7).
Códigos HEX (ordenados): #14B8A6, #6366F1, #9CA3AF, #F3F4F6, #FB7185, #FCD34D, #FEF9C3
A paleta Interactive Web App UI Tokens combina 7 códigos de cor:
HEX: #fb7185, RGB: (251, 113, 133); HEX: #6366f1, RGB: (99, 102, 241); HEX: #fef9c3, RGB: (254, 249, 195)
HEX: #14b8a6, RGB: (20, 184, 166); HEX: #9ca3af, RGB: (156, 163, 175); HEX: #f3f4f6, RGB: (243, 244, 246)
HEX: #fcd34d, RGB: (252, 211, 77)
Versão simplificada das cores da paleta
Tom escuro de Coral-claro, Tom escuro de Azul-ardósia-médio, Tom escuro de Chiffon-limão, Tom escuro de Verde-mar-claro, Tom escuro de Cinza-escuro, Tom escuro de Fumaça-branca, Tom claro de Dourado
O esquema de cores foi criado por colorslib
Códigos de cores na paleta
Interactive Web App UI Tokens códigos de cores HEX, informações RGB na tabela
| Cor | HEX | RGB | Nome | nome alternativo |
|---|---|---|---|---|
| #fb7185 | #fb7185 | RGB(251, 113, 133) | Click Coral | — |
| #6366f1 | #6366f1 | RGB(99, 102, 241) | Hover Indigo | — |
| #fef9c3 | #fef9c3 | RGB(254, 249, 195) | Input Cream | — |
| #14b8a6 | #14b8a6 | RGB(20, 184, 166) | Transition Teal | — |
| #9ca3af | #9ca3af | RGB(156, 163, 175) | Form Shadow | — |
| #f3f4f6 | #f3f4f6 | RGB(243, 244, 246) | Field Mist | — |
| #fcd34d | #fcd34d | RGB(252, 211, 77) | CTA Yellow | — |
Contraste da paleta de cores
12 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 |
|---|---|---|
#fb7185 | #6366f1 | 1.65 |
#fb7185 | #14b8a6 | 1.08 |
#fb7185 | #9ca3af | 1.06 |
#fb7185 | #fcd34d | 1.86 |
#6366f1 | #14b8a6 | 1.79 |
#6366f1 | #9ca3af | 1.75 |
Paleta de imagens Interactive Web App UI Tokens png
Exportar paleta
Baixe a "Interactive Web App UI Tokens" em vários formatos para integração perfeita em seus projetos de design.
Formatos disponíveis: