Created at 03/27/2026 21:14
Design System Tokens Semantic Scaling UI Colors
- Primary Blue#2563eb
- Secondary Purple#7c3aed
- Success Green#16a34a
- Danger Red#dc2626
- Warning Amber#f59e0b
- Neutral Gray#e5e7eb
- Background White#ffffff
- Text Dark#0f172a
The palette consists of Semi dark, Light, Dark colors. Accent colors Secondary Purple #7c3aed and Warning Amber #f59e0b. Palette has Cool, Warm, Neutral colors temperature.
By lightness, this palette runs from #0F172A (darkest) to #FFFFFF (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): #0F172A, #16A34A, #2563EB, #7C3AED, #DC2626, #E5E7EB, #F59E0B, #FFFFFF
Palette Design System Tokens Semantic Scaling UI Colors has combination of 8 codes colors:
HEX: #2563eb, RGB: (37, 99, 235); HEX: #7c3aed, RGB: (124, 58, 237); HEX: #16a34a, RGB: (22, 163, 74)
HEX: #dc2626, RGB: (220, 38, 38); HEX: #f59e0b, RGB: (245, 158, 11); HEX: #e5e7eb, RGB: (229, 231, 235)
HEX: #ffffff, RGB: (255, 255, 255); HEX: #0f172a, RGB: (15, 23, 42)
Simplified version of palette colors
Tint of royalblue, Shade of blueviolet, Tint of mediumseagreen, Shade of crimson, Tint of Orange, Shade of gainsboro, White, Shade of Black
Color scheme was created by colorhunt
Colors codes in palette
Design System Tokens Semantic Scaling UI Colors color codes HEX, RGB information in table
| Color | HEX | RGB | Name | Alternative name |
| #2563eb | #2563eb | RGB(37, 99, 235) | Primary Blue | — |
| #7c3aed | #7c3aed | RGB(124, 58, 237) | Secondary Purple | — |
| #16a34a | #16a34a | RGB(22, 163, 74) | Success Green | — |
| #dc2626 | #dc2626 | RGB(220, 38, 38) | Danger Red | — |
| #f59e0b | #f59e0b | RGB(245, 158, 11) | Warning Amber | — |
| #e5e7eb | #e5e7eb | RGB(229, 231, 235) | Neutral Gray | — |
| #ffffff | #ffffff | RGB(255, 255, 255) | Background White | White |
| #0f172a | #0f172a | RGB(15, 23, 42) | Text Dark | — |
Color Palette Contrast
9 color pairs have low contrast and need improvement which may impact readability.
| Text Color | Background Color | Contrast Ratio |
#2563eb | #7c3aed | 1.1 |
#2563eb | #16a34a | 1.56 |
#2563eb | #dc2626 | 1.07 |
#7c3aed | #16a34a | 1.72 |
#7c3aed | #dc2626 | 1.17 |
#16a34a | #dc2626 | 1.46 |
Image palette Design System Tokens Semantic Scaling UI Colors png
Export Palette
Download the "Design System Tokens Semantic Scaling UI Colors" in multiple formats for seamless integration into your design projects.
Available formats: