Convert HEX to RGB, HSL & CSS
Paste a HEX code and instantly get its RGB, HSL, and CSS-ready equivalents, each with a one-click copy button.
HEX is the most common way to write colors on the web, but it isn’t always the format you need. CSS gradients, rgba() transparency, and design tokens often call for RGB or HSL — and converting by hand is tedious and error-prone.
This converter does the math for you. Enter a HEX value and get clean RGB, HSL, and full CSS syntax you can paste straight into a stylesheet.
How to use the HEX to RGB Converter
- Enter a HEX code. Type a 3- or 6-digit HEX value, with or without the leading #.
- Read every format. The tool outputs RGB, HSL, and ready-to-use CSS syntax at once.
- Copy what you need. Use the copy button next to any value to grab it instantly.
Practical examples
Why the HEX to RGB Converter matters
- RGB makes transparency straightforward through the alpha channel in rgba().
- HSL makes intentional adjustments easy — change one number to shift hue, saturation, or lightness.
- Having all formats at once removes the friction of switching between tools mid-task.
Frequently asked questions
What is the difference between HEX and RGB?
They describe the same color in different notations. HEX uses base-16 digits (#ff6600), while RGB lists the red, green, and blue channels as numbers from 0–255 (rgb(255, 102, 0)).
Do 3-digit HEX codes work?
Yes. Shorthand codes like #f60 are automatically expanded to their full 6-digit form (#ff6600) before conversion.
Is HSL better than RGB?
Neither is better — they suit different jobs. RGB maps directly to how screens emit light, while HSL is more intuitive for humans adjusting hue, saturation, and lightness.