Creato a 07/16/2025 11:49
UX-Optimized UI Kit for React
- Component Cream#f5f5f5
- Focus Indigo#3d348b
- CTA Red#e63946
- Background Sand#fff8e1
- Text Gray#4a4a4a
- Surface Green#a8dadc
La tavolozza è composta da Leggero, Semi scuro colori. Colori accentati Focus Indigo #3d348b e Background Sand #fff8e1. La tavolozza ha la temperatura del colore Neutro, Freddo, Caldo.
Per luminosità, la tavolozza va da #4A4A4A (più scuro) a #F5F5F5 (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): #3D348B, #4A4A4A, #A8DADC, #E63946, #F5F5F5, #FFF8E1
La tavolozza UX-Optimized UI Kit for React ha una combinazione di colori dei codici 6:
ESADECIMALE: #f5f5f5, RGB: (245, 245, 245); ESADECIMALE: #3d348b, RGB: (61, 52, 139); ESADECIMALE: #e63946, RGB: (230, 57, 70)
ESADECIMALE: #fff8e1, RGB: (255, 248, 225); ESADECIMALE: #4a4a4a, RGB: (74, 74, 74); ESADECIMALE: #a8dadc, RGB: (168, 218, 220)
Versione semplificata della tavolozza dei colori
Tonalità di darkslateblue, Ombra di crimson, Ombra di cornsilk, Tonalità di dimgrey, Tonalità di powderblue
La combinazione di colori è stata creata da hex
Codici colori nella tavolozza
UX-Optimized UI Kit for React codici colore HEX, informazioni RGB in tabella
| Colore | ESADECIMALE | RGB | Nome | Nome alternativo |
| #f5f5f5 | #f5f5f5 | RGB(245, 245, 245) | Component Cream | White Smoke |
| #3d348b | #3d348b | RGB(61, 52, 139) | Focus Indigo | — |
| #e63946 | #e63946 | RGB(230, 57, 70) | CTA Red | — |
| #fff8e1 | #fff8e1 | RGB(255, 248, 225) | Background Sand | Still Morning |
| #4a4a4a | #4a4a4a | RGB(74, 74, 74) | Text Gray | Gray29 |
| #a8dadc | #a8dadc | RGB(168, 218, 220) | Surface Green | — |
Contrasto della palette di colori
4 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 |
#f5f5f5 | #fff8e1 | 1.02 |
#f5f5f5 | #a8dadc | 1.4 |
#3d348b | #4a4a4a | 1.14 |
#fff8e1 | #a8dadc | 1.43 |
Tavolozza immagini UX-Optimized UI Kit for React png
Esporta tavolozza
Scarica la "UX-Optimized UI Kit for React" in più formati per un'integrazione senza interruzioni nei tuoi progetti di design.
Formati disponibili: