HSV to RGB Converter
Turn a hue, saturation and value (HSV/HSB) colour from your design picker into the red, green and blue channels CSS, canvas and graphics code expect.
R
G
B
What does HSV to RGB conversion do?
When you pick a colour in a design app you usually work in HSV — Hue, Saturation, Value (shown as HSB in Adobe tools). But the web platform and most graphics code want red, green and blue channels. This converter bridges the two: give it a wheel position and it returns the rgb() triplet that paints the identical colour.
The maths walks around the colour wheel. The hue angle picks which RGB channels are dominant, saturation decides how far the colour is pulled away from grey, and value scales the overall brightness. The output is three numbers from 0 to 255 — and because HSV and RGB describe the same colour space, the result is an exact match, reversible with our RGB to HSV converter.
This is the conversion you want after you've dialled in a colour by eye and now need to drop concrete channel values into a stylesheet or shader.
How to convert HSV to RGB
- 1
Enter hue, saturation, value
Hue is 0–360°; saturation and value are percentages from 0 to 100%.
- 2
Read the RGB channels
Red, green and blue appear as 0–255 numbers with a swatch of the colour.
- 3
Copy the rgb() string
Use the ready-formatted rgb(...) value directly in your CSS or code.
Why convert HSV to RGB
From picker to code
Take the colour you chose by eye in a design tool and turn it into channels your code can use.
Web-ready values
CSS, canvas and WebGL all speak RGB, so this is the format browsers and shaders expect.
Build rgba() colours
Once you have the channels you can add an alpha value for partial transparency.
Exact round trip
HSV and RGB cover the same colours, so converting back and forth preserves the colour.
Worked example
A bright blue chosen in HSV, converted to its RGB channels.
hsv(209°, 100%, 86%)rgb(0, 112, 220)How the wheel becomes three channels
The 360° hue is split into six 60° sectors, each blending two primary channels into the third. Saturation then mixes in white to soften the colour, and value scales everything toward or away from black. A hue near 210° with full saturation and high value, for instance, lands in the blue region and resolves to roughly rgb(0, 112, 220) — a strong, bright blue.
Where HSV to RGB shows up
- Exporting a colour chosen in Figma or Photoshop into CSS or JSON.
- Generating palettes in code by stepping the hue and converting each step.
- Driving LED strips and hardware that take RGB but are easier to author in HSV.
- Animating a rainbow effect by sweeping the hue and converting frame by frame.
Frequently asked questions
Yes. HSV and RGB describe the same colour space, so the conversion produces an exact RGB match for the colour your HSV values represent.
Yes. HSB (Brightness) and HSV (Value) are the same model, so the numbers from a Photoshop or Figma HSB picker plug straight in.
Hue is an angle from 0 to 360 degrees, while saturation and value are each percentages from 0 to 100%. Most colour pickers report them in exactly this form.
Yes. The mapping is reversible — pass the red, green and blue channels into an RGB to HSV tool to return to hue, saturation and value.
Take the three RGB numbers and use rgba(), adding an alpha value between 0 and 1. HSV itself has no transparency channel.
Most addressable LED libraries (FastLED, NeoPixel, etc.) accept a direct rgb(r, g, b) or individual channel call. Set the R, G and B channels to the values this converter gives you — they're already in the 0–255 range those libraries expect, so there's nothing to rescale.
Need another tool?
Browse the full toolbox or dig into the blog for the engineering behind it.