RGB to HSL Converter
Convert RGB values to HSL (Hue, Saturation, Lightness) format. Great for creating color variations and working with modern CSS color functions.
Synchronized color
#F59E0BParsed 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=F59E0BOne input, implementation-ready output
Color workspace
Hex
#RRGGBB
#F59E0BCSS RGB
Modern space syntax
rgb(245 158 11)Legacy RGB
Comma syntax
rgb(245, 158, 11)RGB %
Percentage channels
rgb(96.1% 62% 4.3%)HSL
CSS hue, saturation, lightness
hsl(38 92% 50%)HSV / HSB
Design-tool model
hsv(38, 96%, 96%)OKLCH
Perceptual CSS color
oklch(76.9% 0.165 70.1)LAB
CSS Lab, D50
lab(72.79% 26.93 75.43)LCH
CSS LCH, D50
lch(72.79% 80.10 70.35)CMYK
Unprofiled approximation
cmyk(0%, 36%, 96%, 4%)How to Convert RGB to HSL
RGB says how much of each primary to emit. HSL re-describes the same colour in terms a designer can adjust by eye: which hue it is, how vivid, and how light.
- Divide each channel by 255 so R', G', B' fall in 0-1.
- Take max and min across the three, and their difference delta = max - min.
- Lightness is the midpoint of the extremes: L = (max + min) / 2.
- If delta is 0 the colour is achromatic — hue and saturation are both 0. Otherwise S = delta / (1 - |2L - 1|).
- Hue depends on which channel is the maximum: red gives 60 x ((G'-B')/delta mod 6), green gives 60 x ((B'-R')/delta + 2), blue gives 60 x ((R'-G')/delta + 4). Add 360 if the result is negative.
Example: convert rgb(255, 87, 51) to HSL
R' = 1.000, G' = 0.341, B' = 0.200
max 1.000 (red), min 0.200, delta 0.800
L = (1.000 + 0.200) / 2 = 0.600 -> 60%
S = 0.800 / (1 - |2(0.6) - 1|) = 1.000 -> 100%
H = 60 x ((0.341 - 0.200)/0.800 mod 6) = 11deg
Result: hsl(11, 100%, 60%)
How to Use the RGB to HSL Converter
Enter RGB values in any common format - rgb(255, 87, 51), just the numbers, or use the sliders. Instantly see the HSL equivalent along with hex and CMYK values. Copy any format with one click.
Why Convert RGB to HSL
RGB to HSL conversion is essential for color manipulation tasks. Once in HSL format, it's trivial to create lighter tints, darker shades, or less saturated versions of any color. This is why many CSS frameworks and design systems use HSL as their primary color format.
Common Use Cases
Creating hover states by lightening/darkening colors, generating accessible color schemes by adjusting lightness for contrast, building theming systems where colors need programmatic adjustment, and converting brand colors to a format that's easier to create variations from.
RGB to HSL Conversion Table
RGB, HSL, 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 RGB to HSL Converter
After converting to HSL, increase the L (lightness) value while keeping H (hue) and S (saturation) the same. This creates a tint of the original color.
Increase the S (saturation) value. At 100% saturation, the color is at its most vivid. At 0% saturation, it becomes a shade of gray.
When saturation is 0% (pure gray), the hue value is mathematically undefined since there's no color component. Converters typically output 0 in this case.
HSL uses Lightness (0-100) while HSV/HSB uses Value/Brightness. In HSL, 50% lightness gives the pure hue, while in HSV, 100% value with full saturation gives the pure hue. They're similar but calculate brightness differently.
Keep the color moving
Useful next steps
Your latest color stays in the local workspace when the next tool uses it.