Colour converter (HEX, RGB, HSL)
Pick a colour or paste a HEX, RGB or HSL value and get it in all three forms, ready to copy into your CSS.
Free · no signup Runs in your browser
How do I convert HEX to RGB?
Paste the HEX code, such as #1e90ff, and the RGB and HSL values appear at once. HEX is three pairs of hexadecimal digits giving the red, green and blue amounts from 00 to ff, so #1e90ff is red 30, green 144 and blue 255. You can also paste an rgb() or hsl() value, or use the colour picker, and copy whichever form you need.
Three ways to write the same colour
Web colours are almost always red, green and blue light mixed on a screen. HEX writes the three amounts as pairs of hexadecimal digits, which is compact and common in design tools. RGB writes them as three numbers from 0 to 255, which is easier to calculate with. HSL describes the same colour as a hue (an angle from 0 to 360 on the colour wheel), a saturation and a lightness, which is closer to how people think: you can make a colour lighter by raising one number instead of changing three.
The converter works in all directions. Paste any of the three forms, or choose a colour with the picker, and the other two forms are shown. Three-digit HEX shorthand such as #09f is expanded to #0099ff.
It runs in your browser. Nothing you enter is sent anywhere.
How it works in detail
A HEX code is a # followed by the red, green and blue amounts as two hexadecimal digits each, from 00 to ff, so #1e90ff is red 0x1e = 30, green 0x90 = 144 and blue 0xff = 255, which is rgb(30, 144, 255). The tool reads whichever form you type or pick (HEX, RGB or HSL) and shows the other two at once. HSL describes the same colour as a hue (0 to 360 degrees around the colour wheel), a saturation (0 to 100%) and a lightness (0 to 100%); for #1e90ff that is hsl(210, 100%, 56%). The conversion follows the standard formulas for the sRGB colour space used on the web. HSL values are rounded to whole numbers, so converting from HSL back to HEX can differ by one in a channel. Colours with transparency (alpha) are not handled; the tool reads the first three values.
How to use it
- Type a colour value, or use the colour picker.
- Read the HEX, RGB and HSL forms below.
- Copy the form you need, such as the rgb() line for a stylesheet.
- To lighten or darken a colour, change the lightness in the HSL box and read the new HEX.
- Check the colour on the page before you use it.
What changes and what stays the same
What the tool does with your input, and what it leaves alone.
| Aspect | What happens |
|---|---|
| The colour | The same colour in three notations (within rounding) |
| Transparency | Not handled: only the first three values are read |
| Rounding | HSL is rounded to whole numbers, so a round trip can differ by 1 in a channel |
| Colour space | sRGB, the standard for the web |
| Short HEX | A three-digit code like #fa0 is the same as #ffaa00 |
| Privacy | Everything is worked out in your browser; what you type or choose is not uploaded or saved |
When to use it
- Turning a design tool's HEX code into the RGB value a program needs
- Making a colour lighter or darker with HSL
- Building a colour palette in CSS
- Checking what colour a code is
Problems you may run into
Most problems come from the input, not from the tool.
| What you see | Likely cause | What to do |
|---|---|---|
| The result is off by one | HSL is rounded to whole numbers | Use HEX or RGB as the master value and treat HSL as a helper |
| My colour has an alpha value | Transparency is not handled | Convert the colour first, then add the alpha in your CSS |
| The colour looks different on my screen | Screens and colour profiles differ | Check on the device your readers use |
| I typed a name like 'red' | Named colours may not be read | Use a HEX, RGB or HSL value |
| 'Not a colour' | A digit is missing or a character is not hexadecimal | Use six hexadecimal digits (0 to 9, a to f) after the # |
| Nothing happens after I paste | The box is empty, or the text was copied as an image | Copy the text again from the source and paste it into the box |
Mistakes it helps you avoid
- Mixing up the order: HEX and RGB are red, green, blue.
- Forgetting the # in CSS HEX values.
- Reading HSL saturation and lightness as 0 to 1 when CSS expects percentages.
- Assuming a colour will look the same on every screen: displays differ.
How it works
Everything happens in your browser as you type.
HEX = # then red, green and blue as two hexadecimal digits each (00 to ff)RGB = red, green and blue as numbers from 0 to 255HSL = hue (0 to 360 degrees), saturation (0 to 100%), lightness (0 to 100%)#1e90ff = red 0x1e = 30, green 0x90 = 144, blue 0xff = 255 = rgb(30, 144, 255) = hsl(210, 100%, 56%)
The conversion follows the standard formulas for the sRGB colour space used on the web. HSL values are rounded to whole numbers, so converting from HSL back to HEX can differ by one in a channel. Colours with transparency (alpha) are not handled; the tool reads the first three values.
Example: dodger blue
A design file gives you the colour #1e90ff and you need it in RGB and HSL.
- Red: 1e in hexadecimal30
- Green: 90144
- Blue: ff255
- HSLhsl(210, 100%, 56%)
rgb(30, 144, 255) and hsl(210, 100%, 56%)
Use the Copy buttons to take either into your CSS.
Terms on this page
- HEX
- A colour written as # and six hexadecimal digits.
- HSL
- A colour described by hue, saturation and lightness.
Common questions
What is a HEX colour code?
A way of writing a colour as # followed by six hexadecimal digits: two each for red, green and blue.
How do I convert RGB to HEX?
Write each of the three numbers in hexadecimal, using two digits each, and put them after a #. For example rgb(30, 144, 255) is #1e90ff. The tool does it for you.
What does HSL stand for?
Hue, saturation, lightness. Hue is the colour as an angle on the colour wheel, saturation is how vivid it is and lightness how bright.
Does it handle three-digit HEX?
Yes. #09f is read as #0099ff.
Is anything uploaded?
No. The conversion happens in your browser.
Where these numbers come from
- MDN Web Docs — CSS colour values The HEX, RGB and HSL notations used in CSS.
- W3C — CSS Color Module Level 4 The colour formats and the HSL to RGB conversion formulas.
Last verified 2026-10-25 The method on this page is checked against the sources above at least once a year. Spotted something out of date? Tell us and we will fix it.
Related tools
Contrast checker
Check the contrast ratio between text and background colours and see whether it passes WCAG AA and AAA.
Open toolImage resizer
Change a picture's size in pixels by width, height, percentage or exact size. Many files at once, nothing uploaded.
Open toolText compare
Paste two versions of a text and see what was added and removed, by word or by line.
Open toolImage colour picker
Click any point of a picture to get its HEX, RGB, HSL and CMYK values, see the picture's main colours as a palette, or pick from anywhere on screen. Free, private.
Open toolJSON to CSV
Paste a JSON array and get CSV for a spreadsheet, with all keys as columns, proper quoting and an optional Excel byte-order mark.
Open toolCSS gradient generator
Build a linear, radial or conic CSS gradient with up to four colour stops, see it live and copy the CSS.
Open tool🧰 Developer and web tools
Small developer and web jobs done in your browser. What you paste or choose is never sent anywhere.
See all 24 tools in this section