Color Converter (HEX, RGB, HSL)

What this calculates

Colors live in multiple formats: HEX (#RRGGBB) for web/CSS, RGB (0-255 per channel) for raw display, and HSL (hue, saturation, lightness) for intuitive picking. This converter handles all three with a live preview swatch. Useful for web designers, branding work, and translating between design tools.

Formula & how it works

HEX → RGB: split into 2-char hex pairs, convert each to decimal. RGB → HEX: each channel as 2-digit hex, concatenate. RGB → HSL: normalize R/G/B to 0-1; compute hue from max/min, saturation from chroma, lightness from average of max+min. The math is in the WHATWG CSS color spec.

Worked example

Indigo: HEX #4338CA = RGB(67, 56, 202) = HSL(243, 58 %, 51 %). Pure red: #FF0000 = RGB(255, 0, 0) = HSL(0, 100 %, 50 %). Pure white: #FFFFFF = RGB(255, 255, 255) = HSL(0, 0 %, 100 %). The HSL form makes 'darker red' or 'less saturated' easy to dial in.

Frequently asked questions

When use HSL?

Tweaking colors on a website. HSL lets you keep hue constant and just change lightness/saturation. Modern CSS supports HSL natively: `color: hsl(243, 58%, 51%)`. Tailwind uses HSL internally for color manipulation.

What about HSV?

Different from HSL despite the similar name. HSV's 'value' is brightness; HSL's 'lightness' is closer to perceived gray-mix. Photoshop and most design tools use HSV. CSS uses HSL.

What's OKLCH?

Newer perceptually-uniform color space, supported in modern CSS (Chrome 111+, all 2024+ browsers). Two colors with the same L feel equally bright, unlike HSL where blue at L=50 looks darker than yellow at L=50. Our site uses OKLCH for theme colors.

RGB shorthand #FFF?

Yes — 3-char hex expands by doubling each: #FFF = #FFFFFF. Only works when each pair has the same character. Cleaner CSS but less precise — only 4,096 colors instead of 16,777,216.

What this calculates

Formula & how it works

Worked example

Frequently asked questions

Related calculators