Color Converter
Convert colors between HEX, RGB, and HSL formats.
How to use the color converter
- Use the color picker or type a HEX code directly.
- See the equivalent RGB and HSL values update instantly.
Enter or pick a color and instantly see its HEX, RGB, and HSL values side by side. Comes up a lot for designers and developers who need to match a color across formats.
HEX, RGB and HSL explained
HEX and RGB describe the same thing: how much red, green, and blue light makes up a color, from 0 to 255 each. In HEX, each value is written as two hexadecimal digits, so #FF8000 is rgb(255, 128, 0), a bright orange.
HSL describes color the way people think about it: hue (the color itself on a 0–360° wheel), saturation (how vivid), and lightness (how light or dark). It's easier for creating lighter or darker shades of the same color. All three formats work in CSS.
Frequently asked questions
What color formats are supported?
HEX (e.g. #2f6fed), RGB, and HSL are all shown at once, converted from whichever HEX value you enter or pick.
Can I enter a 3-digit HEX code?
Yes, shorthand codes like #fff are automatically expanded to their 6-digit equivalent.
How do I convert HEX to RGB by hand?
Split the code into three pairs and convert each from hexadecimal to decimal. For #1E90FF: 1E = 30, 90 = 144, FF = 255, so rgb(30, 144, 255).
Which color format should I use in CSS?
Any of them works. HEX is the most common and compact, while HSL is easiest when you want to adjust lightness or saturation.