HSLA Color Picker
Pick a color and copy its HSLA code, plus HEX, RGB, HSL and more.
How to use the HSLA color picker
- Set the hue first to land on the right color, then adjust saturation and lightness until the solid color looks right.
- Drag the alpha slider down to make the color see-through, judging it against the checkerboard or your real background.
- Use a low alpha (around 0.1 to 0.25) for subtle tints and overlays, or a higher one for stronger washes.
- Copy the hsla() value into your CSS, or switch the readout to compare it as HSL, RGBA or HEX.
What is an HSLA color?
HSLA is HSL with a fourth value for opacity, written like hsla(210, 100%, 56%, 0.6). You keep the easy hand-picking of hue, saturation and lightness, and gain control over how transparent the color is. It is the format to reach for when a web color needs to let the background show through.
Why do you need an HSLA color picker?
An HSLA color picker is a tool for choosing a color by hue, saturation and lightness and then setting its opacity, all in one place. With an HSLA color picker, you can reason about a color in plain terms, fade it in or out with the alpha slider, and copy a ready-to-use hsla() code straight into your CSS.
Meaning of each value in an HSLA color
Common HSLA opacity levels
What HSLA is good for
- Tinted overlays on images where you want a recognisable brand hue at low opacity.
- Hover and active states built by lowering the alpha of an existing HSL color instead of picking a new one.
- Layered UI, such as frosted panels and scrims, where several semi-transparent colors stack.
- Smooth fade-in and fade-out animations, since only the alpha needs to change between frames.
HSLA vs RGBA
Both add an alpha channel, so the real choice is about the first three values. RGBA describes the color as amounts of red, green and blue light, which matches how screens work; HSLA describes it as hue, saturation and lightness, which matches how people think. They convert cleanly between each other, so pick HSLA when you want to tweak the color by hand and RGBA when you are matching an existing RGB value. For solid colors with no transparency, the HSL color picker is all you need.
Why HSLA is the friendliest transparent color
For a see-through color that still needs fine-tuning, HSLA is the pick. It keeps HSL’s plain-language control over hue and lightness and adds an opacity dial, so dimming a brand color for an overlay takes one slider rather than a fresh guess. RGBA works too, but HSLA is friendlier to adjust.
HSLA adds a fourth value, alpha, for opacity. The first three behave exactly as in HSL.
It shows the color at 60% opacity, letting 40% of the background through.
Yes. hsla() works in every modern browser, and modern CSS even lets you add the alpha inside hsl() directly.
Not on its own. It makes the color more transparent, so it looks lighter only because more of the background shows through.