Colors
Button State Color Generator
Used by developers, writers, and creators worldwide.
A button state color generator turns one base button color into the full set of states a real interactive button needs: default, hover, active (pressed), disabled, and a focus ring. Paste your base hex and it darkens the color a step for hover and a further step for the pressed state, desaturates it toward a muted grey for the disabled state, and lightens it into a soft tint for the focus ring. This gives every interactive state a clear, consistent visual relationship instead of arbitrary one-off colors. Developers and designers use it to fill in component styles, define design tokens for a button system, or keep hover and active feedback feeling deliberate across a UI. Each state is returned as a labelled, paste-ready hex code that drops straight into CSS pseudo-classes like :hover, :active, and :disabled. Build a complete, polished button in one pass.
Read the complete guide — 5 min read
Loading usage…
Free forever — no account required
How to use
- Choose your options above
- Click Generate
- Copy your result
Detailed instructions
- Paste your base button hex color.
- Click Generate to derive every interactive state.
- Map each color to :hover, :active, and :disabled.
- Use the focus ring tint for keyboard focus styles.
Use Cases
- •Filling in hover and active styles for a button
- •Defining button design tokens for a component library
- •Keeping interactive feedback consistent across a UI
- •Generating a disabled state that reads as inactive
- •Choosing a focus ring tint that matches the button
Tips
- →Apply the hover color on :hover and active on :active.
- →Use the disabled color with reduced cursor affordance.
- →Make the focus ring clearly visible for keyboard users.
- →Keep text contrast above AA across all states.
FAQ
how are the hover and active colors chosen
The generator darkens the base color a small step for hover and a larger step for the pressed active state. This mirrors the common convention that buttons get slightly darker as the user engages with them.
why is the disabled color desaturated
A disabled button should read as inactive, so the color is shifted toward a muted grey and lightened. That removes the visual pull of the brand color and signals the control cannot be used.
can i use the focus ring for accessibility
Yes. The focus ring tint is derived from your base color so it stays on-brand while marking keyboard focus. Ensure it has enough contrast against the surrounding background to be clearly visible.
You might also like
Popular tools from other categories that share themes with this one.