HEX to RGB Converter
Color Picker
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
CSS Variable
--color: #3b82f6;
Color Shades
#e7f0fe
L:95
#b6d1fc
L:85
#85b2f9
L:75
#5593f7
L:65
#0b64f4
L:50
#0950c3
L:40
#073c92
L:30
#052861
L:20
#021431
L:10
Free Online HEX to RGB Color Converter
Convert colors between HEX, RGB, HSL, and CSS variable formats instantly with our free online color converter. Whether you are a web developer styling a website, a designer picking brand colors, or anyone who works with digital color codes, this tool makes it easy to translate between the most common color formats. Pick a color using the color picker or type a value into any field and watch all other formats update automatically in real time.
How to Use
Use the color picker at the top to visually select a color, or type a value directly into any of the input fields. You can enter a HEX code (e.g., #3b82f6), individual RGB values (0-255 for each channel), or HSL values (hue 0-360, saturation 0-100, lightness 0-100). All fields stay in sync so changing one instantly updates every other format. Click any Copy button to copy that format to your clipboard. Use the shade generator below to explore lighter and darker variations of your current color.
FAQ
What is the difference between HEX and RGB?
HEX and RGB represent the same color model (red, green, blue channels) but use different notation. HEX uses a six-character hexadecimal string like #ff5733, while RGB uses decimal values from 0 to 255 for each channel like rgb(255, 87, 51). They are interchangeable and both are widely supported in CSS.
What is HSL?
HSL stands for Hue, Saturation, and Lightness. It is an alternative way to describe colors that many designers find more intuitive than RGB. Hue is a degree on the color wheel (0-360), saturation is a percentage of color intensity, and lightness is a percentage from black (0%) to white (100%).
How are color shades generated?
The shade generator takes the current color's hue and saturation and creates nine variations by adjusting the lightness from very light (95%) to very dark (10%). Click any shade to set it as the active color.