Convert HSV to HEX

HSV to HEX Color Converter

Photoshop and native OS color pickers use HSV.

When a designer adjusts a color in Photoshop's HSB panel and needs to hand the result to a developer, HEX is the universal transfer format: it pastes cleanly into CSS, HTML attributes, Figma color fields, and Slack messages without any reformatting. Converting HSV to HEX directly avoids the manual two-step of first converting to RGB and then converting RGB to HEX, which compounds the risk of transcription error at each step.

How the conversion works

Converting HSV to HEX routes through an intermediate RGB step. The HSV-to-RGB algorithm divides the hue into six 60-degree sectors and assigns intermediate chroma values to the three channels depending on which sector applies.¹ Once the three 0–255 integers are computed, each converts to a two-digit hex pair: red first, green second, blue third. Concatenating those three pairs with a # prefix produces the six-character HEX string.² Building on this, no additional precision is lost beyond the integer rounding that occurs in the HSV-to-RGB step.

Why HEX is the natural final format

HEX is the most compact universally supported color representation. Each of the three RGB channels maps to exactly two hex digits, producing a fixed-width string that any CSS parser, HTML renderer, or design tool can interpret without ambiguity. Because the conversion pipeline is HSV to RGB to HEX, and each step produces deterministic integer output, the final HEX value is stable: the same HSV input always produces the same HEX string, which makes it reliable for use in design tokens and automated style generation.

The single canonical string also simplifies diffing and version control. When a HEX value changes in a token file, the diff shows the exact six characters that moved, whereas an RGB triple would show three separate numbers that are harder to scan at a glance. That clarity is another reason HEX is the default storage format for design systems, and why converting HSV to HEX once at token-creation time pays off every time the value is reviewed, merged, or regenerated downstream.

Where this comes up

Designers who work in Photoshop, macOS Color Picker, or any tool that exposes HSB fields need HEX for developer handoff. Figma's fill panel accepts HEX directly, and most design system documentation tools (Storybook, Zeroheight, Supernova) store colors as HEX strings. Furthermore, design tokens defined in Style Dictionary or Theo use HEX as the interchange format between platforms. Consequently, converting from the HSV space where a designer adjusted the color to the HEX format where it will be documented and consumed is a routine handoff step.

HEX as the interchange format between design and code

Design tools and developer tools rarely share the same color model. Photoshop speaks HSB, Figma accepts HEX, CSS uses multiple formats, and token pipelines need a single canonical representation. HEX serves as the lingua franca because it is compact, unambiguous, and supported everywhere. When a designer provides HSB values from Photoshop, converting to HEX immediately gives the developer a value they can paste into any tool without further conversion, reducing the chance that an intermediate step introduces a transcription error.

Edge cases and rounding

Because the conversion routes through integer RGB, the result is always a valid 6-digit HEX string: no fractional values leak into the output. HSV value 0 always produces #000000 regardless of hue or saturation. Saturation 0 at any value V produces a grey where each pair equals round(V × 255) in hex. Hue values outside 0–360 wrap modulo 360.² Yet the intermediate integer rounding means a round-trip of HSV → HEX → HSV may return saturation or value shifted by up to 0.1 percentage points from the original coordinates.

Round-trip integrity and when it matters

The rounding error of 0.1 percentage points is invisible to the eye and irrelevant for most design work, but it can matter in automated pipelines that compare colors programmatically. If your token validation script checks whether an exported HEX value matches the source HSV definition, expect these small offsets and compare within a tolerance rather than requiring exact equality. Storing the original HSV coordinates alongside the derived HEX value in your token file lets you verify the conversion while still using HEX as the primary display and export format.

HSV to HEX for design token documentation and handoff

Design token documentation tools (Storybook, Zeroheight, Supernova, Backlight) expect colors in HEX format for display in color swatches. When your design tokens are defined in HSV (common when the design team works primarily in Photoshop), the HSV-to-HEX conversion is the bridge between the design tool's native format and the documentation tool's expected input.

The conversion pipeline for token documentation is: HSV → RGB → HEX. Each step is lossless for valid inputs (H: 0–360, S: 0–100, V: 0–100). The resulting HEX string is always six characters, lowercase, with a # prefix. Building on this, if your token pipeline uses Style Dictionary, add a custom transform that performs the HSV-to-HEX conversion. Style Dictionary's built-in transforms include color/hex and color/css, but not hsv/hex directly. A custom transform that accepts { h, s, v } token values and outputs a HEX string lets your designers work in HSV while your documentation shows HEX.

HSV to HEX for email HTML and SVG compatibility

Email HTML requires HEX colors because many email clients (Outlook, Gmail in certain modes) do not support rgb(), hsl(), or other CSS color functions. When your design team provides colors in HSV (from Photoshop or a color picker), converting to HEX is the required step before writing email inline styles, and you can get email-safe hex from a Photoshop color without leaving the browser. The conversion is the same as for any other use case: HSV → RGB → HEX.

SVG color attributes also expect HEX or rgb() values. When generating SVG icons or illustrations programmatically from HSV color data (for example, a chart library that lets users pick colors in a picker), convert to HEX before writing the SVG fill or stroke attribute. Building on this, inline SVG in HTML accepts the same color formats as CSS, but for maximum compatibility with older SVG viewers and export tools, HEX is the safest choice. The converter on this tool outputs HEX values that paste directly into SVG attributes: fill="#3b82f6".

HSV to HEX in game development and creative coding

Game engines and creative coding frameworks (p5.js, Processing, Unity) often use HSV for color manipulation because it maps intuitively to the way artists think about color. A game that shifts the hue of a character's aura over time does so by incrementing the HSV hue angle and converting to RGB for the rendering API. The HSV-to-HEX conversion is relevant when the game exports color values to a web-based UI or when the game's configuration files store colors as HEX strings.

In p5.js, the colorMode(HSB) function lets you work in HSV space directly, and the color() function returns a color object that the rendering engine converts to RGB internally.³ If you need the HEX value (for example, to send to a web API or write to a CSS file), call hex() on the color object, which returns the HEX string. Building on this, Unity's Color.HSVToRGB() function returns a Color object with float channels (0–1), which you then convert to 0–255 integers and then to HEX.⁴ The multi-step conversion is necessary because Unity does not provide a direct HSV-to-HEX function.

When to use this

Use this when a color defined in a design tool's HSB panel (Photoshop, macOS Color Picker) needs to be expressed as a HEX string for a CSS stylesheet, a design token file, or a Figma fill field.

Examples

hsv(74, 22%, 98%)

#f3fbc5

hsv(217, 76%, 96%)

#3b82f6