Color Converter
Color Converter
Generate full palettes and export to Tailwind, CSS, and more with the Color Palette Generator.
Need a full color palette?Color Palette Generator
HEX, RGB and HSL are the same colour written three ways
A hex colour is three bytes: two hex digits for red, two for green, two for blue, each running from 00 to FF, which is 0 to 255 in decimal. #FF5733 and rgb(255, 87, 51) are not similar colours, they are the identical colour in two notations. Converting between them is pure formatting, with nothing lost either way.
HSL is genuinely different. It describes the same colour by hue (an angle on the colour wheel), saturation and lightness, which makes it far easier to reason about: to get a lighter version of a colour you raise the L and leave everything else alone, where in hex you would have to recompute all three channels.
Worked examples
| HEX | RGB |
|---|---|
| #FF5733 | rgb(255, 87, 51)FF is 255, 57 is 87, 33 is 51. |
| #000000 | rgb(0, 0, 0)Black, with all channels off. |
| #FFFFFF | rgb(255, 255, 255)White, with all channels at maximum. |
| #808080 | rgb(128, 128, 128)Mid grey. All three channels equal means no hue at all. |
| #1E90FF | rgb(30, 144, 255)CSS named colour dodgerblue. |
Worth knowing
- Three-digit hex is shorthand where each digit is doubled.
#abcexpands to#aabbcc, so it can only express 4,096 of the 16.7 million colours. - Eight-digit hex adds an alpha channel as a fourth byte.
#FF573380is the same colour at 50% opacity. - The maximum per channel is FF, which is 255, so there are 256 levels per channel and 256³ = 16,777,216 possible colours.
- Hex is case-insensitive.
#ff5733and#FF5733are identical to every parser.
Frequently asked questions
- Is there any difference between a HEX and an RGB colour?
- No. They are two notations for the same three numbers. Hex writes each channel as two base-16 digits, RGB writes each as a decimal number from 0 to 255. Converting between them loses nothing and changes nothing on screen.
- What does the fourth pair of hex digits mean?
- Alpha, meaning opacity. An eight-digit hex colour appends a byte from 00 (fully transparent) to FF (fully opaque). It is supported in every current browser, so #FF573380 renders the same colour at about 50% opacity.
- When should I use HSL instead of hex?
- When you need to derive colours rather than just state them. Hue, saturation and lightness map onto the changes designers actually want: lighter, more muted, shifted around the wheel. So a palette built in HSL can be adjusted by changing one number. Hex is better for stating a fixed brand colour exactly.
- How many colours can a hex code represent?
- 16,777,216. Each of the three channels holds one byte, giving 256 levels, and 256 cubed is just under 16.8 million. Three-digit shorthand covers only 4,096 of those.