HSL to RGB Converter
Convert HSL (Hue, Saturation, Lightness) values to RGB. Perfect for developers working with CSS color functions and creating color variations.
Synchronized color
#10B981Parsed as RGB; malformed or out-of-range channels are rejected, never silently clamped.
Integer or percentage RGB, modern or legacy CSS, Hex with optional alpha, HSL, HSV, OKLCH, LAB, LCH, CMYK, or a CSS name.
Adjust channels
Share this exact input
?color=10B981One input, implementation-ready output
Color workspace
Hex
#RRGGBB
#10B981CSS RGB
Modern space syntax
rgb(16 185 129)Legacy RGB
Comma syntax
rgb(16, 185, 129)RGB %
Percentage channels
rgb(6.3% 72.5% 50.6%)HSL
CSS hue, saturation, lightness
hsl(160 84% 39%)HSV / HSB
Design-tool model
hsv(160, 91%, 73%)OKLCH
Perceptual CSS color
oklch(69.6% 0.149 162.5)LAB
CSS Lab, D50
lab(66.69% -50.67 17.06)LCH
CSS LCH, D50
lch(66.69% 53.46 161.39)CMYK
Unprofiled approximation
cmyk(91%, 0%, 30%, 27%)How to Convert HSL to RGB
HSL positions a colour on a cylinder: hue is the angle, saturation the distance from the axis, lightness the height. Converting to RGB means finding the point that cylinder describes.
- Compute the chroma — how far the colour is from grey: C = (1 - |2L - 1|) x S, with S and L as fractions.
- Locate the hue within its 60° sector: H' = H / 60, then X = C x (1 - |H' mod 2 - 1|).
- Assign C, X, and 0 to the channels by sector: 0-60° gives (C, X, 0), 60-120° gives (X, C, 0), 120-180° gives (0, C, X), 180-240° gives (0, X, C), 240-300° gives (X, 0, C), 300-360° gives (C, 0, X).
- Lift the result to the right lightness with the match value m = L - C/2, adding it to all three channels.
- Multiply each channel by 255 and round.
Example: convert hsl(210, 100%, 50%) to RGB
C = (1 - |2(0.5) - 1|) x 1.0 = 1.000
H' = 210 / 60 = 3.5 -> the 180-240deg sector
X = 1.000 x (1 - |3.5 mod 2 - 1|) = 0.500
sector (0, X, C) = (0.000, 0.500, 1.000)
m = 0.5 - 1.000/2 = 0.000
x255: (0, 128, 255)
Result: rgb(0, 128, 255)
How to Use the HSL to RGB Converter
Enter HSL values directly or use the intuitive sliders to adjust hue, saturation, and lightness. The converter instantly shows the RGB equivalent and all other formats. The hue slider shows the full color spectrum for easy selection.
Understanding the HSL Color Model
HSL represents colors in a way that matches human perception. The hue is the base color (like red or blue), saturation is how vibrant or muted the color is, and lightness determines how light or dark it appears. This makes it much easier to create color variations and palettes than working directly with RGB values.
Common Use Cases
CSS developers frequently use HSL for creating color themes and variations. By keeping the hue constant and varying saturation and lightness, you can create cohesive color schemes. It's also useful for programmatically generating color palettes and adjusting colors dynamically.
HSL to RGB Conversion Table
HSL, RGB, and hex values for the most commonly used colors. Click any hex code to load it into the converter above.
| Color | Name | Hex | RGB | HSL |
|---|---|---|---|---|
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | |
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | |
| Lime | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) | |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) | |
| Yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) | |
| Cyan | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) | |
| Magenta | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) | |
| Silver | #C0C0C0 | rgb(192, 192, 192) | hsl(0, 0%, 75%) | |
| Gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) | |
| Maroon | #800000 | rgb(128, 0, 0) | hsl(0, 100%, 25%) | |
| Olive | #808000 | rgb(128, 128, 0) | hsl(60, 100%, 25%) | |
| Green | #008000 | rgb(0, 128, 0) | hsl(120, 100%, 25%) | |
| Purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) | |
| Teal | #008080 | rgb(0, 128, 128) | hsl(180, 100%, 25%) | |
| Navy | #000080 | rgb(0, 0, 128) | hsl(240, 100%, 25%) | |
| Orange | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) | |
| Pink | #FFC0CB | rgb(255, 192, 203) | hsl(350, 100%, 88%) | |
| Gold | #FFD700 | rgb(255, 215, 0) | hsl(51, 100%, 50%) | |
| Brown | #A52A2A | rgb(165, 42, 42) | hsl(0, 59%, 41%) | |
| Coral | #FF7F50 | rgb(255, 127, 80) | hsl(16, 100%, 66%) | |
| Indigo | #4B0082 | rgb(75, 0, 130) | hsl(275, 100%, 25%) | |
| Violet | #EE82EE | rgb(238, 130, 238) | hsl(300, 76%, 72%) | |
| Salmon | #FA8072 | rgb(250, 128, 114) | hsl(6, 93%, 71%) |
Need a value that is not listed? Browse the full color library — every hex code has a page with its RGB, HSL, CMYK and OKLCH values, contrast ratios, tints, shades and matching palette colors.
Frequently Asked Questions about HSL to RGB Converter
H is Hue (0-360 degrees on the color wheel), S is Saturation (0-100%, color intensity), and L is Lightness (0-100%, from black to white). This model is more intuitive for humans than RGB.
HSL is more intuitive for color adjustments. Want a darker shade? Lower the L. Want a more muted tone? Lower the S. With RGB, achieving the same effect requires adjusting all three channels.
Red is at 0 degrees (or 360, as the color wheel wraps around). Yellow is at 60, green at 120, cyan at 180, blue at 240, and magenta at 300 degrees.
Yes, hsl() and hsla() color functions are supported in all modern browsers and have been since IE9. They're part of CSS3 and are widely used in modern web development.
Keep the color moving
Useful next steps
Your latest color stays in the local workspace when the next tool uses it.