HSV (HSB) to HEX converter
Enter hue, saturation and value (brightness) and get a HEX code ready for CSS, design apps and brand guides.
Loading the tool…
Processing and privacy: The result is calculated inside your browser and your data is not sent to any server.
How to use it
- Enter hue (h), saturation (s) and value, brightness (v).
- The result appears straight away and updates as you edit.
- Copy the result, or copy a link that keeps the same values to share it.
How it is calculated
With S and V as fractions: C = V × S, X = C × (1 - |(H / 60) mod 2 - 1|), m = V - C; then (R1, G1, B1) is (C, X, 0), (X, C, 0), (0, C, X), (0, X, C), (X, 0, C) or (C, 0, X) by the 60 degree sector of H, and each channel is (value + m) × 255. Then: Each channel is rounded to a whole number and written as two base-16 digits: #RRGGBB.
Example
Inputs: Hue (H) = 200 °, Saturation (S) = 60 %, Value, brightness (V) = 80 %. Result: HEX code: #52A3CC.
Limits and caveats
- RGB channels are rounded to whole numbers, so nearby inputs can give the same result.
- All values are treated as sRGB, the default web color space, not Display P3 or Adobe RGB.
Questions about this tool
What happens when V is 0?
The color is black, #000000, whatever the hue and saturation, because every channel is multiplied by zero.
Where do I find HSV values in design apps?
The Photoshop color picker shows H, S and B fields, and Figma lets you pick HSB from its color format menu.
Is the HEX code upper or lower case?
It is shown in upper case, like #1E90FF. Browsers treat both cases as the same color.