Skip to content

HSV Color Picker

DesignColor Converters and Codes
Start from
Hex code —
RGB
—
HSV
—
HSL
—
CMYK (naive)
—
Readable text colour
—

An HSV color picker sets a colour by hue (0–360°), saturation and value (brightness), then converts it to hex and RGB. Hue 210°, saturation 50% and value 80% give RGB 102, 153, 204, which is #6699CC. Lower the value and the colour darkens toward black; lower the saturation and it greys out.

About this tool

HSV is the model most graphic software uses inside its colour wheel: Photoshop, GIMP and Figma all describe a picked colour by hue, saturation and value (sometimes called brightness, HSB). Designers and front-end developers often have those three numbers and need the hex or rgb() string a style sheet accepts, or the reverse. This picker moves three sliders and shows the resulting hex code, the rgb(), hsl() and a naive CMYK split, plus whether black or white text reads better on top. Switch to hex mode to decode an existing colour into HSV. The working shows C, X and m from the hexcone formula. One limit: the CMYK figures are a plain arithmetic split with no ICC profile, so they will not match what a print shop's RIP produces.

How to use it

  1. Pick a starting point

    Choose HSV sliders to build a colour, or Hex code to decode one you already have.

  2. Move the sliders

    Hue walks round the wheel from red at 0° through green at 120° and blue at 240°; saturation and value run 0–100%.

  3. Or paste a hex code

    Three or six hex digits, with or without the #, such as #69C or #6699CC.

  4. Copy the code you need

    The hex code leads; RGB, HSV, HSL and CMYK strings sit below it with the text-colour suggestion.

Examples

Hue 210°, 50% saturation, 80% value

Start from
HSV sliders
Hue
210
Saturation
50
Value (brightness)
80

Result Hex code: #6699CC
RGB: rgb(102, 153, 204)
HSV: hsv(210°, 50%, 80%)
HSL: hsl(210, 50%, 60%)
CMYK (naive): cmyk(50%, 25%, 0%, 20%)
Readable text colour: Black text

  1. C = V × S = 0.8 × 0.5 = 0.4
  2. X = C × (1 − |(H ÷ 60) mod 2 − 1|) = 0.2, m = V − C = 0.4
  3. Sector 3 gives (R′, G′, B′) = (0, 0.2, 0.4)
  4. RGB = round((R′ + m) × 255, …) = (102, 153, 204)

A muted sky blue that lands exactly on the web-safe #6699CC.

Hue 120° at half brightness

Start from
HSV sliders
Hue
120
Saturation
100
Value (brightness)
50

Result Hex code: #008000
RGB: rgb(0, 128, 0)
HSV: hsv(120°, 100%, 50%)
HSL: hsl(120, 100%, 25%)
CMYK (naive): cmyk(100%, 0%, 100%, 50%)
Readable text colour: White text

  1. C = V × S = 0.5 × 1 = 0.5
  2. X = C × (1 − |(H ÷ 60) mod 2 − 1|) = 0, m = V − C = 0
  3. Sector 2 gives (R′, G′, B′) = (0, 0.5, 0)
  4. RGB = round((R′ + m) × 255, …) = (0, 128, 0)

Halving Value on pure green gives CSS green, #008000, not a lighter tint.

Reading HSV from #FF8000

Start from
Hex code
Hex colour
#FF8000

Result Hex code: #FF8000
RGB: rgb(255, 128, 0)
HSV: hsv(30°, 100%, 100%)
HSL: hsl(30, 100%, 50%)
CMYK (naive): cmyk(0%, 50%, 100%, 0%)
Readable text colour: Black text

  1. RGB = (255, 128, 0); max = 1, min = 0
  2. V = max = 100%, S = (max − min) ÷ max = 100%, H = 30.1°

A hex code from a style sheet comes back as hue 30°, full saturation and full value.

How it is calculated

C = V × S; X = C × (1 − |(H ÷ 60) mod 2 − 1|); m = V − C; (R, G, B) = (R′ + m, G′ + m, B′ + m) × 255

H
Hue in degrees, 0–360
S, V
Saturation and value as fractions 0–1
C
Chroma, the spread between the strongest and weakest channel
R′, G′, B′
Channel values chosen by the 60° sector the hue falls in

The hexcone model splits the hue circle into six 60° sectors. In each sector one channel equals C, one equals X and one is zero; adding m lifts all three to the right brightness. Results are rounded to whole 0–255 channels. Going back from hex, V is the largest channel, S is (max − min) ÷ max, and H comes from which channel is largest.

When not to use it

  • Do not use the CMYK figures for print proofs; they ignore ink and paper profiles.
  • For perceptually even palettes, OKLCH or CIELAB spaces suit better than HSV.
  • HSV values from different apps may use 0–255 or 0–1 scales, so convert before typing them here.

Common mistakes

  • Treating HSV value as HSL lightness; 100% value is the pure hue, not white.
  • Typing hue as a percentage instead of degrees.
  • Expecting a round trip to return the exact HSV numbers after channels are rounded to whole values.

Frequently asked questions

What is the difference between HSV and HSL?

Both use the same hue angle. In HSV, value 100% with saturation 100% is the pure hue, and white needs saturation 0%. In HSL, lightness 50% is the pure hue and 100% is always white. Steel blue #6699CC is hsv(210°, 50%, 80%) but hsl(210, 50%, 60%).

Is HSB the same as HSV?

Yes. Adobe calls the third component brightness, others call it value; the maths is identical, so HSB numbers from Photoshop can be entered on these sliders directly.

Why does a colour go black when value is zero?

Value scales every channel. At 0% all three channels are 0 whatever the hue or saturation, so the result is #000000. That is why a warning appears at very low value.

Can CSS use HSV directly?

No. CSS accepts hex, rgb(), hsl(), hwb(), lab() and oklch(), but not hsv(). Convert to hex or hsl() here and paste that into the style sheet.

How is the readable text colour chosen?

It computes relative luminance with the sRGB weights 0.2126, 0.7152 and 0.0722 on the channel values. Above 0.5 black text is suggested, otherwise white. It is a quick guide, not a full WCAG contrast check.

Does a three-digit hex code work?

Yes. Each digit is doubled, so #69C becomes #6699CC before conversion, the same rule browsers apply to short hex codes.

Cite this tool

Using this tool in an assignment, article or report? Copy a citation, or a link for your website.

APA

Tools Directory Editorial Team. (2026, October 12). HSV Color Picker. Tools Directory. Retrieved October 26, 2026, from https://tools.milunir.com/design/color-converters-and-codes/hsv-color-picker/

MLA

Tools Directory Editorial Team. “HSV Color Picker.” Tools Directory, 12 Oct. 2026, https://tools.milunir.com/design/color-converters-and-codes/hsv-color-picker/. Accessed 26 Oct. 2026.

Chicago

Tools Directory Editorial Team. “HSV Color Picker.” Tools Directory. Last modified October 12, 2026. Accessed October 26, 2026. https://tools.milunir.com/design/color-converters-and-codes/hsv-color-picker/.

Link<a href="https://tools.milunir.com/design/color-converters-and-codes/hsv-color-picker/">HSV Color Picker – Tools Directory</a>