HEX, RGB and HSL Colors Explained for Web Developers

The Science of Digital Color

Computer monitors and smartphone displays emit color using the additive color model, combining Red, Green, and Blue light. In web development, CSS provides several complementary syntaxes to instruct screens on how much intensity to emit for each color channel.

1. HEX Color Codes (#RRGGBB)

HEX notation represents RGB color channels in hexadecimal base-16 format (ranging from 00 for 0 intensity up to FF for 255 maximum intensity):

• #ff0000: Pure red (Red: 255, Green: 0, Blue: 0).
• #00ff00: Pure green.
• #0000ff: Pure blue.
• #ffffff: White (all channels at full intensity).
• #000000: Black (all channels off).

You can also supply an optional 8-digit HEX code (#RRGGBBAA) where the last two digits denote alpha transparency.

2. RGB and RGBA Notation

RGB explicitly specifies decimal values between 0 and 255 for each channel:

/* Standard decimal syntax */ color: rgb(13, 148, 136); /* With alpha channel in modern CSS */ background-color: rgb(13 148 136 / 85%);

3. HSL (Hue, Saturation, Lightness)

While HEX and RGB describe color from the hardware perspective of light emitters, HSL models color intuitively as perceived by human vision:

• Hue (0° to 360°): The angle on the standard color wheel (0° is Red, 120° is Green, 240° is Blue).
• Saturation (0% to 100%): Color intensity (0% is completely grayscale, 100% is vibrant).
• Lightness (0% to 100%): Brightness (0% is pure black, 50% is normal balance, 100% is pure white).

HSL makes creating consistent UI hover states and accessible color palettes effortless: to create a darker button hover state, simply decrement the lightness percentage without altering the hue or saturation.

WCAG Accessibility & Text Contrast Ratios

Ensuring readable text contrast is a legal and moral requirement for modern web applications under the Web Content Accessibility Guidelines (WCAG 2.1):

• Level AA Standard: Requires a minimum contrast ratio of 4.5:1 for body text and 3.0:1 for headlines (18pt or 14pt bold).
• Level AAA Enhanced: Demands 7.0:1 for body text and 4.5:1 for large text.

Use our interactive Color Converter tool to test contrast ratios against both light and dark backgrounds instantly.

Frequently Asked Questions About Web Colors

What is the difference between RGB and CMYK?

RGB is an additive color model used for digital screens: pixels start as black (unlit) and adding Red, Green, and Blue light creates brighter colors, with all three channels combined producing pure white. CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used for physical ink printing: ink absorbs light reflected off paper, and mixing inks produces darker tones.

What are the new CSS Color Module Level 4 formats (oklch, lch)?

Modern CSS introduced perceptual color spaces like OKLCH and LCH. Unlike sRGB or HSL, OKLCH is perceptually uniform: an adjustment to lightness looks equally bright across all hues (in HSL, pure yellow appears far brighter to human eyes than pure blue at the identical 50% lightness value). OKLCH also unlocks wide-gamut displays (Display P3) capable of showing vibrant shades unattainable in traditional sRGB.

How does color blindness affect web accessibility?

Approximately 8% of men and 0.5% of women experience color vision deficiency (most commonly deuteranomaly or red-green color blindness). Never convey critical status solely through color (e.g., red for error, green for success). Always pair color changes with text labels, icons, or patterns so that all users can interpret state changes unambiguously.