The reverse of the above — translate HSV values from your color picker into the HSL format that CSS uses natively. The hue stays the same; only saturation and brightness are remapped.

HSV (Hue, Saturation, Value) is the model most color pickers use internally. Value represents brightness from black to full color, which aligns closely with how we perceive color intensity.

HSL describes colors using Hue (0°–360°), Saturation (0%–100%), and Lightness (0%–100%). Designers favour it because adjusting a single axis — making a color lighter or more vivid — is intuitive.

This conversion is lossless within the sRGB gamut, meaning you can round-trip between the two models without quality loss.