Hex, RGB, and HSL Color Codes: A Complete Guide for Web Designers

Why Web Colors Come in Three Formats

Open any CSS file and you will encounter color values in at least three different notations. Hex codes like #3B82F6, RGB values like rgb(59, 130, 246), and HSL values like hsl(217, 91%, 60%) all describe exactly the same shade of blue — but each format has different strengths. Understanding when and why to use each one makes you a faster, more deliberate developer.

Hexadecimal Color Codes Explained

A hex color code is a base-16 representation of an RGB color value in the format #RRGGBB. In hexadecimal, digits go 0–9 then A–F, giving 16 values per digit. Two hex digits together give 256 possible values (0–255), matching the RGB range exactly.

Reading #3B82F6: Red = 3B = 59, Green = 82 = 130, Blue = F6 = 246. That is Tailwind CSS "blue-500."

Shorthand Hex Notation

When both digits in each pair are identical, you can write a 3-character shorthand: #FFF = #FFFFFF (white), #F0A = #FF00AA. The shorthand is valid in all modern browsers.

8-Digit Hex with Alpha

CSS Color Level 4 introduced 8-digit hex notation: #RRGGBBAA, where the final two digits represent opacity (00 = transparent, FF = opaque). For example, #3B82F680 is the same blue at 50% opacity.

RGB: The Additive Color Model

RGB stands for Red, Green, Blue. CSS syntax: rgb(59, 130, 246) or with opacity: rgba(59, 130, 246, 0.5). Values range from 0–255 per channel, giving 256³ = 16.7 million possible colors.

Use RGB when you need opacity control, when working with canvas/WebGL, when a designer hands you numeric RGB values from Figma, or when animating individual color channels with JavaScript.

HSL: The Most Intuitive Format for Developers

HSL stands for Hue (0–360°, color wheel position), Saturation (0–100%, intensity), Lightness (0–100%, brightness). CSS syntax: hsl(217, 91%, 60%).

The power of HSL is in programmatic variation. For a button hover state: base is hsl(217, 91%, 60%), darker hover is simply hsl(217, 91%, 50%) — just reduce lightness. A muted variant: hsl(217, 30%, 60%) — just reduce saturation. This is why Tailwind CSS and Radix UI define their color scales in HSL.

Practical CSS Usage Patterns

Design tokens (custom properties): Define in HSL for flexibility and easy theme variation
Static color references: Use hex for conciseness in component styles
Transparent overlays and shadows: Use rgba() for fine-grained opacity control

Quick Reference: When to Use Each Format

Hex: Static colors, design system values, HTML attributes, sharing color values with other developers
RGB/RGBA: Opacity control, canvas/WebGL, JavaScript color manipulation by channel
HSL/HSLA: Design tokens, programmatic tints/shades, theme systems

When you need to convert between formats, a hex to RGB converter handles the base-16 arithmetic instantly and shows you the color visually.