Convert HSV to RGB

HSV to RGB Color Converter

HSV describes color the way artists mix paint.

Hue names the color family, saturation controls how much grey dilutes the pure hue, and value determines how much black reduces the brightness. Converting HSV to RGB is necessary whenever a color defined by a design tool, a color picker widget, or an image processing API needs to be expressed as the numeric red, green, and blue channels that CSS, canvas, and most rendering engines actually consume.

How the conversion works

The HSV-to-RGB algorithm divides the hue into six equal sectors of 60 degrees each. Within each sector, three intermediate values (P, Q, and T) are computed from value and saturation using different linear combinations. Depending on which sector the hue falls in, the algorithm assigns P, Q, and T to the red, green, and blue channels in a different order.¹ Consequently, converting hues at the boundary of two sectors (60°, 120°, 180°, 240°, 300°) produces the purest integer RGB values, while intermediate hues carry floating-point remainders that round to the nearest integer.

Why sector boundaries produce cleaner integers

At a sector boundary, the hue aligns exactly with one of the primary or secondary color positions on the wheel. For example, a hue of 120° places green at full value with red and blue both at zero, producing the clean integer rgb(0, 255, 0). As the hue moves away from the boundary, the channel assignment shifts gradually between sectors, introducing fractional values that cannot be represented exactly as 0–255 integers and must be rounded.

The P, Q, and T intermediates are what make the sector math tractable. Once the sector index is known, they give the high, low, and blended channel values in a fixed pattern, so the only work left is assigning them to red, green, or blue in the order the sector demands. That is also why the rounding happens at the very end: the intermediate arithmetic stays in floating point until every channel is decided, so rounding error does not compound across steps.

Where this comes up

Photoshop, Sketch, and most native OS color pickers expose color in HSB/HSV. A developer who reads a color from Photoshop's HSB panel and needs it in CSS or a canvas context must convert to RGB. Furthermore, color picker libraries like react-colorful, pickr, and vanilla-picker return HSV internally and may require RGB output for downstream use.² Building on this, OpenCV image processing pipelines often work in HSV space and emit HSV values that need conversion to RGB before being written back to a display buffer.

From Photoshop to CSS in one step

When a designer sends you HSB values from Photoshop, the conversion path is straightforward: treat the HSB triple as HSV (the models are identical), convert to RGB using the standard algorithm, and format the result as a CSS rgb() string. The only common pitfall is confusing Photoshop's B (brightness/value) with HSL lightness, which produces a completely different color. Always verify by cross-checking: a Photoshop HSB of (217, 76, 96) converts to rgb(61, 153, 245), while an HSL lightness of 96% would produce a near-white result.

Edge cases and rounding

Value 0 produces black (0, 0, 0) regardless of hue and saturation: the hue and saturation become irrelevant when there is no light. Saturation 0 produces a grey with all three channels equal to the value: hsv(0, 0%, 50%) becomes rgb(128, 128, 128). Hue values outside 0–360 wrap modulo 360 before sector assignment.¹ Yet because the final step rounds each channel to the nearest integer, a round-trip of HSV → RGB → HSV may return saturation or value shifted by up to 0.1 percentage points from the original.

Why value 0 overrides everything

When the value channel is zero, the mathematical effect is that every output channel multiplies by zero, regardless of what hue and saturation specify. The hue becomes a pointer into a color space that has no brightness, and saturation measures a difference that rounds to zero. This is why most HSV implementations treat value 0 as a special case that always returns black without running the sector computation, which also makes the conversion slightly faster for dark pixels in image processing loops.

HSV to RGB for real-time color manipulation in canvas

Canvas applications that let users adjust colors in HSV space (common in drawing apps, data visualization tools, and game engines) need fast HSV-to-RGB conversion on every frame. The standard algorithm with six hue sectors and conditional branching is fast enough for most use cases, but if you are converting millions of pixels per frame (for example, applying a hue shift filter to a full-screen image), the branching becomes a performance bottleneck.

A branchless implementation uses the same math but replaces the sector conditionals with arithmetic: compute a sector index with floor(hue / 60), then use modular arithmetic to assign the intermediate values to the correct channels. This runs faster on modern CPUs because it avoids branch misprediction penalties. Building on this, for GPU-based pixel manipulation, implement the HSV-to-RGB conversion as a fragment shader. The GPU's parallel architecture handles the per-pixel conversion much faster than a JavaScript loop, and the shader code is straightforward: compute the sector, calculate P/Q/T values, and assign to R/G/B based on the sector index.

HSV to RGB conversion in data visualization palettes

Data visualization libraries (D3.js, Chart.js, Observable Plot) often generate color palettes in HSV or HSL space because it is easy to create perceptually distinct hues by stepping the hue angle at equal intervals. For a 12-category palette, step hue by 30° (360 / 12) at fixed saturation and value. Converting each HSV step to RGB gives you the CSS color values for your chart series.

The problem with this approach is that equal hue steps do not produce equally perceived differences. The green region of the hue wheel (around 120°) looks more similar across small hue changes than the blue region (around 240°). For better perceptual uniformity, generate your palette in OKLCH space (equal hue steps in OKLCH produce more perceptually uniform results) and convert to RGB for CSS output. Building on this, D3.js provides d3.interpolateRainbow and d3.interpolateSinebow which use perceptually optimized hue trajectories rather than linear HSV hue stepping, producing more distinguishable colors for categorical data.

Photoshop HSB to CSS rgb(): a practical conversion workflow

When a designer provides Photoshop HSB values for a web project, translate a Photoshop HSB color to CSS rgb() by treating the HSB values as HSV, converting to RGB with the standard algorithm, and formatting as rgb(r, g, b). Photoshop's H range is 0–360, S range is 0–100, and B range is 0–100, which matches the standard HSV convention.³ No range scaling is needed (unlike OpenCV, which uses 0–180 for hue).

A common mistake is confusing Photoshop's B (brightness/value) with HSL lightness. Photoshop B of 100% at S 100% gives the most vivid version of the hue. HSL lightness of 100% always gives white. When converting Photoshop HSB to CSS, use the HSV-to-RGB algorithm, not the HSL-to-RGB algorithm. Building on this, if the designer also provides HSL values (from a different tool), do not mix the two: convert each to RGB independently and compare the results. If the RGB values differ, the source colors are different, and you need to clarify with the designer which one is correct.

When to use this

Use this when you have a color from Photoshop, a JavaScript color picker, or an OpenCV pipeline expressed in HSV (or HSB) and need the rgb() triple for CSS or a browser rendering API.

Examples

hsv(74, 100%, 100%)

rgb(200, 255, 0)

hsv(0, 80%, 90%)

rgb(230, 46, 46)