Every interactive element on your website has multiple visual states. A button is not one color. It is at least five: default, hover, active (pressed), focus (keyboard), and disabled. A link adds visited. An input adds valid, invalid, and readonly. Planning these states as part of your color system prevents the ad-hoc decisions that lead to inconsistency.
The Darkening Pattern
The most common state pattern: darken on hover, darken more on active. If your primary CTA is #4f46e5, hover might be #3730a3 (12% darker), and active might be #312e81 (20% darker). This creates a natural "pushing in" metaphor that users intuitively understand.
Focus Is Not Hover
Focus and hover are different states with different purposes. Hover is a mouse-only signal. Focus is a keyboard navigation signal. They can share some visual treatment, but focus must have a distinct, visible indicator (typically an outline or ring) that meets WCAG 2.2 requirements. Use your primary color for the focus ring, distinct from the hover state.
Disabled States
Disabled elements need to communicate "this is not interactive" without disappearing entirely. The convention is reduced opacity (40 to 50%) or a desaturated version of the default color. Disabled elements are exempt from contrast requirements (they should not look interactive), but they should still be visible enough that users know the element exists.
Loading States
Loading states often use a pulsing or shimmer animation. The color should be a light, muted version of the element's default background, using CSS color-mix() or explicit light variants from your palette. Loading states should feel calm, not urgent.
Planning States in Your Palette
For each Primary and Supporting color in your PaletteRx palette, define: hover (darken 10 to 15%), active (darken 20%), focus (outline using the color at full strength), and disabled (the color at 40% opacity or mixed with gray). Document these as part of your color system.