About the RGB to HSL Converter
This converter changes a colour from RGB to HSL. You type the RGB value into three number boxes for red, green and blue, and the HSL value appears at once, together with a swatch so you can see the colour. The channels are scaled to 0 to 1. Lightness is the average of the largest and smallest channel, saturation compares their difference with the lightness, and hue is the angle on the colour wheel, in degrees, of the dominant channels. Out-of-range values are explained instead of being silently changed. The result can be copied with one tap. Everything is calculated in your browser, so nothing you type is uploaded.
Updated October 2026
How to use the RGB to HSL Converter
- 1Enter the RGB value in the boxes.
- 2Watch the colour swatch change.
- 3Read the HSL value in the large result box.
- 4Check the second line for the matching value in another notation.
- 5Press Copy result to keep it.
Why convert RGB to HSL
HSL is easier to adjust than RGB. To make a colour lighter you raise the lightness, to mute it you lower the saturation, and to find a related colour you turn the hue. Designers convert RGB to HSL to build tints, shades and palettes by hand.
The same colour can be written in several notations, and each tool or file format prefers one. Having a quick converter means you do not have to guess or repeat the sum by hand when you move a colour from one place to another.
How the RGB to HSL conversion works
The channels are scaled to 0 to 1. Lightness is the average of the largest and smallest channel, saturation compares their difference with the lightness, and hue is the angle on the colour wheel, in degrees, of the dominant channels.
For rgb(255, 136, 0) the largest channel is 1 and the smallest 0, so lightness is 50 percent and saturation 100 percent, and the hue works out at 32 degrees, an orange: hsl(32, 100%, 50%).
- Hue 0 is red, 120 green and 240 blue.
- Lightness 0 is black and 100 is white.
- Saturation 0 is a grey.
Limits and good habits
Values outside the allowed range, such as an RGB channel above 255 or a percentage above 100, are rejected with a message. Round-trip conversions can drift by one unit because of rounding. If you need a colour to match exactly in print, use the profile supplied by your printer.
The Color Converter on this site shows HEX, RGB, HSL, HSV and CMYK together for one colour, and the Color Contrast Checker tells you whether two colours are readable together.
Phone and computer
On a phone, tap each box and type; the swatch and the HSL value update as you go. On a computer the boxes sit on the left and the result on the right. The page works the same on both, and the Copy button gives you the value to paste into your design tool or style sheet. For the opposite direction use HSL to RGB Converter, and the CSS Gradient Generator blends two colours.
Features
- RGB to HSL as you type
- Colour swatch
- Clear messages for values out of range
- Copy the result
- Private: nothing is uploaded
- Works on phone and computer
Frequently asked questions
How do I convert RGB to HSL?
The channels are scaled to 0 to 1. Lightness is the average of the largest and smallest channel, saturation compares their difference with the lightness, and hue is the angle on the colour wheel, in degrees, of the dominant channels. For rgb(255, 136, 0) the largest channel is 1 and the smallest 0, so lightness is 50 percent and saturation 100 percent, and the hue works out at 32 degrees, an orange: hsl(32, 100%, 50%).
What is the RGB to HSL formula?
The channels are scaled to 0 to 1. Lightness is the average of the largest and smallest channel, saturation compares their difference with the lightness, and hue is the angle on the colour wheel, in degrees, of the dominant channels.
What is rgb(255, 136, 0) as HSL?
hsl(32, 100%, 50%). For rgb(255, 136, 0) the largest channel is 1 and the smallest 0, so lightness is 50 percent and saturation 100 percent, and the hue works out at 32 degrees, an orange: hsl(32, 100%, 50%).
Are the RGB to HSL results exact?
The calculation is exact, but the values are rounded to whole numbers or whole percentages for display, so converting back and forth can differ by one unit.
Why does the colour look different on my screen and on paper?
Screens emit light and paper reflects it, and every screen and printer has its own profile. The converter gives the standard mathematical values; for print jobs, check a printed proof.
Is my input uploaded?
No. The conversion is done in your browser, and nothing is sent to a server.