Why Color Formats Matter

As a web designer or developer, you work with colors constantly. CSS supports multiple color formats — HEX, RGB, HSL, and more. Understanding these formats helps you write better code, communicate with designers, and create consistent color palettes.

Color Formats Explained

HEX (Hexadecimal)

The most common color format in web development.

Format: #RRGGBB or #RGB (shorthand)
Example: #3B82F6 (a nice blue)
Range: 00-FF for each channel (0-255)
Used in: CSS, HTML, design tools, brand guidelines

.button {
  background-color: #3B82F6;
}

RGB (Red, Green, Blue)

Defines colors by mixing red, green, and blue light.

Format: rgb(R, G, B) or rgba(R, G, B, A) with opacity
Example: rgb(59, 130, 246)
Range: 0-255 for each channel
Used in: CSS, JavaScript, image processing

.button {
  background-color: rgb(59, 130, 246);
  /* With 80% opacity */
  background-color: rgba(59, 130, 246, 0.8);
}

HSL (Hue, Saturation, Lightness)

The most intuitive format for humans. Easy to create color variations.

Format: hsl(H, S%, L%)
Example: hsl(217, 91%, 60%)
Hue: 0-360 (color wheel position)
Saturation: 0-100% (gray to vivid)
Lightness: 0-100% (black to white)

.button {
  background-color: hsl(217, 91%, 60%);
}

HSB/HSV (Hue, Saturation, Brightness/Value)

Used in design tools like Figma, Sketch, and Photoshop.

Format: Similar to HSL but uses brightness instead of lightness
Note: Not directly supported in CSS — convert to HEX, RGB, or HSL

When to Use Each Format

Format

Best For

HEX	CSS, brand colors, quick color specification
RGB	JavaScript color manipulation, opacity needed
HSL	Creating color palettes, adjusting shades
HSB	Design tools (Figma, Sketch)

Creating Color Palettes with HSL

HSL makes it easy to create consistent color variations. Keep the hue the same and adjust saturation and lightness:

/* Blue palette using HSL */
--blue-100: hsl(217, 91%, 95%); /* Very light */
--blue-200: hsl(217, 91%, 85%);
--blue-300: hsl(217, 91%, 75%);
--blue-400: hsl(217, 91%, 65%);
--blue-500: hsl(217, 91%, 60%); /* Base color */
--blue-600: hsl(217, 91%, 50%);
--blue-700: hsl(217, 91%, 40%);
--blue-800: hsl(217, 91%, 30%);
--blue-900: hsl(217, 91%, 20%); /* Very dark */

Color Accessibility

Colors must be accessible to all users, including those with color vision deficiency:

Contrast Ratios (WCAG 2.1)

Normal text: minimum 4.5:1 contrast ratio
Large text: minimum 3:1 contrast ratio
UI components: minimum 3:1 contrast ratio

Tips for Accessible Colors

Don't rely on color alone to convey information
Test with color blindness simulators
Use sufficient contrast between text and background
Provide alternative indicators (icons, patterns, labels)

CSS Color Functions (Modern CSS)

Modern CSS offers powerful color functions:

/* Relative colors (adjust existing colors) */
.lighter {
  background: hsl(from var(--brand) h s calc(l + 20%));
}
/* Color mixing */
.mixed {
  background: color-mix(in srgb, #3B82F6 70%, white);
}

Convert Colors Instantly

Use our free Color Converter to convert between HEX, RGB, HSL, and HSB formats instantly. Preview colors in real time, copy CSS values, and build palettes — all in your browser with zero sign-up.

Color Converter Guide: HEX, RGB, HSL Explained for Designers