Convert RGBA to HSV for color pickers
The RGBA to HSV converter takes rgba() colors from CSS or code and gives you the hue, saturation and value numbers used by the HSB fields of design-app color pickers. Because HSV has no alpha component, the color channels are converted and the opacity is left for you to set separately.
What happens to the alpha
The alpha is dropped. Only red, green and blue are converted, and the output is always a three-part hsv(h, s%, v%):
rgba(139, 92, 246, 0.6) → hsv(258, 62.6%, 96.5%)
rgba(139, 92, 246, 1) → hsv(258, 62.6%, 96.5%)Both lines give the same result because they share the same base color. In a design app you would type the HSV values into the picker and enter the alpha in its separate opacity field as a percentage: 0.6 × 100 = 60%.
Worked example
rgba(139, 92, 246, 0.6) (alpha 0.6 set aside)
R = 0.5451 G = 0.3608 B = 0.9647
max = 0.9647 (B) min = 0.3608 d = 0.6039
V = max = 0.9647 → 96.5%
S = d / max = 0.6260 → 62.6%
H = 60 × ((R − G) / d + 4)
= 60 × 4.3052 = 258.3 → 258
→ hsv(258, 62.6%, 96.5%)These are the same steps as in RGB to HSV; the alpha simply doesn't take part.
When dropping alpha misleads
Translucent colors can look nothing like their HSV numbers. A frosted-glass overlay such as rgba(255, 255, 255, 0.15) converts to hsv(0, 0%, 100%), pure white, even though on a dark background it shows as a faint grey veil. If you need the HSV of what is displayed, flatten the color onto its background first (the formula is on the RGBA to RGB page) and convert the solid color.
Reading the numbers
- Hue runs from 0 to 360° and is rounded to whole degrees.
- Saturation and value run from 0 to 100% with one decimal place. Value is simply the brightest channel as a percentage.
- Photoshop and Figma call the same model HSB; the numbers are identical.
- CSS has no HSV notation. For stylesheets, convert to
hsla()with RGBA to HSL, which keeps the alpha.
For the reverse direction, HSV to RGBA turns picker values back into CSS.