HEX, RGB and HSL Color Codes Explained (and How to Convert Them)

The same color can be written three ways — #7C5CFF, rgb(124, 92, 255), hsl(252, 100%, 68%) — and knowing which to reach for makes picking and tweaking colors far easier. Here's what each one actually encodes.

HEX — the web's shorthand

A hex code is just RGB in base-16. #7C5CFF breaks into 7C red, 5C green, FF blue — each a value from 00 to FF (0–255). It's compact and copy-pasteable, which is why design tools default to it. The downside: you can't eyeball "a bit lighter" from hex. Convert any code with the color converter.

RGB — how screens actually work

Screens mix red, green and blue light. rgb(124, 92, 255) is the same purple, written as three 0–255 channels. RGB's real advantage is the alpha variant rgba(124, 92, 255, 0.5) for transparency — essential for overlays and shadows in CSS.

HSL — the one humans should edit

HSL describes color the way people think: Hue (the color, 0–360° around the wheel), Saturation (how vivid, 0–100%), and Lightness (0% black to 100% white). Want a darker shade of the same color? Drop the lightness and leave hue alone. Building a palette? Keep saturation and lightness fixed and rotate the hue. This is why HSL is the designer's favorite for variations.

Which to use when

Store and share colors in HEX, add transparency with RGBA, and adjust colors in HSL. Modern CSS accepts all three, so convert freely depending on the task. The color converter turns any format into the others instantly.

Building an accessible palette

Whatever format you pick, check contrast: body text should sit at roughly 4.5:1 against its background. Pick a hue you like, then use lightness steps in HSL to generate tints and shades that stay in the same family — a fast way to a coherent, readable color system.