Loading...
Created at 06/28/2025 20:44
Light Mode UI Dev Toolkit
- Surface Cream#fafafa
- Primary Indigo#4f46e5
- Accent Mint#4ade80
- Warning Gold#facc15
- Danger Coral#f87171
- Text Slate#475569
- Border Fog#e5e7eb
The palette consists of Light, Semi dark colors. Accent colors Primary Indigo #4f46e5 and Warning Gold #facc15. Palette has Neutral, Cool, Warm colors temperature.
By lightness, this palette runs from #475569 (darkest) to #FAFAFA (lightest). The lightness range is wide.
Overall saturation feels vivid (higher chroma).
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): #475569, #4ADE80, #4F46E5, #E5E7EB, #F87171, #FACC15, #FAFAFA
Palette Light Mode UI Dev Toolkit has combination of 7 codes colors:
HEX: #fafafa, RGB: (250, 250, 250); HEX: #4f46e5, RGB: (79, 70, 229); HEX: #4ade80, RGB: (74, 222, 128)
HEX: #facc15, RGB: (250, 204, 21); HEX: #f87171, RGB: (248, 113, 113); HEX: #475569, RGB: (71, 85, 105)
HEX: #e5e7eb, RGB: (229, 231, 235)
Simplified version of palette colors
Shade of whitesmoke, Tint of slateblue, Shade of mediumspringgreen, Tint of gold, Tint of lightcoral, Shade of darkslateblue, Shade of gainsboro
Color scheme was created by colorday
Colors codes in palette
Light Mode UI Dev Toolkit color codes HEX, RGB information in table
| Color | HEX | RGB | Name | Alternative name |
| #fafafa | #fafafa | RGB(250, 250, 250) | Surface Cream | Dr. White |
| #4f46e5 | #4f46e5 | RGB(79, 70, 229) | Primary Indigo | — |
| #4ade80 | #4ade80 | RGB(74, 222, 128) | Accent Mint | — |
| #facc15 | #facc15 | RGB(250, 204, 21) | Warning Gold | — |
| #f87171 | #f87171 | RGB(248, 113, 113) | Danger Coral | — |
| #475569 | #475569 | RGB(71, 85, 105) | Text Slate | — |
| #e5e7eb | #e5e7eb | RGB(229, 231, 235) | Border Fog | — |
Color Palette Contrast
9 color pairs have low contrast and need improvement which may impact readability.
| Text Color | Background Color | Contrast Ratio |
#fafafa | #4ade80 | 1.66 |
#fafafa | #facc15 | 1.46 |
#fafafa | #e5e7eb | 1.18 |
#4f46e5 | #475569 | 1.2 |
#4ade80 | #facc15 | 1.13 |
#4ade80 | #f87171 | 1.58 |
Image palette Light Mode UI Dev Toolkit png
Export Palette
Download the "Light Mode UI Dev Toolkit" in multiple formats for seamless integration into your design projects.
Available formats: