To convert a hex colour to RGB, split it into three pairs and read each pair as a base 16 number from 0 to 255; to get HSL, scale those to 0 to 1 and work out hue, saturation and lightness from the largest and smallest channel. You can work it out by hand or use PrismKit, a free, offline Windows utility from Automata Labs whose converters include HEX, RGB and HSL. This guide shows the formulas, a full worked example, and why a colour can come back one digit off after a round trip.
Convert HEX, RGB and HSL from a hotkey, offline, without opening a browser tab.
Get it fromMicrosoft
What does a hex colour code actually contain?
The CSS Color Module Level 4 specification defines the hex notation. A six digit code such as #3A7BD5 is three pairs of hexadecimal digits, one each for red, green and blue. Each pair runs from 00 to ff, which is 0 to 255 in decimal.
The specification also defines the shorthand: a three digit code repeats each digit, so #123 is the same colour as #112233. Four and eight digit forms add an alpha channel in the same way.
| Notation | Example | Same colour as |
|---|---|---|
| 6 digit hex | #00ff00 | rgb(0 255 0) |
| 3 digit hex | #123 | #112233 |
| 8 digit hex | #3A7BD580 | #3A7BD5 with alpha about 50% |
Hex digits are not case sensitive, so #3a7bd5 and #3A7BD5 are identical.
How do you convert HEX to RGB by hand?
Each hex digit is worth 0 to 15, with A to F standing for 10 to 15. In a pair, multiply the first digit by 16 and add the second.
Take #3A7BD5:
| Channel | Pair | Calculation | Value |
|---|---|---|---|
| Red | 3A | 3 × 16 + 10 | 58 |
| Green | 7B | 7 × 16 + 11 | 123 |
| Blue | D5 | 13 × 16 + 5 | 213 |
So #3A7BD5 is rgb(58 123 213). That space separated form is the modern CSS syntax; the older comma form rgb(58, 123, 213) means the same thing.
Going back is the reverse: divide by 16 for the first digit and use the remainder for the second. 213 divided by 16 is 13 remainder 5, which is D5.
How do you convert RGB to HSL?
HSL describes the same colour as hue (an angle on the colour wheel), saturation and lightness. In CSS Color 4, hue 0 is red, 120 is green and 240 is blue. Lightness runs from 0% black to 100% white; a fully saturated hue sits at 50%.
The steps:
- Divide each channel by 255 to get r, g and b between 0 and 1.
- Find max and min of the three, and d = max minus min.
- Lightness: L = (max + min) / 2.
- Saturation: if d is 0, S = 0 (a grey). Otherwise S = d / (1 minus the absolute value of (2L minus 1)).
- Hue: if d is 0, hue does not matter. Otherwise:
- if max is r: H = 60 × (((g minus b) / d) mod 6)
- if max is g: H = 60 × ((b minus r) / d + 2)
- if max is b: H = 60 × ((r minus g) / d + 4)
If a calculator or programming language returns a negative hue, add 360 degrees. Some languages implement remainder rather than mathematical modulo. Multiply S and L by 100 to express them as percentages.
Worked example: #3A7BD5
Keep full precision during the calculation; the decimals below are rounded only for display.
| Step | Working | Result |
|---|---|---|
| Scale | 58/255, 123/255, 213/255 | r 0.227451, g 0.482353, b 0.835294 |
| Max and min | max is b, min is r; d = 155/255 | max 0.835294, min 0.227451, d 0.607843 |
| Lightness | (213 + 58) / (2 × 255) | 0.531373, or 53.1373% |
| Saturation | (155/255) / (239/255) | 0.648536, or 64.8536% |
| Hue | 60 × ((58 minus 123) / 155 + 4) | 214.8387 degrees |
Rounded to whole degrees and percentages, #3A7BD5 is about hsl(215 65% 53%).
What about greys?
For #808080, all three channels are 128, so d is 0. Saturation is 0 and lightness is about 50%. The CSS Color 4 specification calls hue “powerless” in this case: any hue gives the same grey, so tools often show 0. Do not read meaning into the hue of a grey.
Paste a hex code and convert it to RGB and HSL, with nothing leaving your machine.
Get it fromMicrosoft
Why does my colour change after converting to HSL and back?
Rounding. HSL values are usually shown as whole numbers, and a whole degree of hue or a whole percent of saturation is a coarser step than one unit of an 8 bit channel in some parts of the colour space.
Take the rounded result above, hsl(215 65% 53%), and convert it back to RGB. You get about 57, 122 and 213, which is #397AD5, not the #3A7BD5 you started with. The colours are nearly identical on screen, but if a brand guide or a design token says #3A7BD5, a one digit change shows up in code review and in automated checks.
| Value | Hex | Note |
|---|---|---|
| Original | #3A7BD5 | Source of truth |
| Rounded HSL | hsl(215 65% 53%) | Whole numbers |
| Back to hex | #397AD5 | Red and green off by one |
Ways to avoid drift:
- Keep the hex or RGB value as the source of truth and treat HSL as a derived view for adjusting colours.
- Keep decimals in HSL when you need a round trip, for example
hsl(214.8 64.9% 53.1%). - Convert once rather than chaining conversions through several tools.
Is HSL lightness the same as how light a colour looks?
No. The CSS Color 4 specification points out that hsl(240 100% 50%) (blue) and hsl(60 100% 50%) (yellow) have the same HSL lightness but look very different in lightness. HSL is a rearrangement of RGB, not a perceptually uniform model. The specification contrasts it with OkLCh, whose lightness tracks perceived differences more consistently. That matters when you build a palette whose steps should look evenly spaced.
For everyday work, such as nudging a hover state 10% lighter or desaturating a background, HSL is still convenient. Just do not use HSL lightness alone to judge text contrast.
Which format should you use in code?
| Need | Good choice | Why |
|---|---|---|
| Brand colour, design tokens | Hex | Compact, exact, easy to compare |
| Alpha transparency | 8 digit hex or rgb() with alpha | Explicit opacity |
| Adjusting tints and shades by hand | HSL | Lightness and saturation are separate numbers |
| Perceptually even palettes | OkLCh | Lightness tracks how light a colour looks |
How does PrismKit help?
PrismKit is a keyboard first, local only utility belt for Windows. Hit your hotkey, type what you need, and the command palette does the rest. Its free core includes 36 tools, and the converters cover HEX, RGB and HSL alongside epoch timestamps and text casing. Because it is fully offline, colour values, along with anything else you paste, never go to a website. There is no tracking and no telemetry.
If you work with colour often, our colour and contrast picker workflow covers picking colours on screen, and our guide to copying and pasting hex codes with a colour value history helps you keep track of the values you have used.
Frequently asked questions
Is #FFF the same as #FFFFFF?
Yes. In the three digit form each digit is repeated, so #FFF is #FFFFFF, which is white.
Why is hue 0 and 360 the same?
Hue is an angle on a colour wheel, so 0 and 360 degrees both point at red.
Can every hex colour be written in HSL?
Yes. HSL is another way of writing sRGB colours, so every hex colour has an HSL equivalent, though rounding can make the round trip inexact.
Does PrismKit need an internet connection?
No. PrismKit is 100% offline and local first.
Try PrismKit
PrismKit is free in the Microsoft Store, with optional one-time expansion packs. The listing shows the system requirements. See the PrismKit product page for the full list of tools.
Get PrismKit free and keep HEX, RGB and HSL one hotkey away.
Get it fromMicrosoft