devkult_
tools24converters26
home/convert/hsl-to-rgb

Convert HSL to RGB

Canvas APIs, image processing, and many libraries expect RGB. This converter resolves an HSL color — hue, saturation, and lightness — into the red, green, and blue channel values those tools need.

Example · HSLRGB
HSL input
hsl(6, 63%, 46%)
hsl(164, 76%, 47%)
hsl(213, 100%, 66%)
RGB output
rgb(191, 58, 43)
rgb(29, 211, 162)
rgb(82, 160, 255)

Try it with your own data

RGBrgb(192, 57, 43)
Hex#C0392B
5.44: 1
PASSWCAG AA (4.5:1)
FAILWCAG AAA (7:1)

Frequently Asked Questions

What is WCAG?

The Web Content Accessibility Guidelines (WCAG) define how to make web content more accessible to people with disabilities. Contrast ratios are a key part of these guidelines to ensure text is readable against its background.

What contrast ratio should I aim for?

Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires at least 7:1 for normal text and 4.5:1 for large text.

How to convert HSL to RGB

  1. Take your HSL value, e.g. hsl(6, 63%, 46%).
  2. Use lightness and saturation to find the chroma range.
  3. Map the hue angle onto red, green, and blue to get rgb(191, 58, 43).

Frequently asked questions

Are the RGB values 0–255?

Yes. Each channel is returned as an integer from 0 to 255, the standard 8-bit-per-channel range used across the web.

What if saturation is 0%?

A saturation of 0% is a shade of gray, so all three RGB channels come out equal, determined entirely by the lightness.

Related converters