Bidirectional conversion
Change any value — HEX, RGB slider, or HSL slider — and all other formats update in real time.
Color Tools
HEX → RGB → HSL Converter
Convert colors between HEX, RGB, and HSL formats instantly. Type a hex code, drag the sliders, or use the color picker — all formats update live.
Color picker support
Use the native browser color picker to visually select any color and see all three formats instantly.
One-click copy
Copy any format with a single click. HEX, rgb(), and hsl() output is ready for CSS.
#3B82F6
rgb(59, 130, 246) · hsl(217°, 91%, 60%)
HEX
6-digit hex code
RGB
r
g
b
HSL
H
S
L
All CSS Formats
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
How to convert color formats
Step 1
Enter or pick a color
Type a HEX code, adjust RGB or HSL sliders, or use the color picker to choose any color.
Step 2
See all formats
All three formats — HEX, RGB, and HSL — update instantly as you change any value.
Step 3
Copy the format you need
Click the copy button next to any format to copy the CSS-ready value.
FAQ
What is the difference between HEX, RGB, and HSL?
HEX is a 6-digit hexadecimal code commonly used in HTML/CSS. RGB represents Red, Green, Blue channels from 0–255. HSL represents Hue (0–360°), Saturation (0–100%), and Lightness (0–100%) and is more intuitive for color adjustments.
Can I convert HSL back to HEX?
Yes. The converter is fully bidirectional — adjusting HSL sliders updates both the RGB values and the HEX code in real time.
Why are two different HEX codes giving similar RGB values?
Very similar HEX values may produce nearly identical RGB and HSL output due to the quantization of 8-bit color channels.