Creato a 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
La tavolozza è composta da Leggero, Buio colori. Colori accentati Component Beige #fff3e2 e Render Sky #b2e0ff. La tavolozza ha la temperatura del colore Freddo, Neutro.
Per luminosità, la tavolozza va da #212121 (più scuro) a #FFF3E2 (più chiaro). L’intervallo di luminosità è ampio.
Saturazione mista — alcuni campioni smorzati e accenti più vivaci.
Alcune coppie di tonalità sono vicine a posizioni complementari — si può leggere come contrasto complementare (euristica).
Complessivamente la temperatura tende al freddo.
Codici HEX (ordinati): #212121, #4ADE80, #937DC2, #B2E0FF, #ECECEC, #FFF3E2
La tavolozza Semantic React Design Tokens ha una combinazione di colori dei codici 6:
ESADECIMALE: #937dc2, RGB: (147, 125, 194); ESADECIMALE: #4ade80, RGB: (74, 222, 128); ESADECIMALE: #fff3e2, RGB: (255, 243, 226)
ESADECIMALE: #212121, RGB: (33, 33, 33); ESADECIMALE: #b2e0ff, RGB: (178, 224, 255); ESADECIMALE: #ececec, RGB: (236, 236, 236)
Versione semplificata della tavolozza dei colori
Ombra di mediumpurple, Ombra di mediumspringgreen, Tonalità di oldlace, Ombra di Nero, Ombra di lightskyblue, Tonalità di whitesmoke
La combinazione di colori è stata creata da colorday
Codici colori nella tavolozza
Semantic React Design Tokens codici colore HEX, informazioni RGB in tabella
| Colore | ESADECIMALE | 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 | — |
Contrasto della palette di colori
6 coppie di colori hanno un basso contrasto e necessitano di miglioramenti, il che può influire sulla leggibilità.
| Colore del testo | Colore di sfondo | Rapporto di contrasto |
#4ade80 | #fff3e2 | 1.59 |
#4ade80 | #b2e0ff | 1.24 |
#4ade80 | #ececec | 1.47 |
#fff3e2 | #b2e0ff | 1.27 |
#fff3e2 | #ececec | 1.07 |
#b2e0ff | #ececec | 1.18 |
Tavolozza immagini Semantic React Design Tokens png
Esporta tavolozza
Scarica la "Semantic React Design Tokens" in più formati per un'integrazione senza interruzioni nei tuoi progetti di design.
Formati disponibili: