Color converter

Three ways to write the same colour

Screens mix every colour from red, green and blue light, and HEX, RGB and HSL are simply three notations for the same 16.7 million combinations in the sRGB colour space. Which one you need depends on where the value is going.

• HEX, like #2563eb: three pairs of hexadecimal digits for red, green and blue, each from 00 to ff (0 to 255). Compact and easy to copy, it is the default in design tools, brand guidelines and most CSS.
• RGB, like rgb(37, 99, 235): the same three channels in decimal. Useful when code works with numbers directly, as in canvas drawing, image processing, Android colour resources or Python's Pillow.
• HSL, like hsl(221, 83%, 53%): hue, saturation and lightness. The only one of the three that a person can adjust by reasoning about it, which makes it the favourite for building palettes and themes.

The short HEX form #36f is shorthand for #3366ff, where each digit is doubled. It only works when both digits of every pair are the same.

Reading HSL values

HSL describes a colour the way people talk about it:

• Hue is the position on the colour wheel in degrees: 0 is red, 60 yellow, 120 green, 180 cyan, 240 blue, 300 magenta, and 360 wraps back to red.
• Saturation goes from 0%, a neutral grey, to 100%, the most vivid version of that hue.
• Lightness goes from 0%, always black, through 50%, the pure colour, to 100%, always white.

This is what makes HSL practical for design systems. Keep hue and saturation fixed and step lightness from 95% to 15% and you get a tint-to-shade scale for buttons, backgrounds and borders. Rotate the hue by 180 degrees for a complementary accent, or by 30 degrees either way for analogous colours.

One limitation: HSL lightness is a mathematical average, not how bright a colour looks. Yellow at 50% lightness looks far brighter than blue at 50%, so colours with equal L can have very different contrast against white text. Always check contrast on the actual pair.

What this converter accepts

Paste or type into the field, or pick with the colour swatch, and the HEX, RGB and HSL rows update together with a large preview. Accepted input:

• #rgb, #rgba, #rrggbb and #rrggbbaa, with or without the #.
• The 148 CSS colour names, such as tomato or rebeccapurple.
• rgb(37, 99, 235) and rgba(37, 99, 235, 0.5), or the modern space-separated rgb(37 99 235 / 50%). Channels can be decimals or percentages.
• hsl(221, 83%, 53%), hsla(…) and hsl(221.5 83% 53%). Hue can carry deg, turn, rad or grad; percent signs are optional.
• Three bare numbers: 37, 99, 235 or 37 99 235.

Values out of range are clamped: rgb(300, 0, 0) becomes 255 red. A hue of 360 or more, or a negative hue, wraps around the wheel. Decimal channels are rounded to whole numbers.

Alpha, whether in 4- or 8-digit HEX, rgba(), hsla() or after a /, is read but ignored, so the outputs are always fully opaque.

The R, G and B sliders below the outputs change one channel at a time. They are useful for nudging a colour slightly warmer or cooler while watching the preview and all three notations update.

Why values shift by one when converting back

Conversions between HSL and RGB involve fractions, and every output here is rounded to whole numbers, as CSS is normally written. HSL has fewer whole-number combinations than RGB, roughly 3.6 million against 16.7 million, so several RGB colours share one rounded HSL value.

For example, #2563eb converts to hsl(221, 83%, 53%), but typing that HSL back in gives #2463eb: red is 36 instead of 37. The difference is invisible to the eye, but it matters if a brand guide specifies an exact HEX value. Treat the HEX or RGB value as the source of truth, and use HSL for exploring variations rather than storing official colours.

Using the results

• In CSS, all three output strings can be pasted as they are. Custom properties like --brand: #2563eb; are the cleanest way to reuse them.
• For a site icon, settle the brand colour here first, apply it to the logo in your design tool, then turn the logo into a full icon set with the favicon generator.
• For a branded QR code, keep strong contrast: a dark foreground around 20–30% lightness on white scans reliably, while light or low-saturation colours often fail. The QR code generator lets you test it.
• Printed colour is a different matter. Screens use RGB, printers use CMYK, and a vivid screen blue may not be reproducible in ink. Ask the print shop for a proof when exact colour matters.

All conversion happens in your browser.