Color Systems in Web Development: HEX, RGB, HSL Explained

Color Formats in CSS

CSS supports multiple color formats. Understanding them helps you choose the right one for your use case.

HEX Colors

HEX (hexadecimal) is the most common color format in web design. It uses a 6-digit hex code prefixed with #.

color: #FF5733;

Structure: #RRGGBB where each pair is a hex value from 00 to FF (0-255).

#FF5733
 ││││││
 │││││└─ Blue:  0x33 = 51
 ││││└── Blue:  0x33 = 51
 │││└─── Green: 0x57 = 87
 ││└──── Green: 0x57 = 87
 │└───── Red:   0xFF = 255
 └────── Red:   0xFF = 255

Shorthand: #F00 = #FF0000 (red)

With alpha: #FF573380 (8-digit with transparency)

RGB Colors

RGB defines colors using Red, Green, and Blue values (0-255).

color: rgb(255, 87, 51);
color: rgba(255, 87, 51, 0.5);  /* with alpha */

Modern syntax (CSS Color Level 4):

color: rgb(255 87 51 / 50%);

RGB is intuitive when you think about light mixing:

• rgb(0, 0, 0) = Black (no light)
• rgb(255, 255, 255) = White (all light)
• rgb(255, 0, 0) = Red (only red light)

HSL Colors

HSL stands for Hue, Saturation, Lightness. It's the most human-friendly format.

color: hsl(14, 100%, 60%);
color: hsl(14, 100%, 60%, 0.5);  /* with alpha */

• Hue (0-360): Position on the color wheel. 0=red, 120=green, 240=blue
• Saturation (0-100%): Color intensity. 0%=gray, 100%=full color
• Lightness (0-100%): Brightness. 0%=black, 50%=normal, 100%=white

HSL makes it easy to create color variations:

:root {
  --primary: hsl(220, 90%, 56%);       /* Base blue */
  --primary-light: hsl(220, 90%, 70%); /* Lighter */
  --primary-dark: hsl(220, 90%, 42%);  /* Darker */
  --primary-muted: hsl(220, 50%, 56%); /* Less saturated */
}

Try It: Color Converter Tool

Use our Color Converter to convert between HEX, RGB, and HSL instantly.

CSS Color Keywords

CSS includes 148 named colors:

color: tomato;
color: cornflowerblue;
color: mediumseagreen;
color: transparent;
color: currentColor;  /* Inherits from parent */

Choosing the Right Format

| Format | Best For | Example | |--------|----------|---------| | HEX | Design tools, simple colors | #3498db | | RGB | Programmatic color, alpha transparency | rgb(52, 152, 219, 0.8) | | HSL | Design systems, color variations | hsl(204, 70%, 53%) | | Named | Quick prototyping, readability | rebeccapurple |

Accessibility: Color Contrast

WCAG guidelines require minimum contrast ratios:

• AA Normal text: 4.5:1
• AA Large text: 3:1
• AAA Normal text: 7:1
• AAA Large text: 4.5:1

/* Bad: light gray on white (1.4:1 contrast) */
.bad { color: #ccc; background: #fff; }

/* Good: dark gray on white (12.6:1 contrast) */
.good { color: #333; background: #fff; }

Color Tools for Web Developers

• Color Converter: Convert between HEX, RGB, HSL formats
• Color Picker: Pick colors visually and get codes
• Color Palette Generator: Generate harmonious color schemes
• Color Shades Generator: Create tints and shades of any color
• Color Contrast Checker: Test WCAG accessibility compliance
• Color Blindness Simulator: See how colors appear with color vision deficiency
• Gradient Generator: Create CSS gradients visually

Practical Tips

1. Use HSL for design systems: Easier to create consistent color variations
2. Test contrast: Always verify with our Color Contrast Checker
3. Consider color blindness: ~8% of men have some form of color vision deficiency
4. Limit your palette: Start with 3-5 colors and generate variations
5. Use CSS variables: Define colors once, reuse everywhere

:root {
  --hue: 220;
  --primary: hsl(var(--hue), 90%, 56%);
  --primary-hover: hsl(var(--hue), 90%, 48%);
  --bg: hsl(var(--hue), 20%, 98%);
}

Conclusion

Mastering CSS colors makes your designs better and more accessible. Start with the Color Converter and always check accessibility with the Color Contrast Checker.