Convert HEX to HSV

HEX to HSV Color Converter

Design files store colors as HEX. Photoshop and many color pickers use HSV.

When a developer receives a brand color as #rrggbb and needs to enter it into a tool that accepts only Hue, Saturation, and Value (or Brightness) fields, converting is the only path. Furthermore, image processing libraries like OpenCV, PIL, and ImageMagick offer HSV-space operations (adjusting hue, boosting saturation, normalizing brightness) that require the input color to be expressed in HSV coordinates rather than the hex string from the design handoff.

How the conversion works

Converting HEX to HSV routes through an intermediate RGB step. Each two-character hex pair decodes to a 0–255 integer, which then normalizes to a 0–1 float. The normalized triplet feeds into the HSV extraction: value is the maximum of the three channels, saturation is (max − min) / max when max > 0 and 0 otherwise, and hue maps the maximum channel to its position on the 0–360 degree color wheel using the other two channels as offsets.¹

Consequently, a pure-primary color like #ff0000 yields a clean hsv(0, 100%, 100%) with no rounding involved. Pure primary colors convert cleanly because one channel reaches maximum (1.0 after normalization) while the other two are zero, which means the saturation denominator is exact and the hue formula simplifies to a whole-number degree. Secondary pure colors like #00ff00 and #0000ff behave the same way, each producing a hue angle that is a multiple of 120 degrees with no fractional remainder.

Where this comes up

Three common workflows require HEX-to-HSV conversion. Photoshop's HSB color picker lets designers adjust brightness and saturation independently; entering the HSV values from a HEX brand color lets you fine-tune it without starting from scratch. OpenCV image processing pipelines threshold or adjust colors in HSV space, requiring the target color to be expressed as a triplet before constructing the range mask. Furthermore, color picker initialization in JavaScript components (react-colorful, Spectrum, pickr) often accepts an HSV or HSB object as its initialValue, while brand colors are almost always stored as HEX.

Brand guidelines almost universally specify colors as HEX codes because HEX is the most portable format: it works in CSS, HTML, email templates, design tools, and Slack messages without any reformatting. However, the tools that designers use to manipulate those colors operate in HSV, which is why converting from HEX to HSV is the first step whenever a brand color needs to be adjusted rather than simply applied as-is.

Edge cases and rounding

The HEX string #000000 (black) produces hsv(0, 0%, 0%): both saturation and value are zero, and hue is undefined, defaulting to 0° by convention. The string #ffffff (white) produces hsv(0, 0%, 100%): maximum value but zero saturation. Pure grey values have zero saturation at varying value levels.¹ Yet because the conversion normalizes through floating-point arithmetic, values very close to 0% or 100% may display as 99.6% or 0.4% before rounding; the tool rounds to two decimal places for display.

When converting very dark or very light colors where the channel spread is small (for example, #0f0f10 or #f0f0f1), the saturation may appear as 0.4% or 0.2% where you might expect 0%. This is not a bug but a consequence of the normalized RGB values being slightly different from each other. In practice, you should treat saturation values below 1% as effectively zero when making design decisions.

Using HSV values in Photoshop and native color pickers

Photoshop's HSB panel is the most common destination for HSV values converted from HEX brand colors, and converting the hex first lets you enter a brand color into Photoshop's HSB panel directly. The panel accepts H as an integer 0 to 360, S as an integer 0 to 100, and B (brightness, identical to V) as an integer 0 to 100. After converting #3b82f6 to hsv(217, 76%, 96%), enter H: 217, S: 76, B: 96 directly into the Photoshop Color Picker. The color you see on screen should match the browser rendering of #3b82f6, assuming your display is calibrated to sRGB.

macOS Color Picker and system-level HSV input

macOS provides a system-wide color picker (accessible via any app's color panel or with the Digital Color Meter utility). Its color wheel interface operates in HSV: the wheel position sets hue and saturation, while a separate slider controls brightness. Converting a HEX brand color to HSV gives you the coordinates to enter directly. The Digital Color Meter can also read colors from the screen in HSV, which is useful when you need to capture a color from a reference image and convert it to HEX or OKLCH for your stylesheet.

The picker remembers the last mode you used, so if you leave it on the wheel, the next color you sample will already be in HSV and ready to reuse. That small convenience is why many designers keep the macOS picker open alongside their editor: they can sample a color from a screenshot, read its HSV coordinates, and paste them into a tool like Photoshop without switching applications. The same HSV coordinates also feed directly into the JavaScript color pickers described earlier, closing the loop between system, design, and code.

HSV in OpenCV and image processing pipelines

OpenCV uses HSV as its primary color space for thresholding and color detection. When you need to isolate a specific color range in an image (for example, detecting all blue UI elements in a screenshot), you define lower and upper HSV bounds and call cv2.inRange(). Converting your HEX brand color to HSV gives the center point for those bounds. A typical tolerance of ±10° in hue and ±20% in saturation and value captures natural color variation from anti-aliasing and compression artifacts.²

Why HSV works better than RGB for color thresholding

RGB thresholding requires you to define a cube in three-dimensional channel space, which is awkward when the color variation you want to capture is primarily a hue shift. HSV wraps the hue dimension into a single channel, so a hue tolerance becomes a simple numeric range rather than a complex multi-channel condition. Converting from HEX to HSV before constructing an OpenCV mask simplifies the threshold logic and produces more intuitive bounds that you can tune by adjusting a single hue range rather than three independent channel ranges.

Initializing JavaScript color pickers with HSV values

Most JavaScript color picker libraries store their internal state in HSV because the hue-saturation wheel plus brightness slider maps cleanly to the HSV cylinder. When you initialize a picker with a HEX or RGB value, the library converts to HSV internally to position the gradient thumb. Setting the initial value directly in HSV skips that conversion step and ensures the picker starts at exactly the coordinates you specify.

react-colorful, vanilla-picker, and pickr initialization

react-colorful accepts an HSV object as its color prop: <HexColorPicker color={{ h: 217, s: 76, v: 96 }} />. Vanilla-picker accepts an HSV string in its constructor: new VanillaPicker({ color: "hsv(217, 76%, 96%)" }). Pickr uses a setColor method that accepts HSV arrays: pickr.setColor([217, 76, 100]).³ In each case, converting your HEX to HSV first gives you precise control over the initial picker position, which matters when you are building a tool that needs to restore a previously saved color exactly.

When to use this

Use this when a brand color from a style guide or design handoff in HEX needs to be entered into a Photoshop HSB panel, an OpenCV mask range, or a JavaScript color picker that accepts HSV as its input format.

Examples

#c8ff00

hsv(74, 100%, 100%)

#3b82f6

hsv(217, 76%, 96%)