HSV to HEX

HSV to HEX Converter

Picked a color by hue, saturation, and value and now need a code for your stylesheet? Enter hsv(200, 60%, 80%) – or simply 200, 60, 80 – and get #52A3CC, a soft sky blue. HSV and HSB are the same model, so values copied from Photoshop, Affinity, or Procreate work too.

Building a palette in HSV

The big advantage of HSV is that each number changes one visual property. Starting from hsv(200, 60%, 80%):

Notice that all three share the same bluish hue. This is how many design systems derive hover, pressed, and background variants from one brand color.

What happens during the conversion

The converter turns HSV into RGB first. For our example:

1. Chroma C = V × S = 0.8 × 0.6 = 0.48
2. The hue of 200° falls in the 180–240° sector, where blue is the dominant channel.
3. The lowest channel is V − C = 0.32, and the middle one is 0.32 + 0.48 × (1 − |(200 / 60) mod 2 − 1|) = 0.64.
4. That gives R = 0.32, G = 0.64, B = 0.8, or 82, 163, 204 in 0–255 terms.

Written in hexadecimal, 82 → 52, 163 → A3, 204 → CC, so the final code is #52A3CC.

Quick reference: the six primary hues

At full saturation and value, the hue alone determines the color: 0° is #FF0000, 60° is #FFFF00, 120° is #00FF00, 180° is #00FFFF, 240° is #0000FF, and 300° is #FF00FF.

If you need separate channel numbers rather than a code, use HSV to RGB. To analyze an existing code, HEX to HSV works in the opposite direction.