Pick a color in any design tool and you will see it written several different ways: a hash code like #6d5cff, a set of numbers like rgb(109, 92, 255), or something like hsl(247, 100%, 68%). These are not different colors — they are three languages describing the same thing. Learning to read all three makes you far more comfortable working with color in web design, CSS, and graphics.

Why There Are Multiple Color Formats

Screens create color by mixing red, green, and blue light. Every color format is ultimately a way of specifying how much of each to use. They differ in how human-friendly they are for different tasks: some are compact, some make transparency easy, and some make adjusting a color intuitive. Knowing which to reach for saves time.

RGB: How Screens Actually Think

RGB stands for Red, Green, Blue. You specify each channel from 0 to 255:

• rgb(255, 0, 0) is pure red — maximum red, no green or blue.
• rgb(0, 0, 0) is black — no light at all.
• rgb(255, 255, 255) is white — all channels at full.

RGB maps directly to how displays work, which makes it intuitive once you think in terms of mixing light. Add an alpha value for transparency and you get rgba(255, 0, 0, 0.5) — half-transparent red.

HEX: RGB in Shorthand

A HEX code is the same RGB values written in base-16 (hexadecimal), packed into a compact string:

• #FF0000 is red. The pairs FF, 00, 00 are simply 255, 0, 0 in hex.
• #000000 is black; #FFFFFF is white.
• #6d5cff breaks down to 6d (109) red, 5c (92) green, ff (255) blue.

HEX is popular because it is short and easy to copy. Modern CSS also supports 8-digit HEX, where the final pair sets alpha: #FF000080 is 50% transparent red.

Tip: When a HEX code has three matching pairs like #FFCC00, it can be shortened to #FC0. The browser expands each digit, so #FC0 equals #FFCC00.

HSL: The Human-Friendly Format

HSL stands for Hue, Saturation, Lightness, and it describes color the way people intuitively think about it:

• Hue is the color itself, as an angle on the color wheel from 0 to 360. Red is 0, green is 120, blue is 240.
• Saturation is how vivid the color is, from 0% (gray) to 100% (fully vivid).
• Lightness is how light or dark it is, from 0% (black) to 100% (white).

So hsl(247, 100%, 68%) reads as "a blue-violet hue, fully saturated, fairly light." The magic of HSL is adjustment: want a darker version of the same color? Just lower the lightness. Want it more muted? Lower the saturation. The hue stays put. This is far more intuitive than juggling three RGB numbers.

Side-by-Side: The Same Color, Three Ways

Every row shows one color written three ways. Use the Color Picker tool to see any color in all three formats at once and copy whichever you need.

When to Use Each Format

• HEX: Default for CSS and design handoffs. Compact and universally understood.
• RGB / RGBA: When you need transparency, or when generating colors programmatically from channel values.
• HSL / HSLA: When you are hand-tuning a palette — building shades, tints, or hover states by adjusting lightness and saturation.

A common professional workflow is to define a base color in HSL, then generate lighter and darker variations by changing only the lightness. That is how consistent design systems are built.

Color and Accessibility

Choosing colors is not only about looks. Text must be readable, which means enough contrast between the text color and its background. The Web Content Accessibility Guidelines recommend a contrast ratio of at least 4.5:1 for normal text. HSL makes hitting that target easy: keep the hue you like and adjust lightness until the contrast passes.

Warning: Light gray text on a white background is a very common accessibility failure. Always check contrast before shipping, especially for body text and buttons.

Common Mistakes to Avoid

• Assuming the formats are different colors. They are interchangeable representations of the same value.
• Hand-editing RGB for shades. Adjusting three numbers to darken a color is guesswork. Use HSL and change lightness.
• Ignoring contrast. Beautiful colors that fail accessibility hurt real users.
• Copying the wrong alpha. When transparency matters, use rgba/hsla or 8-digit HEX and double-check the opacity.

Conclusion

HEX, RGB, and HSL are three ways to describe the same colors, each suited to a different task: HEX for compact CSS, RGB for channel-level and transparency work, and HSL for intuitive adjustments and building palettes. Learn to read all three and you will move through design and front-end work with far more confidence.

Explore any color in every format with the free Color Picker tool — see HEX, RGB, and HSL side by side and copy with one click.