Created at 07/28/2025 11:12
UI State Transition Engine
- Active Teal#5fefc4
- Idle Silver#c0c0c0
- Hover Gold#ffd670
- Pressed Plum#925e9f
- Disabled Ash#e0e0e0
- Focus Violet#a88beb
- Alert Crimson#ef233c
The palette consists of Light, Semi dark colors. Accent colors Hover Gold #ffd670 and Focus Violet #a88beb. Palette has Cool, Neutral, Warm colors temperature.
By lightness, this palette runs from #925E9F (darkest) to #E0E0E0 (lightest). The lightness range is moderate.
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): #5FEFC4, #925E9F, #A88BEB, #C0C0C0, #E0E0E0, #EF233C, #FFD670
Palette UI State Transition Engine has combination of 7 codes colors:
HEX: #5fefc4, RGB: (95, 239, 196); HEX: #c0c0c0, RGB: (192, 192, 192); HEX: #ffd670, RGB: (255, 214, 112)
HEX: #925e9f, RGB: (146, 94, 159); HEX: #e0e0e0, RGB: (224, 224, 224); HEX: #a88beb, RGB: (168, 139, 235)
HEX: #ef233c, RGB: (239, 35, 60)
Simplified version of palette colors
Tint of aquamarine, Silver, Shade of gold, Tint of mediumorchid, Shade of gainsboro, Shade of mediumpurple, Shade of crimson
Color scheme was created by palettespicker
Colors codes in palette
UI State Transition Engine color codes HEX, RGB information in table
| Color | HEX | RGB | Name | Alternative name |
| #5fefc4 | #5fefc4 | RGB(95, 239, 196) | Active Teal | — |
| #c0c0c0 | #c0c0c0 | RGB(192, 192, 192) | Idle Silver | Silver |
| #ffd670 | #ffd670 | RGB(255, 214, 112) | Hover Gold | — |
| #925e9f | #925e9f | RGB(146, 94, 159) | Pressed Plum | — |
| #e0e0e0 | #e0e0e0 | RGB(224, 224, 224) | Disabled Ash | Gray88 |
| #a88beb | #a88beb | RGB(168, 139, 235) | Focus Violet | — |
| #ef233c | #ef233c | RGB(239, 35, 60) | Alert Crimson | — |
Color Palette Contrast
12 color pairs have low contrast and need improvement which may impact readability.
| Text Color | Background Color | Contrast Ratio |
#5fefc4 | #c0c0c0 | 1.26 |
#5fefc4 | #ffd670 | 1.03 |
#5fefc4 | #e0e0e0 | 1.08 |
#5fefc4 | #a88beb | 1.93 |
#c0c0c0 | #ffd670 | 1.3 |
#c0c0c0 | #e0e0e0 | 1.37 |
Image palette UI State Transition Engine png
Export Palette
Download the "UI State Transition Engine" in multiple formats for seamless integration into your design projects.
Available formats: