Turn HSV/HSB picker values into a usable hex code. Enter hue in degrees plus saturation and value percentages — like 210, 88%, 100% from a design-tool picker — and get the exact hex for CSS, along with every other common format.
Settings
Generated locally in your browser — your settings and results never leave this page.
Closing the loop from picker to code
The numbers in a design tool’s HSB fields describe a point in the picker’s geometry, not a web color — until converted. This tool takes hue, saturation and value exactly as the dialog shows them and emits the hex your stylesheet, tokens file or handoff doc expects, with all other notations one click away.
The algorithm in three lines
HSV’s reconstruction parallels HSL’s with simpler terms — chroma comes straight off the value axis:
C = V × S X = C × (1 − |(H/60 mod 2) − 1|) m = V − C sector of H picks the (C, X, 0) pattern; add m; scale ×255
Example: hsv(280, 65%, 90%) — sector 4 (240–300°), pattern (X, 0, C): C = 0.585, X ≈ 0.39, m = 0.315 → rgb(180, 80, 230) territory — a bright violet. The tool computes your exact input rather than a rounded illustration.
HSB in Adobe tools is this exact model
B(rightness) is V(alue) renamed; there is no third model. One historical quirk to expect: some tools display S and B rounded to integers, so a color round-tripped through their UI can drift by a hair. Paste the tool’s displayed numbers here and the hex you get is the color those fields truly encode.
Related conversions
From CSS-side colors into picker coordinates, use HEX to HSV or RGB to HSV. For a value you intend to keep editing perceptually — consistent lightness across hues — convert once to OKLCH instead and do the editing there; HSV’s brightness axis will not protect you from lightness surprises across hues.
Reference values, computed live
The reverse mapping benefits from the same anchors. Seven HSV readings — the numbers a picker dialog would display — and the hex each encodes:
| Color | HSV | HEX |
|---|---|---|
| hotpink | hsv(330, 58.8%, 100%) | #ff69b4 |
| forestgreen | hsv(120, 75.5%, 54.5%) | #228b22 |
| coral | hsv(16.1, 68.6%, 100%) | #ff7f50 |
| seagreen | hsv(146.5, 66.9%, 54.5%) | #2e8b57 |
| royalblue | hsv(225, 71.1%, 88.2%) | #4169e1 |
| palevioletred | hsv(340.4, 48.9%, 85.9%) | #db7093 |
| darkorange | hsv(32.9, 100%, 100%) | #ff8c00 |
These rows double as dictation practice: read an HSV triple aloud, predict the rough color (hue band, vivid or muted, bright or deep), then check the swatch the hex produces. The prediction game is exactly the skill that lets you sanity-check a colleague’s picker settings over a call without opening a tool.
How to use the HSV to HEX Converter
- Enter hue, saturation and value – like 210, 88%, 100% read from your design tool.
- The result updates live as you type – no convert button needed.
- Copy the value with the copy button, or switch the output format dropdown for other export shapes.
- Share the exact result: the page URL updates with your input, so the link reproduces it.
Frequently asked questions
How do I convert HSV numbers from Photoshop into a hex code?
Type the three numbers here exactly as the picker shows them – hue in degrees, S and V as percentages. The algorithm mirrors HSL's sector math but with chroma = V×S and match = V−C, producing the RGB channels and their hex form.
Why does my HSV value differ from what an HSL tool told me?
Because S means different things in the two models: HSV saturation is measured against the brightest channel, HSL saturation against the distance from gray. The same color commonly has HSV-S 88% but HSL-S 100%. Compare both in the Complete Color Converter.
What color is hsv(0, 0%, 100%)?
White – zero saturation removes all hue and full value takes every channel to 255. Its hex is #ffffff. Dropping the value slides white down the gray ramp toward black at v=0%.
Can I enter value or saturation above 100%?
No – both are defined 0-100% and the tool rejects out-of-range numbers with a message naming the offending component rather than producing an undefined color.
Does HSV handle alpha?
The model itself has no alpha axis; pickers bolt it on separately. Convert the solid color here, then add opacity with the HEX to RGBA converter if you need a translucent version.
Is the hue axis identical in HSV and HSL?
Yes – both use the same 0-360° wheel, so hue survives moving between the models unchanged. Only the S and the V/L axes are redefined.
How accurate is the conversion?
Exact to 8-bit RGB: the implementation round-trips every color of a full RGB sampling grid in its automated tests, so what the picker meant is what the hex encodes.
