Created at 06/27/2025 10:59
Headless UI System Designer
- Dropdown Charcoal#1e1e1e
- Disclosure Cream#fff7ed
- Focus Ring Blue#3b82f6
- Panel Fog#f5f5f5
- Accordion Teal#2dd4bf
- Toggle Mauve#c084fc
- Checkbox Rose#f43f5e
The palette consists of Dark, Light colors. Accent colors Disclosure Cream #fff7ed and Toggle Mauve #c084fc. Palette has Neutral, Cool, Warm colors temperature.
By lightness, this palette runs from #1E1E1E (darkest) to #FFF7ED (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): #1E1E1E, #2DD4BF, #3B82F6, #C084FC, #F43F5E, #F5F5F5, #FFF7ED
Palette Headless UI System Designer has combination of 7 codes colors:
HEX: #1e1e1e, RGB: (30, 30, 30); HEX: #fff7ed, RGB: (255, 247, 237); HEX: #3b82f6, RGB: (59, 130, 246)
HEX: #f5f5f5, RGB: (245, 245, 245); HEX: #2dd4bf, RGB: (45, 212, 191); HEX: #c084fc, RGB: (192, 132, 252)
HEX: #f43f5e, RGB: (244, 63, 94)
Simplified version of palette colors
Shade of Black, Tint of floralwhite, Tint of dodgerblue, Tint of turquoise, Tint of violet, Tint of indianred
Color scheme was created by colorhunt
Colors codes in palette
Headless UI System Designer color codes HEX, RGB information in table
| Color | HEX | RGB | Name | Alternative name |
| #1e1e1e | #1e1e1e | RGB(30, 30, 30) | Dropdown Charcoal | — |
| #fff7ed | #fff7ed | RGB(255, 247, 237) | Disclosure Cream | Fatback |
| #3b82f6 | #3b82f6 | RGB(59, 130, 246) | Focus Ring Blue | — |
| #f5f5f5 | #f5f5f5 | RGB(245, 245, 245) | Panel Fog | White Smoke |
| #2dd4bf | #2dd4bf | RGB(45, 212, 191) | Accordion Teal | — |
| #c084fc | #c084fc | RGB(192, 132, 252) | Toggle Mauve | — |
| #f43f5e | #f43f5e | RGB(244, 63, 94) | Checkbox Rose | — |
Color Palette Contrast
9 color pairs have low contrast and need improvement which may impact readability.
| Text Color | Background Color | Contrast Ratio |
#fff7ed | #f5f5f5 | 1.02 |
#fff7ed | #2dd4bf | 1.75 |
#3b82f6 | #2dd4bf | 1.97 |
#3b82f6 | #c084fc | 1.39 |
#3b82f6 | #f43f5e | 1 |
#f5f5f5 | #2dd4bf | 1.7 |
Image palette Headless UI System Designer png
Export Palette
Download the "Headless UI System Designer" in multiple formats for seamless integration into your design projects.
Available formats: