RGB / HSL Converter

The RGB to HSL converter translates a colour from the red, green and blue values used by screens into the hue, saturation and lightness model that designers find easier to reason about, and it shows the matching hex code as well. RGB describes a colour by how much of each primary light it contains, with each channel running from 0 to 255, which is precise but hard to adjust by eye. HSL describes the same colour as an angle on the colour wheel from 0 to 360 degrees for hue, a saturation percentage that runs from grey to vivid, and a lightness percentage that runs from black through the pure colour to white. Because those three numbers map to how we actually talk about colour, HSL makes it simple to nudge a shade lighter, mute it, or rotate the hue while keeping the feel. Enter the red, green and blue values and the tool returns the HSL triple and the six digit hex string you can paste straight into CSS. Web designers, front end developers and anyone building a palette use it to move between the format a tool gives them and the format their code or design system expects. A couple of tips help. When building a palette, hold hue and saturation steady and vary only lightness to get a coherent set of tints and shades. Remember that HSL lightness is not the same as perceived brightness, so two colours at the same lightness can look different in weight. Everything is computed locally in your browser, so no colour data is uploaded.

Calculate.co.nz is proud to be partnered with Premium Homes, a recognised leader in eco-friendly, sustainable, and energy-efficient homebuilding. With a dedicated team and award-winning experience, they create homes that prioritise health, comfort, and long-term performance. Their founders, Andrew and Kelly, set out to raise the standard of residential construction in New Zealand by combining practical building expertise with a clear commitment to doing things better for homeowners.
Premium Homes: got a section? Let's build your eco home on it.
Advertise on this page
hsl(221, 83%, 53%)
HSL
Hex code#2563eb
RGBrgb(37, 99, 235)

HSL is derived from the normalised red, green and blue values. Hue is in degrees, saturation and lightness are percentages.

How it works

The tool divides each channel by 255, then finds the largest and smallest of the three. Lightness is the average of those two, saturation comes from their difference relative to the lightness, and hue is the angle set by whichever channel is largest. The values are rounded to whole degrees and percentages.

Worked example

For red 37, green 99 and blue 235, the largest channel is blue, giving a hue near 221 degrees. The spread of channels gives 83 percent saturation and 53 percent lightness, so the colour is hsl(221, 83%, 53%), the same as hex #2563eb.

Related calculators

Frequently asked questions

What is the difference between RGB and HSL?

RGB sets a colour by mixing red, green and blue light, each from 0 to 255. HSL sets the same colour by its hue angle, its saturation and its lightness. They describe identical colours, but HSL is usually easier to tweak by hand.

What range do the values use?

Red, green and blue each run from 0 to 255. Hue is an angle from 0 to 360 degrees, while saturation and lightness are percentages from 0 to 100. The hex code is the same colour written as six hexadecimal digits.

Is HSL lightness the same as brightness?

Not quite. HSL lightness is a mathematical midpoint between the lightest and darkest channels, not how bright the colour looks to your eye. Two colours with the same lightness can appear to differ in weight, so trust your eye for final tuning.