HSV to RGBA Converter

How to use the HSV to RGBA Converter

Type or paste an HSV color into the HSV field, e.g. hsv(207, 61%, 71%).

To include opacity, drag the Alpha (opacity) slider, for example to 25%.

The RGBA field shows rgba(r, g, b, alpha) as you type; with the slider at 100% the alpha is 1.

Copy the rgba() string with the button next to the field into your stylesheet, canvas code or theme file.

HSV to RGBA with an opacity value

Color pickers in tools like Figma, Photoshop and many UI kits show a color as HSB plus a separate opacity slider. This HSV to RGBA converter joins those two pieces into one rgba() string, which is what CSS, the HTML canvas and plenty of theme files expect.

HSV itself has no standard alpha channel, so the converter adds one with the Alpha (opacity) slider. Leave it at 100% and the result is fully opaque.

Example

hsv(207, 61%, 71%)                →  rgba(71, 131, 181, 1)
hsv(207, 61%, 71%), alpha 25%     →  rgba(71, 131, 181, 0.25)
hsv(9, 72%, 100%), alpha 50%      →  rgba(255, 99, 71, 0.5)

The color channels follow the HSV-to-RGB math. For hsv(207, 61%, 71%) the largest channel is V × 255 = 181 (blue), the smallest is 0.71 × 0.39 × 255 = 70.6, rounded to 71 (red), and green lands in between at 131. Opacity is carried through untouched.

How the opacity is set

The Alpha (opacity) slider runs from 0% to 100% in whole percentages: 25% gives 0.25.
A percentage is divided by 100: 50% becomes 0.5.
For other values, edit the last number in the RGBA field; anything outside 0–1 is clamped, so 1.5 becomes 1.
The output keeps up to three decimals, for example 0.333.

HSV and HSL numbers are not interchangeable

HSV and HSL share the hue angle, but their second and third numbers mean different things, so copying values from one model into the other changes the color. hsv(207, 61%, 71%) is rgb(71, 131, 181), while hsl(207, 61%, 71%) is the much paler rgb(136, 186, 226).

To convert properly, compute lightness as L = V × (1 − S/2) and saturation as (V − L) / min(L, 1 − L). For this example that gives roughly hsl(207, 44%, 49%). Design tools label HSV as HSB (hue, saturation, brightness); the numbers are the same, so a Figma or Photoshop HSB value can be entered here directly.

Picker opacity versus layer opacity

Design tools often have two kinds of transparency: the opacity of the fill color and the opacity of the whole layer. Only the fill opacity belongs in rgba(). If a layer is set to 50% and its fill to 50%, the effective opacity is 0.5 × 0.5 = 0.25, and that is the alpha to set.

When RGBA is the right choice

Use RGBA for overlays, focus rings, shadows and hover washes, where the background should show through. For a solid lighter or darker version of a color, change V or S instead; transparency makes the result depend on whatever sits underneath.

To go back from RGBA, use RGBA to HSV. For opaque values, HSV to RGB gives plain rgb(), and RGBA to HEX turns the result into an 8-digit hex code.

Frequently asked questions

Does HSV have an alpha channel?

Not in any CSS or file-format standard. Tools usually show opacity as a separate slider, which is why this converter has its own Alpha (opacity) slider and puts that value into rgba().

What alpha does the output use if I give none?

It uses 1, meaning fully opaque. You can change the number afterwards without affecting the red, green and blue values.

Can I enter opacity as a percentage?

Yes. The Alpha (opacity) slider works in whole percentages, so 50% becomes an alpha of 0.5. For a finer value such as 0.333, edit the last number in the RGBA field; values above 1 are treated as fully opaque.

Is rgba() still needed, or does rgb() support alpha?

Current browsers accept four values in rgb() as well, because the two names are aliases in modern CSS. rgba() remains valid and is the most widely supported spelling in older tools.