Dopely Colors
Interaction Studio

State Generator

Generate professional, accessible interaction states for buttons and components in seconds.

!!
Accessibility
3.68:1 Ratio

Interactive States

DefaultBase
#3b82f6
Hover+40% Dark
#0d70e1
Active+80% Dark
#005fcd
FocusRing 4px
#3b82f6
Disabled40% Opacity
rgb(109 131 200 / 0.4)
UI Component Preview
Design Tip
"When designing accessible buttons, ensure the contrast ratio exceeds 4.5:1. For dark mode, darkening the base color often makes it 'muddy'—consider shifting hue or increasing brightness for a more vibrant feel."

State & Shade Generator

Automatically generate hover, active, and disabled states for your design system. Consistent interaction feedback across all components.

Algorithmic State Generation

Don't pick hover colors manually. Our system uses consistent lightness and saturation shifts to generate predictable interactive states (Hover, Pressed, Focus, Disabled) for any base color, ensuring your entire UI feels uniform.