Color Converter

A fast color converter that translates any color between HEX, RGB, and HSL formats instantly, helping you bridge the gap between design tools and CSS.

Paste a colour in any of the three formats and this converter returns all three, exactly equivalent. The same colour wears three outfits in web work: HEX (#4f46e5) in design tools and brand guides, RGB (rgb(79, 70, 229)) in JavaScript and image editors, HSL (hsl(243, 75%, 59%)) in modern CSS where its human-readable hue/saturation/lightness makes palette adjustments sane. Handoffs constantly require translating between them — the designer sends HEX, the CSS uses HSL, the canvas API wants RGB numbers.

It accepts the common variants people actually paste: 3-digit shorthand hex (#abc expands to #aabbcc), hex with or without the #, and rgb()/hsl() with or without an alpha slot. Unparseable input gets a clear error showing the accepted formats rather than a silently wrong colour.

A word for HSL, the underused one: because it separates what the colour is (hue, 0–360°) from how vivid (saturation) and how bright (lightness) it is, palette work becomes arithmetic. A hover state is the same HSL with lightness dropped 10 points; a muted background is the brand hue with saturation cut to 20% and lightness raised to 95%; a complementary accent is hue + 180. Try converting your brand colour here and reading its HSL — many developers find they finally understand their own palette. Everything runs locally in your browser.