Are there any rules of thumb or formulas for the different color shades when creating non-default buttons?

Default buttons have 4 states, Enabled, Focused, Pressed, and Disabled. These all tend to have built in default effects that are some shade of grey that are recognized by the user to mean their respective states(Like light grey tends to signify an unpressable button, etc). I'm interested in finding a tool or formula that I can apply to any color to achieve these distinctions.

1 Answer 1


I always do this manually as it is hard to find a balance between something that has enough tonal and visual contrast, but still is WCAG 2.0 level AA color contrast compliant.

The bootstrap buttons are always a good starting point for getting a feel for tonal differences http://getbootstrap.com/css/#buttons

Color wheel is a useful tool https://color.adobe.com/create/color-wheel/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.