HEX, RGB, and HSL Explained: A Developer's Guide to Color Formats

CSS supports several ways to express the same color, and each format is useful in different situations — knowing when to reach for which one saves time whether you're translating a design handoff or building a theme programmatically.

HEX

A HEX code like #4F46E5 is a six-digit hexadecimal value representing red, green, and blue in pairs of two digits each (4F, 46, E5). It's compact and the most common format for design handoffs and brand guidelines, but it's not intuitive to read or adjust by hand — tweaking brightness means recalculating all three pairs, since there's no single number that represents "lightness" the way there is in HSL.

RGB

rgb(79, 70, 229) expresses the same color as three decimal values from 0–255 for red, green, and blue. It's more readable than HEX for a human scanning the numbers, and works well when a color needs to be generated or interpolated programmatically, since each channel is a plain number you can do math on directly — useful in canvas drawing, image processing, or animating a color transition in code.

HSL

hsl(243, 75%, 59%) represents Hue (0–360° on a color wheel), Saturation (%), and Lightness (%). HSL is the most intuitive format for adjusting a color while keeping its identity — increasing the lightness value makes a color lighter without shifting its hue, which is much harder to do reliably by eyeballing HEX or RGB values. This makes HSL especially useful for building a consistent color scale, like several shades of the same brand color for a design system, or generating a dark-mode variant of a color by lowering lightness alone.

Adding transparency: RGBA and HSLA

Both RGB and HSL have an alpha-channel variant — rgba(79, 70, 229, 0.5) and hsla(243, 75%, 59%, 0.5) — where the fourth value controls opacity from 0 (fully transparent) to 1 (fully opaque). HEX has an 8-digit variant for the same purpose, but it's used less often simply because the two extra hex digits for opacity are harder to reason about at a glance than a 0–1 decimal.

Picking the right one

Use HSL when you're building a color palette or need to programmatically lighten, darken, or desaturate a base color — it maps much more directly onto how humans actually describe color ("a bit darker," "less saturated") than HEX or RGB do. Use HEX for quick copy-paste into design tools or CSS variables, since it's the most universally recognized format. Use RGB (or RGBA) when you need fine control over transparency, or when working with canvas or image APIs that expect 0–255 channel values rather than percentages.

Try it

The Color Picker & Gradient Generator converts between all three formats live and lets you copy any of them with one click. For building a full palette of harmonious colors instead of just one, the Color Palette Generator generates coordinated color sets with several harmony types and exports them as CSS, Tailwind config, or JSON. And for turning a color pair into ready-to-use gradient CSS with multiple stops or a radial shape, the CSS Gradient Generator covers that directly.