Color Converter
HEX
RGB
HSL
HEX vs. RGB vs. HSL
HEX and RGB both describe a color by its red, green, and blue components — HEX as a compact hexadecimal string, RGB as three 0-255 numbers. HSL describes the same color by hue (a position on the color wheel), saturation, and lightness, which many find more intuitive for creating shades and tints of a color.
When would I use this?
- Converting a design tool's HEX color into RGB or HSL for use in CSS.
- Understanding what color a HEX or RGB value actually looks like before using it.
- Adjusting the lightness of a brand color by converting to HSL first.
How it works
Conversion uses standard color-space math implemented in JavaScript, running entirely in your browser. The preview swatch updates live as you type.
Frequently asked questions
HEX (#RRGGBB), RGB / RGBA, and HSL / HSLA. Enter a color in any one of these formats and the others update automatically.
Yes, 3-character shorthand HEX codes are expanded automatically to their full 6-character equivalent.
HSL (Hue, Saturation, Lightness) describes a color in a way that's often more intuitive for adjusting shades — for example, keeping the same hue while making a color lighter or darker by changing only the lightness value.
Yes, a color swatch updates in real time as you type, so you can see exactly what the color looks like alongside its values.