Web Components Design System for Open UI
- Component Frame White#f9fafb
- State Flow Teal#00c2a8
- Atomic Indigo#6a63ff
- Reusable Gray#d1d5db
- Slot Highlight Pink#f48fb1
- Variant Yellow#fce77d
Criado em 07/17/2025 08:24
A paleta consiste em cores Claro. Cores de destaque State Flow Teal #00c2a8 e Variant Yellow #fce77d. A paleta tem Neutro, Frio, Quente temperatura de cores.
Em luminosidade, a paleta vai de #6A63FF (mais escuro) a #F9FAFB (mais claro). A faixa de luminosidade é moderada.
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 (3 de 6).
Códigos HEX (ordenados): #00C2A8, #6A63FF, #D1D5DB, #F48FB1, #F9FAFB, #FCE77D
A paleta Web Components Design System for Open UI combina 6 códigos de cor:
HEX: #f9fafb, RGB: (249, 250, 251); HEX: #00c2a8, RGB: (0, 194, 168); HEX: #6a63ff, RGB: (106, 99, 255)
HEX: #d1d5db, RGB: (209, 213, 219); HEX: #f48fb1, RGB: (244, 143, 177); HEX: #fce77d, RGB: (252, 231, 125)
Versão simplificada das cores da paleta
Tom claro de Fumaça-branca, Tom escuro de Água-marinha-média, Tom escuro de Azul-ardósia-médio, Tom claro de Cinza-claro, Tom claro de Vermelho-violeta-pálido, Tom claro de Cáqui
O esquema de cores foi criado por hex
Códigos de cores na paleta
Web Components Design System for Open UI códigos de cores HEX, informações RGB na tabela
| Cor | HEX | RGB | Nome | nome alternativo |
|---|---|---|---|---|
| #f9fafb | #f9fafb | RGB(249, 250, 251) | Component Frame White | — |
| #00c2a8 | #00c2a8 | RGB(0, 194, 168) | State Flow Teal | — |
| #6a63ff | #6a63ff | RGB(106, 99, 255) | Atomic Indigo | — |
| #d1d5db | #d1d5db | RGB(209, 213, 219) | Reusable Gray | — |
| #f48fb1 | #f48fb1 | RGB(244, 143, 177) | Slot Highlight Pink | — |
| #fce77d | #fce77d | RGB(252, 231, 125) | Variant Yellow | — |
Contraste da paleta de cores
10 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 |
|---|---|---|
#f9fafb | #d1d5db | 1.41 |
#f9fafb | #fce77d | 1.19 |
#00c2a8 | #6a63ff | 1.91 |
#00c2a8 | #d1d5db | 1.53 |
#00c2a8 | #f48fb1 | 1.01 |
#00c2a8 | #fce77d | 1.81 |
Paleta de imagens Web Components Design System for Open UI png
Exportar paleta
Baixe a "Web Components Design System for Open UI" em vários formatos para integração perfeita em seus projetos de design.
Formatos disponíveis: