Criado em 07/22/2025 16:56
Semantic React Design Tokens
- JSX Purple#937dc2
- Hook Green#4ade80
- Component Beige#fff3e2
- State Black#212121
- Render Sky#b2e0ff
- Theme Silver#ececec
A paleta consiste em cores Luz, Escuro. Cores de destaque Component Beige #fff3e2 e Render Sky #b2e0ff. A paleta tem Legal, Neutro temperatura de cores.
Em luminosidade, a paleta vai de #212121 (mais escuro) a #FFF3E2 (mais claro). A faixa de luminosidade é ampla.
Saturação mista — tons suaves e acentos mais vivos.
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.
Códigos HEX (ordenados): #212121, #4ADE80, #937DC2, #B2E0FF, #ECECEC, #FFF3E2
A paleta Semantic React Design Tokens tem uma combinação de cores de códigos de 6:
HEX: #937dc2, RGB: (147, 125, 194); HEX: #4ade80, RGB: (74, 222, 128); HEX: #fff3e2, RGB: (255, 243, 226)
HEX: #212121, RGB: (33, 33, 33); HEX: #b2e0ff, RGB: (178, 224, 255); HEX: #ececec, RGB: (236, 236, 236)
Versão simplificada das cores da paleta
Sombra de mediumpurple, Sombra de mediumspringgreen, Matiz de oldlace, Sombra de Preto, Sombra de lightskyblue, Matiz de whitesmoke
O esquema de cores foi criado por colorday
Códigos de cores na paleta
Semantic React Design Tokens códigos de cores HEX, informações RGB na tabela
| Cor | HEX | RGB | Nome | nome alternativo |
| #937dc2 | #937dc2 | RGB(147, 125, 194) | JSX Purple | — |
| #4ade80 | #4ade80 | RGB(74, 222, 128) | Hook Green | — |
| #fff3e2 | #fff3e2 | RGB(255, 243, 226) | Component Beige | — |
| #212121 | #212121 | RGB(33, 33, 33) | State Black | Lead |
| #b2e0ff | #b2e0ff | RGB(178, 224, 255) | Render Sky | — |
| #ececec | #ececec | RGB(236, 236, 236) | Theme Silver | — |
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 |
#4ade80 | #fff3e2 | 1.59 |
#4ade80 | #b2e0ff | 1.24 |
#4ade80 | #ececec | 1.47 |
#fff3e2 | #b2e0ff | 1.27 |
#fff3e2 | #ececec | 1.07 |
#b2e0ff | #ececec | 1.18 |
Paleta de imagens Semantic React Design Tokens png
Exportar paleta
Baixe a "Semantic React Design Tokens" em vários formatos para integração perfeita em seus projetos de design.
Formatos disponíveis: