Loading...
Created at 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
The palette consists of Light, Semi dark colors. Accent colors Focus Indigo #3d348b and Background Sand #fff8e1. Palette has Neutral, Cool, Warm colors temperature.
By lightness, this palette runs from #4A4A4A (darkest) to #F5F5F5 (lightest). The lightness range is wide.
Saturation is mixed — some muted swatches and some vivid accents.
Some hue pairs sit near complementary positions — you may read this as complementary contrast (loose heuristic).
Overall temperature among swatches leans cool.
HEX codes (sorted): #3D348B, #4A4A4A, #A8DADC, #E63946, #F5F5F5, #FFF8E1
Palette UX-Optimized UI Kit for React has combination of 6 codes colors:
HEX: #f5f5f5, RGB: (245, 245, 245); HEX: #3d348b, RGB: (61, 52, 139); HEX: #e63946, RGB: (230, 57, 70)
HEX: #fff8e1, RGB: (255, 248, 225); HEX: #4a4a4a, RGB: (74, 74, 74); HEX: #a8dadc, RGB: (168, 218, 220)
Simplified version of palette colors
Tint of darkslateblue, Shade of crimson, Shade of cornsilk, Tint of dimgrey, Tint of powderblue
Color scheme was created by hex
Colors codes in palette
UX-Optimized UI Kit for React color codes HEX, RGB information in table
| Color | HEX | RGB | Name | Alternative name |
| #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 | — |
Color Palette Contrast
4 color pairs have low contrast and need improvement which may impact readability.
| Text Color | Background Color | Contrast Ratio |
#f5f5f5 | #fff8e1 | 1.02 |
#f5f5f5 | #a8dadc | 1.4 |
#3d348b | #4a4a4a | 1.14 |
#fff8e1 | #a8dadc | 1.43 |
Image palette UX-Optimized UI Kit for React png
Export Palette
Download the "UX-Optimized UI Kit for React" in multiple formats for seamless integration into your design projects.
Available formats: