Color Theory for Developers

Every color on screen is made by mixing Red, Green, and Blue light. Each channel ranges from 0 (none) to 255 (full intensity).

Hex notation encodes the same RGB values as a 6-digit hexadecimal string: #RRGGBB. For example, rgb(255, 0, 0) is #FF0000 (pure red).

HSL describes color using three intuitive properties:

• Hue (0-360) — the color angle on the color wheel (0=red, 120=green, 240=blue)
• Saturation (0-100%) — how vivid the color is (0%=gray, 100%=pure color)
• Lightness (0-100%) — how bright (0%=black, 50%=pure, 100%=white)

HSL is often easier for developers to reason about than RGB because you can shift hue without affecting brightness.

The WCAG (Web Content Accessibility Guidelines) define minimum contrast ratios so text is readable for everyone:

• AA Normal text — ratio ≥ 4.5:1
• AA Large text — ratio ≥ 3:1
• AAA Normal text — ratio ≥ 7:1
• AAA Large text — ratio ≥ 4.5:1

Pick a background and text color below to check their contrast ratio:

Sample Heading Text

The quick brown fox jumps over the lazy dog. This preview shows how your chosen text color looks on the chosen background.

1. What does the hex color #00FF00 represent?

2. In HSL, what does a Saturation of 0% produce?

3. What is the minimum WCAG AA contrast ratio for normal text?