If you've ever copied a hex code from Figma and pasted it into CSS, you've used a color code without thinking much about it. But designers and developers constantly bounce between #hex, rgb(), and hsl() — and there are real reasons each format exists. Knowing when to reach for which one makes your CSS easier to maintain and your design work faster.

This guide breaks down all three formats, shows you how they map to the same underlying color, and explains the practical situations where each one shines.

What is a Color Code?

A color code is a numeric representation of a color that browsers can interpret and render. Instead of saying "a warm orange-red," you give the browser a precise value like #FF5733 or rgb(255, 87, 51). Both describe the exact same color — they're just different notations for the same information.

All three main formats (HEX, RGB, HSL) ultimately describe color using the RGB color model, where every color is a mix of red, green, and blue light at different intensities. The difference is in how that information is expressed.

HEX vs RGB vs HSL: When to Use Which

Format Example Best for
HEX #FF5733 Copying from design tools, concise notation
RGB rgb(255, 87, 51) Dynamic color manipulation in JavaScript
HSL hsl(11, 100%, 60%) Creating color variations, theming systems

HEX

HEX encodes the red, green, and blue channels as two hexadecimal digits each, in the format #RRGGBB. Each pair ranges from 00 (0 in decimal) to FF (255 in decimal). So #FF0000 is full red, no green, no blue. #FFFFFF is white (all channels maxed), and #000000 is black.

Three-digit shorthand works when both digits in each pair are identical: #F53 expands to #FF5533.

RGB

RGB expresses the same three channels as decimal integers from 0 to 255. It reads more naturally than hex once you're used to it, and it's much easier to manipulate programmatically — adding or subtracting values to lighten or darken a color is straightforward arithmetic.

HSL

HSL stands for Hue, Saturation, and Lightness. The hue is expressed as a degree on the color wheel (0–360), where 0 and 360 are red, 120 is green, and 240 is blue. Saturation and lightness are percentages.

HSL is the most human-friendly format. Want a lighter version of your brand color? Increase the lightness. Need a muted, desaturated variant? Lower the saturation. You can generate an entire color system from one hue by varying the other two values. This is why modern design systems almost always define colors in HSL.

Code Examples in CSS

All three formats — same color

/* These all produce identical results */
color: #FF5733;
color: rgb(255, 87, 51);
color: hsl(11, 100%, 60%);

Adding opacity

Use rgba() or hsla() for transparency. The fourth argument is the alpha channel from 0 (fully transparent) to 1 (fully opaque). You can also use the modern rgb() and hsl() syntax with a slash for alpha:

/* Legacy syntax */
background: rgba(255, 87, 51, 0.5);
background: hsla(11, 100%, 60%, 0.5);

/* Modern CSS syntax (equally valid) */
background: rgb(255 87 51 / 50%);
background: hsl(11 100% 60% / 50%);

8-digit HEX with alpha

CSS also supports an 8-digit hex format (#RRGGBBAA) where the last two digits specify opacity. #FF573380 is the same orange at roughly 50% opacity (0x80 = 128 ≈ 50% of 255). Browser support is solid in modern browsers, but if you need IE compatibility, stick with rgba().

/* 50% transparent orange */
background: #FF573380;

CSS custom properties (variables)

When building a design system, defining colors as CSS variables with HSL components gives you a lot of flexibility:

:root {
  --brand-hue: 11;
  --brand-color: hsl(var(--brand-hue), 100%, 60%);
  --brand-light: hsl(var(--brand-hue), 100%, 80%);
  --brand-dark: hsl(var(--brand-hue), 100%, 40%);
}

Need to convert between formats? The Color Code Converter handles HEX, RGB, and HSL instantly. To build out a full color palette, try the Color Palette Generator. And if you're working on gradients, the CSS Gradient Generator lets you preview and export gradient CSS without writing it by hand.

Frequently Asked Questions

What is 8-digit hex and when should I use it?
8-digit hex (#RRGGBBAA) adds an alpha channel to standard hex notation. The last two digits represent opacity in hex (00 = transparent, FF = opaque). It's a concise alternative to rgba() and is supported in all modern browsers. Avoid it if you need to support Internet Explorer or very old browsers — use rgba() instead.
Should I use CSS custom properties for colors?
Yes, if you're building anything beyond a one-off page. Defining colors as CSS variables (--color-primary: hsl(220, 90%, 56%)) makes theme changes trivial — update one variable and everything using it updates. It also makes dark mode support much more manageable. The HSL format pairs especially well with CSS variables since you can expose the individual hue, saturation, and lightness as separate variables.
When should I prefer HSL over HEX?
Whenever you're creating related colors — hover states, disabled states, tints, shades, or an entire palette from one brand color. With HEX or RGB, these relationships aren't visible in the code. With HSL, you can see at a glance that hsl(220, 90%, 40%) is a darker version of hsl(220, 90%, 56%). It makes your color choices more intentional and your CSS more readable.

Summary

  • HEX, RGB, and HSL all describe the same colors — they're different notations for the RGB model
  • HEX is compact and great for copying from design tools
  • RGB is easy to manipulate in JavaScript
  • HSL is the most intuitive for creating color variations and design systems
  • Use rgba() / hsla() or the modern slash syntax for transparency
  • CSS custom properties + HSL is a powerful combo for theming

Start working with color in your browser right now: