StringMash.com

HSV to hex converter

Hue, saturation and value to a hex code, with the working.

Conversion
12 characters
Updates as you type
Hex#FF8800
RGBrgb(255, 136, 0)
HSLhsl(32, 100%, 50%)
HSV (HSB)hsv(32, 100%, 100%)
CMYKcmyk(0%, 47%, 100%, 0%)
Nearest CSS namedarkorange
Contrast with white2.39:1 (fails)
Contrast with black8.77:1 (AAA)
The swatch and working are below

Show the steps
Aa blackAa white
  1. Write saturation and value as fractions: S = 1, V = 1. The hue is H = 32°.
  2. Chroma: C = V × S = 1 × 1 = 1.
  3. X = C × (1 − |(H ÷ 60) mod 2 − 1|) = 1 × 0.533 = 0.533.
  4. m = V − C = 1 − 1 = 0.
  5. H ÷ 60 = 0.533, which is from 0 to 1, so red, green and blue start as (C, X, 0) = (1, 0.533, 0).
  6. Add m to each and multiply by 255: red 255, green 136, blue 0. Rounded, rgb(255, 136, 0).
  7. Write each number from 0 to 255 as two hex digits: divide by 16, and the answer and the remainder are the two digits (10 to 15 are A to F).
  8. Red: 255 ÷ 16 = 15 remainder 15, so FF.
  9. Green: 136 ÷ 16 = 8 remainder 8, so 88.
  10. Blue: 0 ÷ 16 = 0 remainder 0, so 00.
  11. Put them together after a #: #FF8800.
  12. Contrast: 2.39:1 against white and 8.77:1 against black, so black text reads better on it.

Using the converter

Type the three numbers from an HSV or HSB picker, hue first, such as 32, 100, 100. The hex code appears, ready to paste into CSS or a design file.

If your picker shows saturation and brightness from 0 to 255 rather than percentages, divide them by 2.55 first.

How HSV becomes hex

First turn HSV into red, green and blue. Chroma is C = V × S, X = C × (1 − |(H ÷ 60) mod 2 − 1|) and m = V − C. The hue's 60° sector decides which channel gets C, which gets X and which gets 0, and m is added to all three.

Multiply each by 255 and round. Then write each number as two hex digits: divide by 16, and the answer and the remainder are the digits, with 10 to 15 as A to F.

A worked example

For hsv(32, 100%, 100%), C = 1 × 1 = 1 and m = 0. H ÷ 60 = 0.533, so X = 1 × (1 − |0.533 − 1|) = 0.533. The hue is in the first sector, so red, green and blue are (1, 0.533, 0).

Times 255 that's 255, 136 and 0. 255 is FF, 136 ÷ 16 = 8 remainder 8, so 88, and 0 is 00. The hex code is #FF8800.

A colour wheel in hex

Every 30° round the wheel. Lowering saturation mixes in white, and lowering value mixes in black.
HueFull colour (100%, 100%)Tint (50% saturation)Shade (50% value)
0°#FF0000#FF8080#800000
30°#FF8000#FFBF80#804000
60°#FFFF00#FFFF80#808000
90°#80FF00#BFFF80#408000
120°#00FF00#80FF80#008000
150°#00FF80#80FFBF#008040
180°#00FFFF#80FFFF#008080
210°#0080FF#80BFFF#004080
240°#0000FF#8080FF#000080
270°#8000FF#BF80FF#400080
300°#FF00FF#FF80FF#800080
330°#FF0080#FF80BF#800040

HSV, HSB and HSL

HSV and HSB are two names for one model. Hue, saturation and value is the same thing as hue, saturation and brightness, and the numbers match.

HSL is different. Its third number, lightness, puts the pure colour at 50% and white at 100%, while HSV puts the pure colour at 100% value, and white is 0% saturation at 100% value. Their saturations differ too, so hsv(220, 75%, 80%) is hsl(220, 60%, 50%). CSS reads hsl() but has no hsv(), so use hex to HSL for a stylesheet.

Questions

Is HSB to hex the same as HSV to hex?

Yes. HSB and HSV are the same model under two names.

Why doesn't hex to HSV give back my exact numbers?

Hex has 256 steps per channel, and HSV here is rounded to whole numbers, so nearby HSV values can share a hex code.

Sources

Written, edited and reviewed by .

Added and reviewed . What's new