How to Choose Hover Colors: A Guide to Lighter & Darker Hex Variations

A crisp hover communicates interactivity. Here’s how to choose the right variation every time.

Rules of thumb

• On dark backgrounds, lighten foreground elements; on light backgrounds, darken them.
• Change by 5–12% lightness for hover; 10–20% for pressed.
• Keep contrast at least 3:1 for interactive UI.

Use HexTints in Lightness mode for predictable steps.