HEX, RGB, HSL: A Practical Guide to Color Codes on the Web
Colors on the web can be written in several notations, and to a newcomer they look like unrelated codes: #4F46E5, rgb(79, 70, 229), and hsl(245, 79%, 59%) all describe exactly the same shade of indigo. Understanding what each notation encodes — and which one suits which task — makes working with color far less mysterious and a lot more powerful.
Three notations, one color
Every color you see on a screen is made by mixing red, green, and blue light. All three notations ultimately describe that mix; they just express it differently. HEX and RGB describe the raw amounts of red, green, and blue. HSL describes the color in terms humans find intuitive — its hue, how vivid it is, and how light it is. Because they encode the same underlying color, you can convert freely between them, which the color converter does instantly as you type in any format.
HEX: the web default
HEX (hexadecimal) is the notation you see most in CSS and design tools. It packs the red, green, and blue values into a six-digit code preceded by a hash, like #4F46E5. Each pair of digits represents one channel — 4F for red, 46 for green, E5 for blue — written in base 16, where the digits run 0–9 then A–F. Each pair ranges from 00 (none) to FF (maximum, 255 in decimal).
HEX is compact and unambiguous, which is why it became the standard for specifying exact brand colors. Its downside is that it is hard to read intuitively: nothing about #4F46E5 tells you it is a blue-purple until you have some practice. There is also a three-digit shorthand (#FFF means #FFFFFF, white) for colors where each pair repeats.
RGB: how screens think
RGB notation writes the same three channels in plain decimal from 0 to 255, like rgb(79, 70, 229). It is exactly the information in a HEX code, just in a form most people find easier to reason about — 229 is clearly a lot of blue. RGB also has an alpha variant, rgba(), that adds a fourth value for transparency from 0 (invisible) to 1 (opaque), which HEX historically could not express as clearly.
RGB is the closest notation to how a display physically produces color, mixing three colored lights at different intensities. That makes it natural for anything that manipulates pixels directly, and it converts to and from HEX trivially since both describe the same channel values.
HSL: how humans think
HSL is the notation designers reach for when they want to reason about color rather than just specify one. It has three parts. Hue is an angle from 0 to 360 degrees around the color wheel — 0 is red, 120 is green, 240 is blue. Saturation is how vivid the color is, from 0% (grey) to 100% (fully saturated). Lightness runs from 0% (black) through 50% (the pure color) to 100% (white).
This is exactly how the palette suggestions in the color converter work — they rotate the hue while keeping saturation and lightness fixed, producing harmonious neighbours you can adopt with a click.
Which to use when
In practice, use HEX for specifying fixed values like brand colors, because it is compact and universally understood. Use RGB (or RGBA) when you need transparency or are working with pixel data directly. Use HSL when you are building or adjusting a palette, creating tints and shades systematically, or want your CSS to express color relationships that other people can understand and tweak.
The good news is that you never have to commit to one. Because they are interchangeable, you can design in HSL for its intuitiveness and export to HEX for delivery, or read a HEX brand color into HSL to build variations around it. Keeping a converter handy — and knowing which notation makes each task easiest — is the practical skill that ties it all together. If you work with color in web pages, it pairs naturally with the display and sharing tips in our image compression guide.
Frequently asked questions
HEX, RGB, and HSL are three windows onto the same color. HEX and RGB describe the raw red-green-blue mix; HSL describes hue, vividness, and lightness the way people intuitively think. Learn what each encodes and you can pick the right one for any job and convert without friction.