Criado em 07/04/2025 10:04
Design Token Web Components
- Schema Peach#ffe5b4
- Atomic Blue#4fb3ff
- Slot Soft Gray#efefef
- Hierarchy Black#222222
- Cascade Seafoam#b0ffdc
- Render Slate#5e6472
A paleta consiste em cores Luz, Escuro, Semi escuro. Cores de destaque Schema Peach #ffe5b4 e Atomic Blue #4fb3ff. A paleta tem Quente, Frio, Neutro temperatura de cores.
Em luminosidade, a paleta vai de #222222 (mais escuro) a #EFEFEF (mais claro). A faixa de luminosidade é ampla.
Saturação mista — 3 suaves e 3 vívidas em 6 cores.
Alguns pares de matizes estão perto de posições complementares — pode ler-se como contraste complementar (heurística).
No geral, a temperatura tende para o frio (3 de 6).
Códigos HEX (ordenados): #222222, #4FB3FF, #5E6472, #B0FFDC, #EFEFEF, #FFE5B4
A paleta Design Token Web Components tem uma combinação de cores de códigos de 6:
HEX: #ffe5b4, RGB: (255, 229, 180); HEX: #4fb3ff, RGB: (79, 179, 255); HEX: #efefef, RGB: (239, 239, 239)
HEX: #222222, RGB: (34, 34, 34); HEX: #b0ffdc, RGB: (176, 255, 220); HEX: #5e6472, RGB: (94, 100, 114)
Versão simplificada das cores da paleta
Sombra de moccasin, Sombra de deepskyblue, Matiz de whitesmoke, Sombra de Preto, Sombra de aquamarine, Matiz de dimgrey
O esquema de cores foi criado por colorhunt
Códigos de cores na paleta
Design Token Web Components códigos de cores HEX, informações RGB na tabela
| Cor | HEX | RGB | Nome | nome alternativo |
|---|---|---|---|---|
| #ffe5b4 | #ffe5b4 | RGB(255, 229, 180) | Schema Peach | Mouse Nose |
| #4fb3ff | #4fb3ff | RGB(79, 179, 255) | Atomic Blue | — |
| #efefef | #efefef | RGB(239, 239, 239) | Slot Soft Gray | — |
| #222222 | #222222 | RGB(34, 34, 34) | Hierarchy Black | Black Out |
| #b0ffdc | #b0ffdc | RGB(176, 255, 220) | Cascade Seafoam | — |
| #5e6472 | #5e6472 | RGB(94, 100, 114) | Render Slate | — |
Contraste da Paleta de Cores
6 pares de cores têm contraste baixo e precisam de melhorias, o que pode afetar a legibilidade.
| Cor do texto | Cor de fundo | Taxa de contraste |
|---|---|---|
#ffe5b4 | #4fb3ff | 1.85 |
#ffe5b4 | #efefef | 1.06 |
#ffe5b4 | #b0ffdc | 1.06 |
#4fb3ff | #efefef | 1.97 |
#4fb3ff | #b0ffdc | 1.97 |
#efefef | #b0ffdc | 1 |
Paleta de imagens Design Token Web Components png
Exportar paleta
Baixe a "Design Token Web Components" em vários formatos para integração perfeita em seus projetos de design.
Formatos disponíveis: