Hex, RGB, and HSL: The Complete Guide to CSS Colors
Understand how hexadecimal, RGB, and HSL color formats work in CSS, how to convert between them, and which one to use for maintainable, readable stylesheets.
CSS gives you several ways to describe the exact same color. Knowing how hex, RGB, and HSL work, and when to use each, makes your stylesheets easier to read, tweak, and maintain.
Hexadecimal Colors
A hex color is a six-digit code where each pair represents the red, green, and blue channels from 00 to FF (0 to 255 in decimal). It is compact and by far the most common format in design tools and codebases.
/* #RRGGBB */
color: #0e8f87; /* teal */
/* Shorthand: #RGB expands each digit */
color: #fff; /* same as #ffffff */
/* 8-digit hex adds alpha */
background: #0e8f8780; /* teal at 50% opacity */RGB and RGBA
RGB describes the same red, green, and blue channels using decimal numbers, which many people find easier to reason about than hex. The alpha channel in RGBA controls opacity from 0 (transparent) to 1 (opaque).
color: rgb(14, 143, 135);
background: rgba(14, 143, 135, 0.5);HSL: Human-Friendly Colors
HSL stands for Hue, Saturation, and Lightness. Hue is an angle on the color wheel (0-360), while saturation and lightness are percentages. HSL is the most intuitive format for creating consistent palettes, because you can build lighter or darker shades of a color just by changing the lightness value.
color: hsl(175, 82%, 31%);
/* A lighter variant, same hue */
background: hsl(175, 82%, 90%);Which Format Should You Use?
- Hex: great for static brand colors and pasting from design tools.
- RGB / RGBA: use when you need opacity or are computing colors in JavaScript.
- HSL: best for building color systems, hover states, and shade variations.
These formats are interchangeable, they all describe the same pixels. Pick the one that makes your intent clearest, and convert as needed.
Need to switch a color between formats? A Hex to RGB converter turns any color code into its RGB (and HSL) equivalents instantly, right in your browser.