UI Color State Generator
Enter a base color and get a set of five UI states: default, hover, active, focus, and disabled. Each state is derived by adjusting the base color's lightness and saturation. Copy individual HEX values or the complete CSS custom properties block.
CSS Custom Properties
How States Are Calculated
- Default
- The base color as-is.
- Hover
- Slightly lighter (+8% L) and more saturated (+5% S). Creates a brighter, more vibrant feel on mouse-over.
- Active
- Darker (−10% L). Gives the pressed-button feedback of depth.
- Focus
- Slightly lighter (+5% L) and more saturated (+10% S). Often used alongside a focus ring to indicate keyboard navigation.
- Disabled
- Significantly desaturated (−40% S) and lighter (+20% L). Communicates that the element is not interactive.
How to Use the CSS Output
The CSS block defines custom properties you can paste into your stylesheet's :root selector. Then reference them on your button element:
.btn { background: var(--btn-default); }
.btn:hover { background: var(--btn-hover); }
.btn:active { background: var(--btn-active); }
.btn:focus-visible { background: var(--btn-focus); outline: 2px solid var(--btn-focus); }
.btn:disabled { background: var(--btn-disabled); }