Color Converter

Input formats the parser accepts

Leading and trailing spaces are trimmed and letter case does not matter. Hues outside 0 to 360 wrap around, so hsl(381, 83%, 53%) is the same as hsl(21, 83%, 53%), while a saturation or lightness above 100% is rejected rather than clamped. The HEX output is always lowercase with a leading hash, RGB is written as rgb(r, g, b) and HSL as hsl(h, s%, l%).

RGB to HSL, worked through for #2563eb

Start from rgb(37, 99, 235) and divide each channel by 255: R = 0.145, G = 0.388, B = 0.922. The largest is B at 0.922, the smallest is R at 0.145, and their difference (delta) is 0.776.

Lightness is the midpoint of the largest and smallest: (0.922 + 0.145) ÷ 2 = 0.533, shown as 53%. Saturation is delta ÷ (1 − |2L − 1|) = 0.776 ÷ (1 − 0.067) = 0.776 ÷ 0.933 = 0.832, shown as 83%. Hue depends on which channel is largest; with blue on top it is ((R − G) ÷ delta + 4) × 60 = ((0.145 − 0.388) ÷ 0.776 + 4) × 60 = (−0.313 + 4) × 60 = 221.2, shown as 221. The result is hsl(221, 83%, 53%).

Hue is rounded to a whole degree and saturation and lightness to whole percentages, so feeding the HSL string back into the box can land a unit away in one channel: hsl(221, 83%, 53%) comes back as rgb(36, 99, 235), one step short of the original red value of 37. For an exact round trip, keep the hex or RGB value.

Reference colours in all three formats

Greys have no dominant channel, so delta is zero and the tool reports a hue of 0 and a saturation of 0% for them; only the lightness carries information.

Choosing a format for the job

• Hex is the compact form that design tools, brand guidelines and most CSS codebases expect, and it is what the native picker swatch next to the box works in.
• RGB is handy when you will add transparency by hand, since you can write rgba(37, 99, 235, 0.5) around the numbers shown.
• HSL makes programmatic variations easy: keep hue and saturation and move lightness up for hover states or down for pressed states.
• iOS and Android code often wants channels as fractions of 1: divide each RGB value by 255, so 37 becomes 0.145.

What is out of scope

The converter has no alpha channel, no CMYK or LAB output and no colour names. When the text box holds something unparseable, the red line appears and the native picker swatch stays on the last colour that parsed instead of jumping to black. The picker dialog itself is provided by your browser and operating system, so it looks different on Windows, macOS and phones.