App Interface
Accepts 3, 4, 6 or 8 hex digits, with or without #: #1E90FF, #ABC, #1E90FF80 (last pair is alpha).
What this HEX to RGB converter does
A HEX colour code such as #1E90FF packs three numbers into six hexadecimal digits: two for red, two for green and two for blue. This tool unpacks the code into the rgb() form, the HSL form and the individual channel values, and draws the colour so you can confirm it is the one you meant.
It reads all four HEX lengths used in CSS: 3-digit shorthand (#F80), 4-digit shorthand with alpha (#FFF8), the usual 6 digits and 8 digits with alpha (#1E90FF80). When a code carries alpha, you also get rgba() and hsla(), and the swatch shows the transparency over a checkerboard.
When to use it
- A brand guide gives HEX, but the library or app you are using wants separate R, G and B numbers.
- You need an
rgba()version of a brand colour to add transparency in CSS. - You want HSL so you can create lighter and darker variants of an existing colour.
- You are checking what an unfamiliar 4 or 8-digit code from a design export actually looks like.
How to use it
- Type or paste the code into HEX colour code. The
#is optional and letters can be upper or lower case. - Or click the colour square next to the box to pick a colour with your system colour picker.
- Read the results: RGB, HSL, the full 6-digit HEX, the shorthand where one exists, and the raw channel numbers. For codes with alpha, RGBA, HSLA and the 8-digit HEX are added.
- Use Copy beside any value.
If the code contains a character outside 0-9 and A-F, the tool names it. If it has the wrong number of digits, for example 5, it tells you how many it found and which lengths are valid.
Worked example
Enter #1E90FF. The pairs 1E, 90 and FF are 30, 144 and 255 in decimal, so the tool returns:
rgb(30, 144, 255) hsl(210, 100%, 56%)
Shorthand codes are expanded by doubling each digit: #F80 becomes #FF8800, which is rgb(255, 136, 0). With alpha, #1E90FF80 gives rgba(30, 144, 255, 0.502), because the alpha pair 80 is 128, and 128 divided by 255 is about 0.502.
| HEX | RGB or RGBA |
|---|---|
| #000000 | rgb(0, 0, 0) |
| #FFFFFF | rgb(255, 255, 255) |
| #F80 | rgb(255, 136, 0) |
| #FFF8 | rgba(255, 255, 255, 0.533) |
Common mistakes
- Letter O instead of zero.
#1E9OFFwith a capital O is not a valid code; the tool names the bad character. - Alpha in the wrong place. CSS puts alpha last (
#RRGGBBAA). Some Android and older Windows tools put it first (#AARRGGBB), so a code copied from them reads as a different colour here. - Five or seven digits. Usually a digit was lost while copying. Valid lengths are 3, 4, 6 and 8.
Options and limits
- Alpha precision. Alpha is shown to three decimal places. HEX has only 256 alpha steps, so a value such as 0.5 cannot be stored exactly.
- HSL rounding. HSL values are rounded to whole numbers, which is standard for CSS but can shift a channel by one when converted back.
- Named colours such as
tomatoare not accepted; enter the HEX code instead. - Colour picker. The browser picker works with opaque colours only, so it sets a 6-digit code. Type the alpha pair yourself if you need one.
Privacy
Everything, including the swatch, is computed in your browser. Codes you enter are not sent anywhere.
Tips
- When a colour looks wrong in the swatch, check for swapped pairs;
#FF901Eis orange, not blue. - In CSS,
rgb(30 144 255 / 50%)andrgba(30, 144, 255, 0.5)are equivalent; use whichever your codebase already uses. - To go from channel numbers back to a code, use the RGB to HEX converter.
Frequently Asked Questions
How do I convert HEX to RGB by hand?
Split the six digits into three pairs and convert each from base 16 to base 10. For #1E90FF: 1E is 30, 90 is 144 and FF is 255, giving rgb(30, 144, 255).
What does a 3-digit HEX code mean?
It is shorthand in which each digit is doubled. #F80 is the same as #FF8800.
How is the alpha in an 8-digit code converted?
The last pair is a number from 0 to 255. Divide it by 255 to get the CSS alpha, so 80 (128) becomes about 0.502.
Do I need to include the # sign?
No. The tool accepts codes with or without the #, in upper or lower case.
Are my colours sent to a server?
No. The conversion runs entirely in your browser.
