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.

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