Hex, RGB and HSL
Enter the colour in whichever notation you have, and the others fill in. All three fields stay in step.
How it looks
Text on white · 3.89
Text on black · 5.39
- Hex#e0521f
- RGBrgb(224, 82, 31)
- HSLhsl(16, 76%, 50%)
Channels
- Red224
- Green82
- Blue31
- Hue16°
- Saturation76%
- Lightness50%
Lightness scale
The same hue and saturation, with lightness from 10 to 90%. Click a swatch to select it.
How it works
Hex is the same thing as RGB, written in hexadecimal. Each pair of characters is one channel, from 00 to ff, which is 0 to 255.
The three-character short form doubles each character. #f30 means #ff3300, which is why only 4,096 of the 16.7 million colours can be written that way.
HSL describes the same colours by hue, saturation and lightness rather than three light sources. The hue is an angle on the colour wheel, where 0 is red, 120 green and 240 blue.
HSL is easier to work with when you want variants of one colour. Keep the hue and saturation, change only the lightness, and you get a scale that holds together.
Conversion between RGB and HSL is exact both ways, but rounding HSL to whole degrees and percentages can move a channel by one step when you go back and forth.
How the tool converts
From RGB to HSL, each channel is first divided by 255. Lightness L is the mean of the largest and smallest channels. Saturation S is the difference between them divided by 1 − |2L − 1|. Hue H depends on which channel is largest and is given in degrees. The other way round uses the same six-sector colour wheel, and the channels are rounded to whole numbers. The hex, RGB and HSL rows show whole numbers, while the shades at the bottom are worked out from the unrounded values.
Worked example
#1e90ff is red 30, green 144 and blue 255, that is 0.118, 0.565 and 1. The largest is 1 and the smallest 0.118, so L = (1 + 0.118) / 2 = 0.559, or 55.9%. The difference 0.882 divided by 1 − |2 × 0.559 − 1| = 0.882 gives S = 1, or 100%. Blue is largest, so H = 60 × ((0.118 − 0.565) / 0.882 + 4) = 209.6 degrees.
The tool writes the colour as hsl(210, 100%, 56%). Type that text in and you get back #1f8fff, not #1e90ff, because rounding to whole degrees and percentages has moved red and green by one step each.
HSL lightness is not perceived lightness
CSS Color 4 points out that yellow and blue both have an HSL lightness of 50%, yet the yellow looks much lighter. The tool’s own contrast figures show the same: hsl(60, 100%, 50%) gives a ratio of 1.07 against white and hsl(240, 100%, 50%) gives 8.59. The shades under the colour keep hue and saturation and change only the lightness, in steps of 10 percentage points. They hang together in hue, but the steps do not look equal.
What the tool reads
The fields follow CSS Color 4: hex with three, four, six or eight characters, rgb() with numbers or percentages, where 100% is 255, and hsl() with the hue in degrees or in the units deg, rad, grad and turn. Values may be separated by commas or spaces. So rgb(50%, 50%, 50%) becomes rgb(128, 128, 128), and hsl(0.5turn, 100%, 50%) gets the hue 180 degrees, which is #00ffff.
Transparency, in four- or eight-character hex, as a fourth value or after a slash, is dropped: the tool works with opaque colours and says how much there was. Values outside their ranges, such as rgb(300, 0, 0), are rejected so that a typing error shows, although CSS clamps them.