Color Theory for Developers

Why Color Theory Matters

Good color choices make your UI more readable, accessible, and visually appealing. Understanding color models helps you convert between formats, create harmonious palettes, and meet accessibility standards.

Color Models

• RGB (Red, Green, Blue): additive model used by screens. Values 0–255 per channel. Great for code, but hard to reason about visually.
• HSL (Hue, Saturation, Lightness): intuitive model where hue is a degree on the color wheel (0–360), saturation and lightness are percentages. Easy to create variations.
• HEX: compact RGB notation using hexadecimal (#FF5733). The web's most common format.
• OKLCH: a perceptually uniform color space. Colors with the same lightness value actually look equally bright, unlike HSL. Increasingly supported in modern CSS.
• CMYK (Cyan, Magenta, Yellow, Key/Black): subtractive model used in print. Not used on the web, but useful when preparing assets for print.

Color Harmony Rules

These classic rules help you pick colors that look good together:

• Complementary: opposite on the color wheel (e.g., blue + orange). High contrast, vibrant.
• Analogous: neighbors on the wheel (e.g., blue + teal + green). Harmonious, calming.
• Triadic: three colors equally spaced (e.g., red + yellow + blue). Balanced and colorful.
• Split-complementary: one color + two neighbors of its complement. Less tension than complementary.

Converting Between Formats

HEX:   #3B82F6
RGB:   rgb(59, 130, 246)
HSL:   hsl(217, 91%, 60%)
OKLCH: oklch(0.63 0.21 255)

// CSS supports all of these natively
.button { background: hsl(217 91% 60%); }
.button { background: oklch(0.63 0.21 255); }

Accessibility & Contrast

WCAG requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Always check your color combinations against these thresholds, especially for text on colored backgrounds.

Try our Color Format Converter, Palette Generator, or Contrast Checker to work with colors instantly.