Color Converter (HEX, RGB, HSL)

Design and development workflows mix several ways to describe the same on-screen color. HEX (#RRGGBB) is compact in CSS and Figma inspect panels. RGB lists red, green, and blue channels from 0–255 — the native language of monitors and canvas APIs. HSL expresses hue on a 0–360° wheel, saturation as 0–100% vividness, and lightness as 0–100% brightness, which many designers find easier when tweaking tints without drifting hue.

All three formats in this tool map to the same sRGB gamut when converted correctly. HEX and RGB are exact inverses at 8-bit precision. HSL uses floating-point math internally; after round-trip conversion you may see channel values differ by one step — normal for HSL editing workflows.

Switch the Input segmented control between HEX and RGB depending on what your handoff provides. In HEX mode, type with or without the hash — #3B82F6 and 3B82F6 both work, as does three-digit shorthand #3BF expanded to #33BBFF. In RGB mode, enter channels separately; the tool outputs uppercase HEX plus an rgb() CSS string and HSL breakdown.

Worked example with the default HEX field #3B82F6: red = 0x3B = 59, green = 0x82 = 130, blue = 0xF6 = 246. Summary shows RGB(59, 130, 246) — a saturated blue common in Tailwind UI palettes. HSL lands near 217° hue, 91% saturation, 60% lightness. Toggle to RGB mode with those channel values and you get the same HEX back.

HSL is useful when building design tokens: raise lightness to make #3B82F6 a hover state without picking a new hue. Lower saturation for muted backgrounds. For programmatic themes, many teams store HSL in CSS custom properties because `hsl(217 91% 60% / 0.5)` alpha syntax reads clearly.

Common mistakes include assuming HEX includes alpha (eight-digit #RRGGBBAA is not supported here), mixing 0–1 normalized RGB from some graphics APIs without multiplying by 255, and comparing printed Pantone swatches to sRGB hex on an uncalibrated display. Web colors are emitted-light sRGB — CMYK print conversion needs a separate profile.

Three-digit HEX shorthand duplicates each nibble — #ABC becomes #AABBCC. Invalid characters or wrong length return a dash headline asking for a valid color like #3B82F6. Named CSS colors (rebeccapurple, cornflowerblue) are not parsed — convert them to HEX in DevTools first, then paste here.

Limits: opaque sRGB only — no CMYK, Lab, Display-P3, or eight-digit alpha hex. Color-blind simulation and contrast checking belong in the contrast ratio calculator. WCG displays may render saturated blues differently than sRGB preview on standard monitors.