Generating tints and shades
Convert your base colour to HSL, then vary the lightness to produce a consistent scale of lighter and darker versions.
Hex to HSL
Convert a hex colour to HSL in your browser, the model that makes colours easy to adjust.
Maintained by Roshan.
Use Hex to HSL
Converts hex colour to hsl in this tab, with nothing sent anywhere.
Runs entirely on your deviceThe conversion happens in this browser tab. Nothing you type is uploaded, logged or stored, which is worth knowing for anything you would not paste into a search box.
Explore general converters
Find related browser-local tools for nearby tasks without starting another search.
Browse all general convertersAbout Hex to HSL
HSL describes a colour the way a person tends to think about it - as a hue, a saturation and a lightness - rather than as amounts of red, green and blue, and converting a hex code into it is what lets you adjust a colour intuitively. Want a slightly lighter shade of the same colour, or a muted version, or the colour opposite it on the wheel? Those are trivial moves in HSL and awkward in hex or RGB, because they map to a single number changing rather than three at once. This converter reads a hex code and returns its hue in degrees, and its saturation and lightness as percentages, which is exactly the form CSS accepts and the form a design system uses to generate tints and shades from a base colour.
Using Hex to HSL
- The hex code is first read as red, green and blue channels, expanding three-digit shorthand as needed.
- Those channels are converted through the standard formula into hue, saturation and lightness.
- Hue is expressed in degrees from 0 to 360, its position on the colour wheel.
- Saturation and lightness are expressed as percentages, the form CSS and design tools expect.
- The result is written as hsl(h, s%, l%), ready to paste.
Where hex to hsl helps
Finding a complementary colour
In HSL, the opposite colour is the same value with the hue rotated by 180 degrees - one number to change.
Before you use the result
- Rounding to whole degrees and percentages means converting back and forth may shift a value by one, which is imperceptible but worth knowing.
- It converts opaque colours; an alpha channel is not handled here.
- A grey - where red, green and blue are equal - has no meaningful hue, so its hue is reported as zero by convention.
- This works in sRGB, the web default, and does not perform wider colour-space conversion.
- It changes how the colour is described, not the colour itself.
Questions about Hex to HSL
Why use HSL over RGB?
Because it matches how people think about colour. Lighter, more muted, or opposite are each one number changing in HSL, versus three in RGB.
What are the units?
Hue in degrees from 0 to 360, saturation and lightness as percentages - the form CSS accepts directly.
Why is my grey's hue zero?
A grey has no hue, so zero is used by convention. Its saturation will be zero, which is what marks it as grey.
Does rounding lose accuracy?
Values are rounded to whole numbers, which can shift a round trip by one - visually imperceptible.
Related tools
Hex to RGB
Convert a hex colour to RGB in your browser, accepting both three and six digit forms.
RGB to Hex
Convert an RGB colour to a hex code in your browser, from any common RGB format.
Text to Hex
Convert text to hexadecimal in your browser. Each character becomes its UTF-8 bytes in hex.