HEX to HSV

HEX to HSV Converter

Enter any HEX code and read it as hue, saturation, and value. #DAA520 (Goldenrod) becomes hsv(43, 85%, 85%). HSV – called HSB in Photoshop, Illustrator, and many color pickers – describes a color the way people talk about it: which hue, how vivid, how bright.

How the conversion works

The HEX code is decoded to RGB and each channel is divided by 255. With max and min as the largest and smallest channel:

• Value = max
• Saturation = (max − min) / max
• Hue = the angle on the color wheel, based on which channel is largest and how the other two compare

Worked example: Goldenrod

#DAA520 decodes to R = 218, G = 165, B = 32. The maximum is red (218), the minimum is blue (32).

• Value = 218 / 255 = 85.5%
• Saturation = (218 − 32) / 218 = 85.3%
• Hue = 60 × (165 − 32) / (218 − 32) = 42.9°

Rounded, that is hsv(43, 85%, 85%) – an orange-yellow hue, strongly saturated, fairly bright.

Why designers reach for HSV

HSV makes variations easy. Keep the hue and lower the value to get a darker shade for a hover state; lower the saturation for a muted background; rotate the hue by 180° to find a complementary accent. Doing the same with raw HEX digits means guessing. It is also the model behind most square-and-slider color pickers, so the numbers you get here can be typed straight into those dialogs.

Game engines and image-processing libraries such as OpenCV also use HSV for color-based selection, because a range of hues is easier to describe than a range of RGB triplets.

To convert back, use HSV to HEX. For HSV from RGB numbers, open RGB to HSV.