Convert a color between HEX, RGB and HSL
Published · Updated 3 min read
HEX, RGB and HSL are three ways of writing the same color. You meet them in a drawing program, a style sheet, a mockup tool or a brand guide, and you keep moving from one to another. The tool shows all three at once and accepts the common notations.
Three notations of the same color
Explore colors shows the three forms by default, with a preview of the color. HEX is a string of six digits and letters preceded by a hash sign. RGB gives the amounts of red, green and blue, from 0 to 255. HSL describes hue in degrees, saturation and lightness as percentages, which is often more intuitive for lightening or darkening a color. For the green #2F4A3F:
| Form | Result |
|---|---|
| HEX | #2f4a3f |
| RGB | rgb(47, 74, 63) |
| HSL | hsl(156, 22%, 24%) |
The three HEX, RGB and HSL buttons of the panel reduce the result to a single form, handy to copy as it is.
Accepted notations
| Notation | Example | Result in HEX |
|---|---|---|
| Short HEX | #fff | #ffffff |
| HEX with transparency | #2F4A3F80 | #2f4a3f80 |
| RGB with commas | rgb(47, 74, 63) | #2f4a3f |
| RGB with spaces | rgb(47 74 63) | #2f4a3f |
| RGB in percentages | rgb(100%, 0%, 0%) | #ff0000 |
| HSL with spaces | hsl(156 22% 24%) | #304b40 |
Color names such as "red", and values outside 0 to 255 such as rgb(300, 0, 0), are refused with a message listing the accepted notations.
Transparency
A transparency is written in HEX with eight digits, or after a slash with spaces. The color rgb(47 74 63 / 50%) gives #2f4a3f80 in HEX and rgba(47, 74, 63, 0.5) in RGB. Conversely, #2F4A3F80 gives an opacity of 0.502, because 80 in hexadecimal is 128 out of 255.
Why a round trip changes by one level
HSL is shown in whole numbers: hue in degrees, saturation and lightness as percentages. Going back from HSL to HEX therefore lands on a neighboring color, not always the starting one.
| Start | HSL shown | Back to HEX |
|---|---|---|
| #2F4A3F | hsl(156, 22%, 24%) | #304b40 |
| #B5532E | hsl(16, 59%, 45%) | #b6532f |
The gap is one level on each channel, invisible to the eye. For a design token or a brand, keep the original HEX as the reference and do not go through HSL.
Grays
A gray has zero saturation and a hue with no effect: #808080 gives rgb(128, 128, 128) and hsl(0, 0%, 50%).
What the tool does not measure
A format conversion says nothing about legibility. The tool does not calculate the contrast between a text and its background: check it separately before publishing. The case of a QR code, where contrast decides whether it reads, is covered in Create a QR code that scans the first time.
For which uses
A graphic designer passing a color to a developer, a person adapting a style sheet, a teacher preparing a handout: the same color is written in three ways depending on the tool.
Check a conversion
- Paste the color into the field: the preview must match what you expect.
- Copy the form your system asks for.
- To keep the exact color, keep the HEX or the RGB rather than the HSL.
Frequently asked questions
- How do you convert HEX to RGB?
- Paste the color into the tool, which shows the three forms at once, for example #2F4A3F, rgb(47, 74, 63) and hsl(156, 22%, 24%).
- Why does a round trip through HSL change the color by one level?
- HSL is shown in whole numbers. Keep the original HEX as the reference.
- How do you write a transparency?
- In HEX with eight digits, or in RGB with a slash, for example rgb(47 74 63 / 50%).
- Does the tool check the legibility of the text?
- No, it does not calculate the contrast between a text and its background: check it separately.