Dynamic Color

Tunes how far the hover background moves in lightness in OKLCH (0 = almost none, 1 = strongest). Together with the lightness midpoint, light surfaces darken and dark surfaces lighten toward a middle tone.

Controls how strongly saturation changes for the hover color relative to the background. Higher values make the chroma term in the OKLCH formula more pronounced (more vivid or muted shifts, depending on background lightness).

Same idea as hover, but for the pressed/active state: how far the background lightness shifts in OKLCH when the user activates the control.

Chroma scaling for the active (pressed) background—higher values amplify saturation changes in the dynamic color formula.

Lightness shift for the selected state (e.g. current nav item). Uses the same OKLCH dynamic-color pipeline as hover/active.

Chroma scaling for the selected background color—adjusts how saturated the derived color looks versus the base background.

How much the dynamic border color shifts in lightness compared to the element's background. Higher values make the border contrast more strongly in lightness.

Scales how saturation evolves for the dynamic border as the background changes—useful for fine-tuning colorful vs neutral borders on tinted surfaces.

Global threshold (0–1) in the OKLCH formula: colors lighter than this are treated one way and darker colors the other when computing the lightness shift. Raising it makes more of the palette behave like "dark" backgrounds for the purpose of the effect.

Second threshold for the chroma part of the formula: it sets where the curve is neutral vs stronger. Lower values push more saturation change for colors you treat as dark in that part of the math.

Hard cap on chroma in the generated OKLCH color (up to 0.4). Increase it to allow punchier, more saturated results on dark-ish backgrounds; decrease for safer, flatter colors.