Color is the first thing users notice about a website — before they read a word or click a button. Good color choices build trust, guide attention, and reinforce brand identity. Bad choices create confusion, hurt readability, and drive users away. This guide covers the color theory fundamentals every web designer needs.
Color Models for the Web
Hex (Hexadecimal)
The most common format in web development. Six characters representing red, green, and blue: #FF5733. Each pair ranges from 00 (none) to FF (maximum). Shorthand exists for colors with repeated digits: #FFF = #FFFFFF (white).
RGB / RGBA
Red, Green, Blue values from 0-255: rgb(255, 87, 51). RGBA adds an alpha channel for opacity: rgba(255, 87, 51, 0.8). More intuitive than hex since you can see the individual channel values.
HSL / HSLA
Hue (0-360 degrees on the color wheel), Saturation (0-100%), Lightness (0-100%): hsl(12, 100%, 60%). HSL is the most intuitive model for design work — you can create color variations by adjusting just one value.
Convert between all these formats instantly with our Color Converter.
Color Harmonies
Color harmonies are combinations that look visually pleasing together. They're based on relationships on the color wheel:
Complementary
Colors opposite each other on the wheel (e.g., blue and orange). High contrast, vibrant feel. Great for call-to-action buttons that need to stand out from the surrounding design.
Analogous
Colors adjacent on the wheel (e.g., blue, blue-green, green). Harmonious, cohesive feel. Common in nature-inspired designs. Low contrast means you need careful attention to readability.
Triadic
Three colors evenly spaced on the wheel (e.g., red, yellow, blue). Vibrant and balanced. Use one dominant color and two accents to avoid visual chaos.
Split-Complementary
A color plus the two colors adjacent to its complement. Less tension than pure complementary, more variety than analogous. A safe choice for beginners.
Building a Web Color Palette
A practical web palette needs these roles:
- Primary color: Your brand color. Used for key actions, links, and interactive elements
- Background: Usually white/off-white (light mode) or dark gray/black (dark mode)
- Text: High contrast against the background — near-black on light, near-white on dark
- Muted: A subtle tint of your background for cards, sections, and secondary surfaces
- Border: A gentle gray that separates elements without demanding attention
- Accent / Secondary: A complementary color for secondary actions and highlights
- Error / Success / Warning: Semantic colors — red, green, yellow (or orange)
Start with your primary color, then derive the rest. HSL makes this easy: keep the hue, adjust saturation and lightness to create variants.
Already have a reference image or brand asset? Our Color Palette from Image tool extracts the dominant colors automatically.
Contrast and Accessibility
Contrast ratio measures the difference in luminance between foreground and background colors. The Web Content Accessibility Guidelines (WCAG) set minimum ratios:
- WCAG AA (minimum): 4.5:1 for normal text, 3:1 for large text (18px+ or 14px+ bold)
- WCAG AAA (enhanced): 7:1 for normal text, 4.5:1 for large text
Pure white (#FFFFFF) on pure black (#000000) has a ratio of 21:1 — maximum contrast. Gray (#767676) on white has exactly 4.5:1 — the minimum for AA compliance. Anything lighter than that gray on white fails accessibility standards.
This doesn't mean everything needs to be black and white. You can use color — just ensure sufficient contrast. Many beautifully designed sites meet AAA standards.
Color Blindness Considerations
About 8% of men and 0.5% of women have some form of color vision deficiency. The most common type is red-green color blindness (deuteranopia/protanopia). Design implications:
- Never use color alone to convey meaning: Red/green status indicators need icons or text labels too
- Test your palette: Use our Color Blindness Simulator to see your design through different types of color vision
- Use blue as an accent color: Blue is distinguishable by nearly all forms of color vision deficiency
- Add patterns or textures to charts: Don't rely solely on color to differentiate data series
CSS Color Techniques
CSS Custom Properties for Theming
:root {
--primary: #2563eb;
--primary-hover: #1d4ed8;
--background: #ffffff;
--foreground: #171717;
}Define your palette as CSS variables, then reference them throughout your styles. This makes theme changes (including dark mode) a matter of swapping variable values.
Gradients
Gradients add depth and visual interest. Subtle gradients (between two similar colors) work as backgrounds. Bold gradients (between contrasting colors) work as hero sections or CTAs. Generate them with our CSS Gradient Generator.
Explore and Create Colors
Put color theory into practice with our free tools:
- Color Converter — convert between hex, RGB, HSL, and more
- CSS Gradient Generator — create beautiful gradient code
- Color Palette from Image — extract colors from any image
- Image Color Picker — pick exact colors from any image
- Color Blindness Simulator — test accessibility of your palette