Design System Component Guide
- Primary Indigo#6366f1
- Secondary Coral#fb7185
- Surface Cream#fff7ed
- Border Fog#f5f5f5
- Text Graphite#1f2937
- Interactive Yellow#fde047
- Muted Gray#cbd5e1
Criado em 06/28/2025 20:29
A paleta consiste em cores Claro, Escuro. Cores de destaque Primary Indigo #6366f1 e Surface Cream #fff7ed. A paleta tem Frio, Quente, Neutro temperatura de cores.
Em luminosidade, a paleta vai de #1F2937 (mais escuro) a #FFF7ED (mais claro). A faixa de luminosidade é ampla.
A saturação global parece vívida (croma alto) — 57% 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 (3 de 7).
Códigos HEX (ordenados): #1F2937, #6366F1, #CBD5E1, #F5F5F5, #FB7185, #FDE047, #FFF7ED
A paleta Design System Component Guide combina 7 códigos de cor:
HEX: #6366f1, RGB: (99, 102, 241); HEX: #fb7185, RGB: (251, 113, 133); HEX: #fff7ed, RGB: (255, 247, 237)
HEX: #f5f5f5, RGB: (245, 245, 245); HEX: #1f2937, RGB: (31, 41, 55); HEX: #fde047, RGB: (253, 224, 71)
HEX: #cbd5e1, RGB: (203, 213, 225)
Versão simplificada das cores da paleta
Tom escuro de Azul-ardósia-médio, Tom escuro de Coral-claro, Tom escuro de Branco-floral, Fumaça-branca, Tom claro de Preto, Tom claro de Dourado, Tom claro de Cinza-claro
O esquema de cores foi criado por raccoon
Códigos de cores na paleta
Design System Component Guide códigos de cores HEX, informações RGB na tabela
| Cor | HEX | RGB | Nome | nome alternativo |
|---|---|---|---|---|
| #6366f1 | #6366f1 | RGB(99, 102, 241) | Primary Indigo | — |
| #fb7185 | #fb7185 | RGB(251, 113, 133) | Secondary Coral | — |
| #fff7ed | #fff7ed | RGB(255, 247, 237) | Surface Cream | Fatback |
| #f5f5f5 | #f5f5f5 | RGB(245, 245, 245) | Border Fog | Whitesmoke |
| #1f2937 | #1f2937 | RGB(31, 41, 55) | Text Graphite | — |
| #fde047 | #fde047 | RGB(253, 224, 71) | Interactive Yellow | — |
| #cbd5e1 | #cbd5e1 | RGB(203, 213, 225) | Muted Gray | — |
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 |
|---|---|---|
#6366f1 | #fb7185 | 1.65 |
#fb7185 | #cbd5e1 | 1.81 |
#fff7ed | #f5f5f5 | 1.02 |
#fff7ed | #fde047 | 1.24 |
#fff7ed | #cbd5e1 | 1.39 |
#f5f5f5 | #fde047 | 1.2 |
Paleta de imagens Design System Component Guide png
Exportar paleta
Baixe a "Design System Component Guide" em vários formatos para integração perfeita em seus projetos de design.
Formatos disponíveis: