complementary palette for CTA
A CTA that shares the interface hue gets lost in the visual noise; the fix is a 180-degree turn on the HSL hue circle to the opposite color, the complementary pair the human eye reads as maximum tension between two colors.
The second color in the list (#DA3E65) is the pure 180-degree complement; the rest sit at 150, 210 and 30 degrees away for interface states.
Changing only baseHue while keeping S and L fixed keeps the whole palette at the same visual weight, varying hue alone.
This calculation is independent from the color wheel: the same complementary pair with a lighter background could fail the same test.
Hue is the angular position of a color in the circle, usually from 0 to 359 degrees in HSL. It is what makes a color "red", "blue" and so on, regardless of saturation and lightness.
Only if its lightness differs enough from the surrounding background. The 180-degree relationship guarantees hue contrast, the perceptible gap between tones, but two complementary colors can share similar lightness and still blend visually on a neutral background; adjust the CTA lightness (L) beyond what hue alone provides.
Because a real button needs more than one visual state: resting color, hover, focus and maybe a highlight badge. The three extra colors sit 150, 210 and 30 degrees from the base, close enough to the pure complement to stay in the same hue family without repeating the exact HEX for every state.
Yes. Hue harmony measures distance on the 360-degree circle, reading contrast measures the luminance ratio between text and background. They are different mathematical axes: WCAG 2.1 requires 4.5:1 for normal text and only accepts 3:1 from large text upward (24px regular or roughly 18.66px bold), and neither number comes from the hue angle.
Reserve the pure complement (180 degrees) for the resting state, the one seen the most, and use the 150 and 210 degree neighbors for hover and focus: the 30-degree gap between them is perceptible enough to signal a state change without reading as a different brand color.
#3EDA49#3EDA70#3EDA97#3EDABE#3ED0DA#3EDA49, #3EDA70, #3EDA97, #3EDABE, #3ED0DAThe palette is calculated locally in the browser.