Color Converter
Convert colors between HEX, RGB, and HSL with a live preview and copy-ready CSS values.
About color formats
HEX is compact and common in CSS. RGB describes red, green, and blue channels from 0 to 255. HSL describes hue, saturation, and lightness, which can be easier for adjusting palettes.
Use the live preview to check a color quickly, generate a random color, then copy HEX, RGB, and HSL values into CSS, design docs, UI specs, or bug reports.
Practical color examples
CSS handoff: convert #5eead4 to RGB or HSL when a design note needs all three formats.
Palette tweaking: adjust the HSL lightness value to create hover, border, or disabled states from the same base color.
Debugging screenshots: paste a sampled HEX value and copy the matching CSS declarations for a quick reproduction.
FAQ
What is the difference between HEX and RGB?
HEX is a compact CSS notation, while RGB lists the red, green, and blue channel values from 0 to 255.
When is HSL easier to use?
HSL is useful when you want to adjust hue, saturation, or lightness without thinking in raw RGB channels.
Can I paste three-digit HEX colors?
Yes. Three-digit values such as #fff expand to six-digit HEX values.
Why do converted color values round?
Some RGB to HSL conversions produce decimals. The tool rounds values so they are easier to copy into CSS.