HSLA to RGBA Converter
Convert HSLA colors (with transparency) to RGBA format. Both formats support alpha transparency, but RGBA is more widely compatible with programming interfaces and older systems.
Understanding HSLA and RGBA
Both formats add alpha (transparency) to their base color models:
| Format | Components |
|---|---|
| HSLA | Hue, Saturation, Lightness, Alpha |
| RGBA | Red, Green, Blue, Alpha |
HSLA to RGBA Examples
| Color | HSLA | RGBA |
|---|---|---|
| Semi-red | hsla(0, 100%, 50%, 0.5) | rgba(255, 0, 0, 0.5) |
| Light blue | hsla(200, 80%, 70%, 0.8) | rgba(122, 194, 230, 0.8) |
| Overlay | hsla(0, 0%, 0%, 0.4) | rgba(0, 0, 0, 0.4) |
Common Use Cases
| Use Case | Example |
|---|---|
| Modal overlays | hsla(0, 0%, 0%, 0.5) → rgba(0, 0, 0, 0.5) |
| Glass effects | hsla(0, 0%, 100%, 0.2) → rgba(255, 255, 255, 0.2) |
| Shadows | hsla(220, 50%, 20%, 0.3) → rgba(26, 41, 77, 0.3) |
CSS Usage
``css
.overlay {
background-color: hsla(220, 80%, 20%, 0.8);
/* Equivalent */
background-color: rgba(10, 41, 92, 0.8);
}
`
Use this converter when you need RGBA format for API compatibility while working with HSLA colors.
HSLA and RGBA
| HSLA | RGBA | |
|---|---|---|
| Syntax | hsla(9, 100%, 64%, 0.5), or hsl(9 100% 64% / 50%) | rgba(255, 99, 71, 0.5), or rgb(255 99 71 / 50%) in modern CSS |
| Channels | hue, saturation, lightness plus alpha | red, green, blue plus alpha from 0 (transparent) to 1 (opaque) |
| Precision | As HSL, with a float alpha | 8 bits per colour channel; alpha is a float |
| Support | Universal. | Universal. |
| Best for | Palette work that also needs transparency. | Overlays, shadows, disabled states — anywhere the colour must let the layer below through. |
A Worked Example
Taking CSS tomato through every format:
| Format | Value |
|---|---|
| HEX | #FF6347 |
| RGB | rgb(255, 99, 71) |
| RGBA | rgba(255, 99, 71, 0.5) |
| HSL | hsl(9, 100%, 64%) |
| HSB | hsb(9, 72%, 100%) |
| CMYK | cmyk(0%, 61%, 72%, 0%) |
Doing It in Code
`javascript
// HEX to RGB
const hexToRgb = (hex) => {
const n = parseInt(hex.replace('#', ''), 16);
return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
};
// RGB to HEX
const rgbToHex = (r, g, b) =>
'#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('');
`
Modern CSS can do a lot of this without any conversion at all: color-mix() blends two
colours, and relative colour syntax — hsl(from var(--brand) h s calc(l + 10%)) — derives
a lighter shade without you ever computing one.
A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.