Home / Color Code Converter
Color Code Converter (HEX ⇄ RGB ⇄ HSL)
Convert color codes back and forth. Enter any one and the other formats update automatically. Everything runs in your browser and no data is sent.
Pick with the color picker
Opacity α
1.00
How to use
Specify a color with HEX, RGB, HSL, or the color picker, and the remaining formats are calculated automatically. Adjust transparency (α) with the slider and export as HEXA or RGBA. The Copy button on each row lets you paste the code directly.
- HEX:
#RRGGBBformat. You can also enter the#RGBshorthand. - RGB:
rgb(r, g, b)(each 0–255). It also reads plain numbers like “55,166,255”. - HSL:
hsl(h, s%, l%)(hue 0–360, saturation, lightness).
Note: all calculations happen only inside your browser. No data is ever sent out.
HEX vs. RGB vs. HSL
- HEX: a hex string like
#37A6FFwith two digits each for red, green and blue. The most common form in CSS and design tools, and easy to copy and paste. - RGB:
rgb(55, 166, 255), each channel 0–255. Convenient for computing or mixing colors in code. - HSL:
hsl(207, 100%, 61%)— hue, saturation and lightness. It makes adjustments like changing only the brightness while keeping the hue intuitive, so it's great for building palettes.
How RGB ⇄ HSL conversion works
RGB and HSL are just two coordinate systems for the same color, so converting between them never changes the color. To darken a color, for example, convert to HSL, lower the lightness (L), then convert back to HEX/RGB. Editing any one field here instantly recomputes the others, so HSL to RGB and RGB to HSL both take a single step.
Transparency (RGBA / HEXA)
Set the opacity with the α slider to export rgba(55, 166, 255, 0.5) or the 8-digit #37A6FF80 (HEXA). Handy for semi-transparent overlays and shadow colors.
FAQ
Can I use HEX shorthand (#fff)?
Yes. A 3-digit form like #fff is expanded to #ffffff and handled.
Can it convert transparency (alpha)?
Yes. Set α with the slider and it outputs HEXA (8 digits) and RGBA.
What's the difference between RGB and HSL?
Both describe the same color, but RGB sets the amount of red, green and blue light, while HSL sets hue, saturation and lightness. HSL is handy when you want to change only the brightness while keeping the hue.
How do I make a color slightly darker or lighter?
Convert to HSL and lower the lightness (L) to darken, or raise it to lighten — the hue stays the same. The HEX and RGB values update instantly.
Is my data sent anywhere?
No. Conversion happens entirely in your browser, and color codes are never sent out.
Is it free to use?
Yes — free and no sign-up required.