Convert any HEX color code to HSLA — with hue, saturation, lightness, and alpha — instantly. Paste a HEX value and get HSL, RGBA, and RGB alongside it, no signup required.
What is HSLA and how is it different from HSL?
HSLA is HSL (hue, saturation, lightness) with a fourth value added: alpha, which controls opacity. A HEX code like #3366FF only describes a solid color — it has no opacity information built in. HSLA adds that missing piece as a decimal between 0 (fully transparent) and 1 (fully opaque), written as hsla(225, 100%, 60%, 0.5).
This matters most in CSS, where HSLA lets you use one base color at different transparency levels — for overlays, hover states, or subtle backgrounds — without creating a separate HEX value for every opacity variant.
How HEX converts to HSLA
The HEX-to-HSLA conversion runs through two steps: HEX → RGB, then RGB → HSL, with alpha appended.
- The HEX code splits into red, green, and blue channel values (0–255 each).
- Each channel is normalized to a 0–1 range, and the max/min values across R, G, B determine lightness.
- Saturation and hue are derived from the spread between the max and min channel values.
- Alpha carries over from an 8-digit HEX code if one was entered, or defaults to fully opaque (1) if the HEX code is standard 6-digit.
This tool runs the full calculation client-side and displays HSL, RGBA, RGB, and the normalized HEX alongside the HSLA result, so you can cross-check the value in whichever format your project needs.
When to use HSLA over HEX or RGBA in CSS
HSLA is most useful when you’re building color variations from a single base hue — lighter overlays, transparent borders, or hover/focus states — because adjusting lightness or alpha in HSLA is more predictable than eyeballing a new HEX value.
- WordPress theme.json / block styles: HSLA works directly in
theme.jsoncolor palettes and custom CSS properties, making it easy to define a brand color once and generate transparent variants from it. - Overlay and hover effects: A semi-transparent HSLA value over an image or button (e.g.
hsla(225, 100%, 60%, 0.15)) avoids the need for a separate flat color. - Design handoff: Designers using HSL-based color systems (Figma, Sketch) often hand off values that map directly to HSLA in CSS, skipping a HEX round-trip.
FAQ
What does the A mean in HSLA?
The A stands for alpha, a value from 0 to 1 that sets the color’s opacity — 0 is fully transparent and 1 is fully opaque. It’s the only difference between HSL and HSLA.
How do I convert HEX to HSLA in CSS?
Convert the HEX code to its HSL equivalent (hue, saturation, lightness), then add a fourth alpha value: hsla(hue, saturation%, lightness%, alpha). Browsers don’t convert HEX to HSLA automatically, so the conversion has to happen before the value is written into the stylesheet — this tool does that calculation directly.
Is HSLA the same as RGBA?
No — both add an alpha channel for opacity, but HSLA describes color using hue, saturation, and lightness, while RGBA describes it using red, green, and blue intensities. They represent the same color using different systems, and this tool shows both alongside HSLA for comparison.