I spent three hours tweaking button colors on a landing page last year. The blue looked great in isolation, but next to the orange call-to-action, everything felt off. Turns out the issue wasn't my taste; I was accidentally placing two colors with nearly identical saturation and brightness right next to each other. A basic understanding of color theory would have saved me that afternoon.
Understanding Color Systems
Web design uses three main color systems. Each has its strengths, and understanding when to use which one makes color work much easier.
HEX (Hexadecimal)
The most common format in CSS. A six-character code like #3B82F6 where pairs of characters represent red, green, and blue values from 00 to FF (0 to 255). It's compact and widely supported, but not particularly intuitive. Looking at #3B82F6, can you tell what color that is? Probably not without practice.
RGB (Red, Green, Blue)
Same underlying model as HEX, just written differently: rgb(59, 130, 246). Each channel ranges from 0 to 255. With RGBA, you add an alpha channel for transparency: rgba(59, 130, 246, 0.5).
HSL (Hue, Saturation, Lightness)
This is the one that actually makes sense to humans. Hue is the color (0-360 degrees on a color wheel), saturation is how vivid it is (0-100%), and lightness is how bright (0-100%). Want a slightly lighter version of your blue? Just bump the lightness. Want it more muted? Lower the saturation. HSL lets you reason about color in a way that matches how we actually think.
| System | Example | Best For |
|---|---|---|
| HEX | #3B82F6 | CSS shorthand, design specs |
| RGB | rgb(59, 130, 246) | Transparency (RGBA), JS manipulation |
| HSL | hsl(217, 91%, 60%) | Creating palettes, adjusting variations |
The Color Wheel and Harmony
The color wheel arranges hues in a circle, and the relationships between positions on the wheel create different types of harmony. You don't need to memorize this, just understand the principles:
Complementary - Colors directly opposite each other on the wheel (e.g., blue and orange). High contrast, energetic. Great for call-to-action buttons against a neutral background.
Analogous - Colors next to each other on the wheel (e.g., blue, blue-green, green). Harmonious and comfortable. Works well for backgrounds and sections where you want a cohesive feel without jarring transitions.
Triadic - Three colors evenly spaced on the wheel (e.g., red, yellow, blue). Vibrant and balanced. Use one as the dominant color and the other two as accents.
Split-complementary - A base color plus the two colors adjacent to its complement. Less tension than full complementary, but still plenty of contrast.
WCAG Accessibility and Contrast
Beautiful colors mean nothing if people can't read your text. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios:
- AA standard: 4.5:1 for normal text, 3:1 for large text (18px+ bold or 24px+ regular)
- AAA standard: 7:1 for normal text, 4.5:1 for large text
Light gray text on a white background might look elegant, but if the contrast ratio is below 4.5:1, a significant portion of your audience will struggle to read it. Always check your text colors against backgrounds with a contrast checker.
Common Color Mistakes in Web Design
1. Too many colors. Most successful websites use 2-3 primary colors plus neutrals. Every additional color makes the palette harder to manage and the design harder to maintain consistently.
2. Ignoring color meaning. Colors carry cultural associations. Red signals danger or urgency in many cultures. Green suggests success or nature. Blue conveys trust. These aren't universal, but they're deeply ingrained in web users' expectations. A red "success" button will confuse people.
3. Not testing on different screens. That carefully tuned purple might look completely different on a cheap LCD monitor versus a calibrated MacBook display. Always test your key colors on multiple devices.
Dark Mode Considerations
If your site supports dark mode, you can't simply invert colors. Dark backgrounds need different saturation levels, and bright colors that work on white can be painfully vivid on dark gray. Common approaches:
- Reduce saturation slightly for dark backgrounds
- Use lighter tints of your brand colors
- Test contrast ratios separately for dark mode
- Don't use pure black (#000000) as the background; dark gray (#1a1a2e or similar) is easier on the eyes
Building a Palette: A Practical Approach
Here is a method that works reliably for most web projects:
- Pick one primary brand color
- Generate 5-9 lightness variations (think Tailwind's 50-900 scale)
- Choose one accent color using a complementary or split-complementary relationship
- Define your neutrals (grays for text, backgrounds, borders)
- Add a semantic set: success (green), warning (yellow), error (red), info (blue)
- Test all combinations for contrast accessibility
Color doesn't have to be intimidating. Start with the systems, learn a few harmony rules, and always verify contrast. That's enough to make consistently good color decisions for the web.