Button Color Generator

Designer

Why Use the Button Color Generator?

A single brand color is only the starting point for a button, and this button color generator fills in the rest of the states for you. From one base color it creates the default, a darker hover, an even darker active state, a semi-transparent focus ring and a disabled style. It also picks white or near-black label text based on contrast and shows the contrast ratio, so designers and developers can ship consistent, accessible buttons without guessing at hover shades.

How to Use the Button Color Generator

1. Enter your base button color with the picker or by typing a HEX, rgb(), hsl() or CSS color name value.
2. Review the default, hover, active, focus and disabled previews to make sure each state is clearly different from the one before it.
3. Check the automatically chosen text color and the contrast ratio shown; if the ratio is below 4.5:1, try a slightly darker or lighter base color.
4. Click Copy on the CSS output and paste the state rules into your button component or stylesheet.

Best For

• Setting up primary button styles for a design system or component library from a brand color.
• Adding consistent hover and active feedback to call-to-action buttons on a landing page.
• Giving keyboard users a visible, on-brand focus ring that does not rely on the default browser outline.
• Creating a clearly inactive disabled style for form submit buttons while required fields are empty.

Pro Tip

Attach the focus ring to the :focus-visible selector rather than :focus, so keyboard users always see it while mouse clicks do not leave a ring behind. If the generator switches between white and near-black text as you nudge the base color, your color is sitting near the middle of the lightness range; move it clearly darker or lighter so the label stays legible and the brand look stays stable. Keep the hover change small but noticeable, because large jumps can feel like a different button.