HEX, RGB and HSL are three ways to write the same color. HEX (#7c3aed) is compact and common in CSS, RGB describes red, green and blue channels, and HSL describes hue, saturation and lightness — which is the most intuitive for tweaking a shade. To convert between them, pick or type a color in a converter and read the other formats. Here is how they relate.
Use the picker or type a HEX, RGB or HSL value.
The other two formats update instantly alongside a preview swatch.
Adjust lightness or saturation in HSL to make a tint or shade, then read the HEX.
Copy the format your code or design tool expects.
HEX vs RGB vs HSL — what’s the difference?
HEX is a base-16 shorthand for RGB, so #ff0000 equals rgb(255, 0, 0). RGB sets the red, green and blue channels from 0–255. HSL sets hue (0–360°), saturation and lightness as percentages, which makes it easy to lighten, darken or desaturate a color predictably. The color converter shows all three at once.
When should I use HSL?
Use HSL when you want to derive related colors — hover states, tints and shades — because you can change one number (lightness) and keep the hue. Use HEX or RGB for fixed brand colors. Need a gradient from your colors? Try the gradient generator.
Tip: To make a hover color, take your base color in HSL and lower the lightness by about 8–10% — it stays on-hue and looks consistent.
Convert a color now
Pick a color and get HEX, RGB and HSL instantly — free, in your browser.
Open the Color Converter →Frequently Asked Questions
How do I convert HEX to RGB?
Each pair of HEX digits is a 0–255 channel: #7c3aed → rgb(124, 58, 237). A converter does it instantly.
Is HEX the same as RGB?
Yes — HEX is just a base-16 way of writing the same red, green and blue values.
Is anything uploaded?
No — conversion happens entirely in your browser.