Convert HSV values to RGB

The first number is the hue (H), an angle on the color wheel: 0° is red, 120° is green and 240° is blue[1]. The second is saturation (S) and the third is value (V). Photoshop calls the same model HSB, and Adobe's help names its parts hue, saturation and brightness[2].

Saturation and value make the most sense if you think of paint. Alvy Ray Smith, who described the model in 1978, compared them to adding white and black to a pure hue: lower saturation means more white, lower value means more black[3]. That is why any color with a value of 0% is black whatever the other two numbers say, and a saturation of 0% leaves a gray of that value.

If your color is in another format, such as OKLCH, Lab or Android code, the color converter shows it in every format at once.

First work out the chroma, the spread between the channels: C = V × S. Then divide the hue by 60°. The whole part of the result picks one of six slices of the wheel, and the rest gives the middle channel: X = C × (1 − |(H ÷ 60°) mod 2 − 1|). Finally, add m = V − C to every channel[1].

Take hsv(217.2, 76%, 96.5%). The chroma is 0.965 × 0.76 = 0.733. The hue divided by 60° is 3.62, so the color lies in the slice between 180° and 240°, where red is zero, green is the middle channel and blue is full. The middle channel is 0.733 × (1 − |1.62 − 1|) = 0.279, and m = 0.965 − 0.733 = 0.232.

After adding m, the channels are 0.232, 0.511 and 0.965. Multiplied by 255 and rounded, that gives rgb(59, 130, 246), and the RGB to HEX converter turns it into a hex code.

CSS has no hsv() function, but it does have hwb(), where the hue is followed by the amount of white and black mixed into it[5]. Alvy Ray Smith described the HWB model in 1996, and it comes from HSV through two short formulas: W = (1 − S) × V and B = 1 − V[6].

For hsv(217.2, 76%, 96.5%) the white is (1 − 0.76) × 0.965 = 23.1% and the black is 1 − 0.965 = 3.5%, so in a style sheet you write hwb(217.2 23.1% 3.5%). The browser shows the same color as rgb(59, 130, 246). If you would rather use a notation every tool understands, paste this converter's result instead.

OpenCV stores the hue of an 8-bit image as half the angle so that it fits into one byte[7]. Neighboring hue values are therefore 2° apart, and a color that falls between them has no exact match. The triple 109, 194, 246 that OpenCV gives for rgb(59, 130, 246) comes back with the OpenCV option as rgb(59, 127, 246), three steps lower on green. OpenCV itself returns exactly the same: we compared the OpenCV option with OpenCV.js 4.10 on every triple with a hue from 0 to 180.

If the result goes back into an image loaded with cv2.imread, use cv2.COLOR_HSV2BGR, because such an image keeps its channels in blue, green, red order[8].