Button State Generator

Generate every button state from one colour

A button is not really one style but several, its normal, hover, active and disabled states, and they all need to relate sensibly to each other to feel right. This generator takes a single base colour and produces the complete CSS for all of those states at once, so your button responds correctly and predictably to interaction from just one input. That saves defining four related colours by hand and getting the relationships between them consistent.

Why states matter

A button that does not visibly change on hover feels broken and unresponsive; one whose disabled state looks identical to its active state actively misleads the user into clicking something that will not work. The states are precisely how a button communicates that it is interactive and what it will do when pressed. Deriving them all from one base colour, a slightly darker hover, a pressed-looking active, a muted greyed disabled, keeps them consistent with each other and saves picking four colours by hand and hoping they harmonise.

Copy the full ruleset

It runs entirely in your browser, so nothing you enter is uploaded and the generated code is yours to paste straight into a project. Because it works client-side, you can iterate freely, regenerating as often as you like without a round trip to any server.

Related tools

• Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
• Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
• Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
• Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.