HEX to RGB & HSL Converter
Colors on the web can be expressed in three common formats: HEX (hexadecimal), RGB (Red Green Blue), and HSL (Hue Saturation Lightness). A HEX code like #1A2B3C packs the same information as rgb(26, 43, 60) or hsl(210, 40%, 27%) — this tool converts between all three instantly as you type, so you never need to do the arithmetic by hand.
HEX and RGB are low-level representations that map directly to hardware channel intensities (0–255 per channel). HSL is a human-friendly alternative: adjusting the Saturation or Lightness slider produces predictable results that match how designers think about color, making it ideal for theming and accessibility work.
How it works
HEX → RGB: split the 6 hex digits into three pairs (RR, GG, BB) and convert each from base-16 to decimal (0–255). RGB → HEX: reverse the process. RGB → HSL: normalise channels to [0,1]; L = (max+min)/2; S = (max−min)/(1−|2L−1|); H is derived from which channel is largest. HSL → RGB: use the piecewise formula f(n) = L − a·max(−1, min(k−3, 9−k, 1)) where k=(n+H/30) mod 12 and a=S·min(L, 1−L).
Use cases
- Converting brand colour codes from design tools (HEX) into CSS custom properties (RGB or HSL)
- Adjusting lightness or saturation in HSL to generate accessible colour palettes
- Translating designer-provided HEX values to rgba() for CSS opacity effects
- Verifying colour consistency across print (RGB) and web (HEX) deliverables
- Learning colour theory by exploring how HSL components relate to perceived colour