Color Converter
Convert between HEX, RGB, and HSL color formats with live preview.
How to Convert Color Formats
- Use the color picker — click the color swatch at the top to visually select any color. HEX, RGB, and HSL values update automatically.
- Type a HEX code — enter a HEX color like
#FF5733in the HEX field to see the RGB and HSL equivalents. - Type RGB — enter an RGB value like
rgb(255, 87, 51)and all other formats update. - Copy any format — click "Copy HEX", "Copy RGB", or "Copy HSL" to copy the value to your clipboard for use in CSS or design tools.
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL? ▼
HEX (#RRGGBB) is a 6-digit hexadecimal color code used in HTML/CSS. RGB uses three 0-255 values for red, green, blue channels. HSL uses hue (0-360°), saturation (0-100%), and lightness (0-100%) — more intuitive for designers as you can easily adjust brightness or saturation.
How do I convert HEX to RGB? ▼
Type the HEX code (e.g. #FF5733) in the HEX field — the RGB equivalent appears instantly. Manually: split the 6 hex digits into three 2-digit pairs, convert each from base-16 to decimal. FF = 255, 57 = 87, 33 = 51, so #FF5733 = rgb(255, 87, 51).
Can I use all color formats in CSS? ▼
Yes — all three formats are valid in CSS:
#FF5733, rgb(255, 87, 51), or hsl(11, 100%, 60%). You can also use rgba() for transparency or named colors like red, coral, etc.When should I use HSL instead of HEX? ▼
Use HSL when you need to programmatically adjust colors. For example, to create a hover state that's slightly darker, just reduce the lightness value by 10%. This is much more intuitive than manually adjusting HEX digits or RGB values.
What is the HEX code for common colors? ▼
Common HEX colors: White = #FFFFFF, Black = #000000, Red = #FF0000, Green = #008000, Blue = #0000FF, Yellow = #FFFF00, Orange = #FFA500, Purple = #800080, Gray = #808080, Pink = #FFC0CB.