How do I get a HEX code from HSV (HSB) values?
Enter the hue (0 to 360), saturation and value (each 0 to 100) and press Convert. The tool turns them into red, green and blue, rounds each channel to a whole number, and writes the result as a six-digit hexadecimal code. 330, 60, 90, a raspberry pink, becomes #E65CA1, ready to paste into a stylesheet, a design token file or a brand document.
You'll most often need this when a color was chosen on a hue wheel. Color pickers in design and illustration apps frequently show HSB fields next to the wheel, but CSS and most handoff docs want HEX.
Copying a color out of a design app
- Open the color picker and find the H, S and B (or V) fields. If you only see R, G, B or a HEX box, switch the picker's mode.
- Copy the three numbers, keeping any decimals the app shows.
- Paste them here in H, S, V order, with commas or spaces:
330, 60, 90. - Press Convert and copy the HEX from the output.
Formats like hsv(330, 60, 90) and 330°, 60%, 90% also work, since the parser reads the first three numbers it finds.
The calculation for 330, 60, 90
- Chroma C = V × S = 0.90 × 0.60 = 0.54.
- H / 60 = 5.5. Take 5.5 mod 2 = 1.5, subtract 1 to get 0.5, so X = 0.54 × (1 − 0.5) = 0.27.
- m = V − C = 0.36.
- 330° is in the magenta-to-red sector, where red gets C, green gets 0 and blue gets X: (0.54, 0, 0.27).
- Add m: (0.90, 0.36, 0.63). Times 255: 229.5, 91.8, 160.65.
- Round to 230, 92, 161 and convert to hex:
E6,5C,A1.
Result: #E65CA1.
Why round trips drift
HEX has 256 steps per channel, and HSV values from apps are often rounded to whole numbers. Going HEX to HSV to HEX with integers can land one step away:
| Original HEX | Exact HSV | Rounded input | HEX from rounded input |
|---|---|---|---|
#1E90FF |
209.6, 88.2, 100 | 210, 88, 100 | #1F8FFF |
#3B82F6 |
217.2, 76, 96.5 | 217, 76, 96 | #3B82F5 |
#FFA500 |
38.8, 100, 100 | 39, 100, 100 | #FFA600 |
#2E8B57 |
146.5, 66.9, 54.5 | 147, 67, 55 | #2E8C59 |
The differences are invisible on most screens, but they break exact matches in a design system or a test that compares codes. If your app shows decimals, enter them; this tool accepts them and gives back the original HEX for every row above. When the HEX is the source of truth, keep it, and use the HEX to HSV converter only to find slider positions.
Staying in CSS without HEX
CSS doesn't support HSV, but CSS Color Module Level 4 defines hsl() and hwb(), and HWB is easy to reach from HSV by hand:
| Model | Value for hsv(330, 60, 90) | How to get it |
|---|---|---|
| HEX | #E65CA1 |
This tool |
| HWB | hwb(330 36% 10%) |
whiteness = (1 − S) × V, blackness = 1 − V |
| HSL | hsl(330 73% 63%) |
lightness = V × (1 − S/2), saturation = (V − L) / min(L, 1 − L) |
MDN's hwb() reference covers browser support. The hue carries over unchanged in all three. HEX remains the safest choice for tokens and handoff because every tool reads it.
Input rules
Hue must be 0 to 360, where 360 is the same as 0. Saturation and value must be 0 to 100. Negative numbers, a hue over 360 and fewer than three numbers produce "Enter valid HSV values (H 0-360, S/V 0-100)". If your source uses 0–1 fractions, multiply S and V by 100 first. When both are 1 or less and one has a decimal point, such as 330, 0.6, 0.9, the tool stops with a hint rather than reading them as tiny percentages; add % signs if you really mean values under 1%. Zero value always gives #000000, and zero saturation gives a gray, such as #808080 for 0, 0, 50.
If you'd rather have decimal channels, HSV to RGB runs the same math without the hex step. To see and pick colors visually with live HEX, RGB and HSL readouts, try the color picker, and the online CSS editor is a quick place to test the code on a real element.
Last updated