HEX, RGB and HSL Color Codes Explained (With Conversions)

If you have ever copied a color like #2563EB from a design and wondered what those characters actually mean, you are not alone. HEX, RGB and HSL are three ways of writing the same thing — a color — each suited to a different job. Understanding them makes you faster in CSS, more confident in design tools and better at building palettes that look intentional. This guide explains all three formats in plain terms and shows how to convert between them in a click.

RGB: how screens actually make color

Screens create color by mixing three lights — red, green and blue — at different intensities. RGB notation reflects this directly: a value like rgb(37, 99, 235) means 37 units of red, 99 of green and 235 of blue, each on a scale from 0 to 255. All zeros is black; all 255s is white. Because it mirrors how displays work, RGB is intuitive once you picture three dimmer switches for the three lights. Its close cousin RGBA simply adds a fourth value for transparency.

HEX: the same color, written shorter

HEX is just RGB in a more compact form. A HEX code like #2563EB packs the same three numbers into six characters using base-16 (hexadecimal) notation: 25 is the red, 63 the green and EB the blue. Each pair represents a value from 0 to 255, exactly like RGB. HEX became the web standard because it is short and easy to paste, which is why design tools and stylesheets are full of these six-character codes. The takeaway: HEX and RGB are the same information in different clothes.

HSL: the format built for humans

HSL takes a different, more intuitive approach. Instead of mixing lights, it describes a color the way a person might think about it:

• Hue — the base color, given as a position on a 360-degree color wheel (0 is red, 120 is green, 240 is blue).
• Saturation — how vivid or grey the color is, from 0% (grey) to 100% (full color).
• Lightness — how light or dark it is, from 0% (black) to 100% (white).

This structure is powerful because it separates the "what color" from the "how bright" and "how vivid". Want a darker version of a blue? Lower the lightness and keep the hue. Want a muted, professional palette? Reduce the saturation across all your colors. HSL makes these adjustments obvious, which is why designers love it for building consistent palettes.

When to use each format

All three describe the same colors, so the choice comes down to the task:

• Use HEX when pasting a fixed brand color into CSS, a design tool or a document — it is the universal shorthand.
• Use RGB when you need transparency (RGBA) or when working with code that manipulates the individual light channels.
• Use HSL when you are designing or tweaking — creating hover states, shades, tints and harmonious palettes.

Converting between formats

Because these are just different notations for the same color, you can convert freely between them without any loss. In practice you might grab a HEX code from a brand guide, convert it to HSL to build a set of lighter and darker variants, then convert those back to HEX for your stylesheet. Doing the base-16 arithmetic by hand is tedious and mistake-prone, so a converter that shows HEX, RGB and HSL side by side saves real time and keeps your colors exact.

Conclusion

HEX, RGB and HSL are three languages for the same idea. HEX is the compact web standard, RGB mirrors how screens produce light, and HSL is the friendliest for adjusting and designing color. Once you can move between them, building and refining palettes becomes far easier. Try the Color Converter to translate any color between HEX, RGB and HSL instantly.