HSV to HEX Converter
Convert a hue, saturation and value (HSV/HSB) colour straight into a copy-ready hex code for CSS, HTML and design files — the same colour, in web-standard notation.
HEX
HEX (no hash)
What is HSV to HEX conversion?
Designers usually choose colours in HSV — Hue, Saturation, Value, shown as HSB in tools like Photoshop and Figma — because it's intuitive to dial in. But once a colour is decided, the web wants it as a hex code. This converter closes that gap, turning a wheel position into a compact #RRGGBB string you can paste straight into CSS, HTML or a brand sheet.
It works in two moves under the hood: the HSV values are first resolved into red, green and blue channels, then each channel is written as a two-digit hexadecimal pair to form the final code. Since HSV and hex describe the same colour, what you get is an exact match — and you can reverse it with our HEX to HSV converter whenever you want the sliders back.
It's the natural last step of a design-to-development handoff: pick by feel in HSV, ship a hex code everyone can use.
How to convert HSV to HEX
- 1
Enter your HSV values
Hue in degrees (0–360°), with saturation and value as percentages (0–100%).
- 2
Read the hex code
A #RRGGBB code appears instantly, shown next to a swatch of the colour.
- 3
Copy it into your project
Drop the code into your stylesheet, markup, or design documentation.
Why convert HSV to HEX
Design-to-web handoff
Hand developers the hex code that came from the colour you picked by eye in HSV.
Web-standard format
Hex is the most common way to write colours in CSS and HTML, so it just works everywhere.
Compact and shareable
A six-character code is easy to paste into tickets, brand sheets and chat.
Exact, reversible result
The colour is preserved precisely and you can convert back to HSV at any time.
Worked example
A blue chosen in HSV, encoded as the hex code you'd ship.
hsv(209°, 100%, 86%)#0070DCTwo steps behind one conversion
There's no direct shortcut from a colour wheel to hexadecimal, so the tool routes through RGB. First it maps the hue, saturation and value onto red, green and blue channels (0–255 each); then it encodes those channels in base-16. A hue around 209° at full saturation and 86% value resolves to rgb(0, 112, 220), which encodes as #0070DC — the hex you'd copy into your CSS.
Hex codes in everyday use
- CSS properties like
colorandbackgroundaccept hex directly. - Brand guidelines almost always specify primary colours as hex.
- Hex is case-insensitive, so
#0070dcand#0070DCare the same. - A short
#RGBform exists, but only when each channel's digits match.
Frequently asked questions
Yes. HSV and hex describe the same colour, so the hex code you get represents precisely the colour your HSV values define, with no visible shift.
Yes. HSB and HSV are identical, so the hue, saturation and brightness shown in Adobe tools convert correctly to a hex code here.
There's no direct formula from a colour wheel to hexadecimal, so HSV is first turned into red, green and blue channels, which are then written in base-16. The result is exact.
Hex codes are case-insensitive, so either form names the same colour. Design tools often use uppercase; both work identically in CSS and HTML.
Yes. The conversion is reversible — paste the hex into a HEX to HSV tool to recover the hue, saturation and value.
Design tokens are typically JSON or CSS custom properties. In JSON, write { "color-brand": "#0070DC" } and export to your platform. In CSS, use --color-brand: #0070DC inside :root {}. Either way, the hex is the value you assign — no further conversion needed.
Need another tool?
Browse the full toolbox or dig into the blog for the engineering behind it.