Your result will appear here
Fill in the fields and press Calculate.
Colors on the web are written in several formats — HEX for CSS, RGB for screens, HSL for intuitive adjustment — and they all describe the same color. Converting between them is a daily need in web development and design: you have a HEX code from a palette but need RGB for an rgba() value, or HSL to nudge the lightness. This tool converts a HEX code to both instantly.
Enter a HEX color code and its RGB and HSL equivalents appear at once.
How is it calculated?
The three formats
- HEX: a six-digit code like #0C6B5E — two hex digits each for red, green and blue (00–FF, i.e. 0–255).
- RGB: the same channels as decimals, rgb(12, 107, 94) — how screens mix light.
- HSL: hue (0–360°), saturation (%) and lightness (%) — hsl(172°, 80%, 23%) — closer to how humans think about color.
All three point to the identical color; only the notation differs.
Why each format is used
- HEX is compact and the CSS default for solid colors.
- RGB(A) adds an alpha channel for transparency (rgba).
- HSL(A) is the easiest to adjust by hand: change lightness to make a shade lighter or darker without touching the hue, or shift saturation to mute a color.
How the conversion works
HEX → RGB reads each pair of hex digits as a 0–255 value (0C = 12, 6B = 107, 5E = 94). RGB → HSL then finds the dominant hue angle, how saturated it is, and how light — a bit of arithmetic the tool handles for you.
Where it helps
- Turning a brand HEX into an rgba() with transparency
- Building lighter/darker shades of a color via HSL lightness
- Matching colors between design tools and code
Worked example
Take the HEX code #0C6B5E. Reading it in pairs: 0C = 12 (red), 6B = 107 (green), 5E = 94 (blue), so it's rgb(12, 107, 94) — a deep teal. Converted to HSL it's about hsl(172°, 80%, 23%): a hue of 172° (in the teal band), 80% saturation (quite vivid), and 23% lightness (dark). The HSL form is the useful one for tweaking — bump the lightness from 23% toward 40% and you get a lighter teal with the same hue, exactly how you'd build a color's shade range.
FAQ
How do I convert a HEX color to RGB?+
Read the six-digit HEX code in pairs, each as a 0–255 value: #0C6B5E is 0C=12, 6B=107, 5E=94, i.e. rgb(12, 107, 94). The tool does this instantly and also gives HSL.
What is the difference between HEX, RGB and HSL?+
They all describe the same color in different notation: HEX is a compact code, RGB gives the red/green/blue channels as numbers, and HSL uses hue, saturation and lightness — the easiest to adjust by eye.
Why would I use HSL instead of HEX?+
HSL is easier to adjust: change the lightness to make a shade lighter or darker without altering the hue, or lower the saturation to mute a color. It maps to how people think about color.
How do I add transparency to a color?+
Use RGBA (or HSLA): take the RGB values and add an alpha from 0 (transparent) to 1 (opaque), e.g. rgba(12, 107, 94, 0.5). Convert the HEX to RGB first, then add the alpha.
What does each pair of HEX digits mean?+
The six digits are three pairs — red, green, blue — each a hexadecimal value from 00 to FF (0 to 255). FF is the maximum of a channel, which is why colors run 0–255.
Can I build lighter or darker shades from one color?+
Yes — convert to HSL and change only the lightness value. Keeping the hue and saturation fixed gives a consistent shade range, perfect for UI states and palettes.