How to use the HEX to RGB converter
- 1 Type a HEX code such as #1d4ed8, or a short code such as #1df.
- 2 Or type RGB values, for example 29, 78, 216, or pick a colour with the picker.
- 3 See the swatch update and the colour in HEX, RGB, RGBA and HSL.
- 4 Click any value to copy it.
How HEX and RGB codes relate
- Same colour, two notations: a HEX code is three pairs of base-16 digits for red, green and blue. #1d4ed8 means red 1d = 29, green 4e = 78 and blue d8 = 216.
- Shorthand: #fa0 is short for #ffaa00; each digit is doubled.
- Transparency: an 8-digit code such as #1d4ed880 adds an alpha pair; 80 is about 50% opacity, the same as rgba(29, 78, 216, 0.5).
- In CSS: modern browsers accept HEX, rgb() and hsl(); HSL is easiest when you want a lighter or darker version of the same colour.
Picking a new colour from scratch? Use the Color Picker. Colour values buried in a config or API response? Format them first with the JSON Formatter.
Features
Both directions
HEX to RGB and RGB to HEX, kept in sync as you type.
Short and alpha codes
Accepts 3-digit, 6-digit and 8-digit HEX, including transparency.
HSL too
Get the hue, saturation and lightness version for easy colour tweaks.
When to use it
Web design
Copy a brand colour from a style guide in HEX and use it as rgba() with transparency. Pick a colour visually with the Color Picker.
Design handoff
Convert colours between a design tool and CSS without mistakes. Clean up theme files with the JSON Formatter.
Accessibility work
Use HSL to make a lighter or darker shade of the same colour.
Learning
See how HEX pairs map to red, green and blue values.
Related Design and Color tasks
Frequently asked questions
How do I convert HEX to RGB?
Split the code into three pairs and convert each from base 16 to base 10. #1d4ed8 is 1d = 29, 4e = 78, d8 = 216, so rgb(29, 78, 216).
What is a 3-digit HEX code?
A shorthand where each digit is doubled. #1df means #11ddff.
What does the 8-digit HEX mean?
The last pair is alpha, the transparency. #1d4ed880 is the same colour at about 50% opacity.
What is HSL?
Hue, saturation and lightness: a way to describe colour that makes it easy to create lighter, darker or muted versions.
Are HEX codes case-sensitive?
No. #1D4ED8 and #1d4ed8 are the same colour.
How do I convert RGB to HEX?
Convert each of the red, green and blue values from 0 to 255 into a two-digit base 16 number and join them after a # sign. rgb(255, 165, 0) becomes #ffa500.
Why does my colour look different on another screen?
Screens differ in brightness and colour calibration. The code is the same, but the colour you see can vary slightly between devices.
Which format should I use in CSS?
Any of them works in modern browsers. HEX is short, rgba() is handy for transparency, and hsl() is easiest when you want to adjust lightness.
Can I pick a colour from my screen?
Use the colour picker box. In most browsers it opens a palette, and some also offer an eyedropper to sample any colour on your screen.
How do I make a HEX colour lighter or darker?
Convert it to HSL and change only the lightness value: a higher L gives a tint and a lower L gives a shade, while the hue stays the same. Then convert back to HEX if your design tool needs it.
Is HEX the same as a Pantone colour?
No. Pantone is a printed ink system with named swatches. Designers match a HEX code to the nearest Pantone swatch using a Pantone guide, and the match is never exact on every screen.
Built and reviewed by Hamza Farooq, founder and lead developer
· Last updated
· How we check our tools
· Report a problem