Color & Brand
Color systems, brand consistency, contrast ratios, and the science of visual perception on screens.
Color on the Web: Technical Basics
Web colors are defined using several formats:
| Format | Example | Use Case | Notes |
|---|---|---|---|
| Hex | #FF5733 | All purposes, most common | 6-digit code, easy to read |
| RGB | rgb(255, 87, 51) | All purposes, modern | Red, Green, Blue 0-255 |
| RGBA | rgba(255, 87, 51, 0.8) | With transparency | RGB plus Alpha (0-1) |
| HSL | hsl(9, 100%, 60%) | Design thinking | Hue, Saturation, Lightness |
| CSS Variables | var(--primary) | Scalable systems | Define colors once, reuse everywhere |
Modern approach: Use CSS custom properties (variables) to define your color system. Define all colors once, use them throughout. Makes changes global and prevents color inconsistencies.
Building a Web Color System
A complete color system has four layers:
1. Brand Colors
Your primary and secondary brand colors. The palette from your brand guidelines. Usually 2-3 main colors. These are your identity.
2. Semantic Colors
Colors with meaning. Success (green), Warning (yellow/orange), Error (red), Info (blue). Used for form feedback, alerts, status indicators. Not about brand, about communication.
3. Neutral Colors
Grays and neutrals. For backgrounds, borders, disabled states. Usually 5-8 variations from near-white to near-black. The workhorses of the system.
4. Dark Mode Colors
Inverted versions for dark mode. All colors must work on dark backgrounds too. Contrast requirements are the same but reversed (light text on dark background).
CSS Custom Properties for Color Systems
Modern color systems use CSS variables:
:root {
--primary: #FF5733;
--secondary: #3366FF;
--success: #22C55E;
--error: #EF4444;
--neutral-50: #F9FAFB;
--neutral-900: #111827;
}
.button-primary {
background-color: var(--primary);
color: white;
}
Benefits: Change --primary to #0066CC, and every component using it updates automatically. No search-and-replace across hundreds of files.
Brand Identity and the Web Gap
There's often a big gap between brand guidelines and web implementation:
Example: A brand's guidelines say
"Use the primary color on 30% of page, white space on 40%, secondary on 20%, accents on 10%."
Web reality: Primary color on buttons, links, borders = maybe 15% of page. White space is 60%. The color ratios don't work the same way on screen as in print.
Screen color impacts perception differently than print. Bright colors on screens feel more intense. You might need to desaturate or lighten brand colors for web readability. The web isn't a print document — it needs web-specific color choices.
Contrast Ratios and Accessibility
Color contrast matters for accessibility. WCAG standards specify minimum contrast:
WCAG AA (Minimum)
4.5:1 for normal text, 3:1 for large text
Readable for most people. Required for legal compliance. Default target.
WCAG AAA (Enhanced)
7:1 for normal text, 4.5:1 for large text
Readable for people with low vision. Gold standard but sometimes makes design harder.
Quick check: Use WebAIM's contrast checker or Chrome DevTools to measure ratio. Light gray text on white background often fails (too low contrast). Dark text on dark background fails. High contrast combinations (black text on white, white text on dark) always pass.
Dark Mode Design
Dark mode is no longer optional — many users expect it. Designing for dark mode requires:
- Inverse Colors:Light text on dark backgrounds. White text on dark backgrounds, not bright colors.
- Lower Brightness:Reduce brightness to prevent eye strain in low-light environments. Dark backgrounds are typically #0F0F0F or #1A1A1A, not pure black #000000.
- Softer Shadows:Dark mode reduces contrast naturally. Shadows don't work the same way. Use lighter shadows or outlines instead.
- Accessible Contrast:Same 4.5:1 ratio applies. Light gray on dark background must still be readable.
Modern implementations use CSS media queries to automatically switch:
@media (prefers-color-scheme: dark) {
:root {
--bg: #1A1A1A;
--text: #F5F5F5;
}
}
Platform Color System Support
| Platform | Color Variables | Dark Mode Support | Brand Color Export | Flexibility |
|---|---|---|---|---|
| Wix | Limited | None | No | Low |
| Squarespace | Template-dependent | Yes (template) | No | Low-Medium |
| WordPress | Plugin-dependent | Via theme/plugin | No | Medium |
| Webflow | Full CSS variables | Full support | Partial | High |
| Custom Code | Full control | Full control | Yes | Maximum |
The Colorblind Reality
About 8% of men and 0.5% of women have some form of color blindness. Common types:
- Red-Green:Can't distinguish red from green (most common). "Red = error, green = success" doesn't work. Add icons or text labels.
- Blue-Yellow:Rarer, but blue and yellow get confused.
- Monochromacy:Very rare. Only see grayscale. Color can't be the only differentiator.
Design rule: Never communicate information through color alone. Always add another differentiator: icons, text labels, patterns. A form error should be red AND marked with an icon AND have explanatory text.
Color Psychology on the Web
Colors carry psychological associations, but be careful not to over-interpret:
Blue
Trust, calm, professionalism. Tech and finance use blue obsessively. Popular and safe.
Red
Energy, urgency, alarm. CTA buttons and warnings. Can feel aggressive if overused.
Green
Success, growth, nature. E-commerce and SaaS use green for "buy" and "confirm". Natural and organic.
Yellow/Gold
Warmth, optimism, luxury (gold). Yellow can be hard to read as text. Better as accent.
Reality check: These associations are cultural and often overstated. Your industry, your brand, and your specific users matter more than general psychology. What matters is consistency — use colors intentionally and consistently.