Color Systems for the Web: HEX, RGB, HSL, and Beyond
Understanding color systems is fundamental to web design. Each system has specific strengths: HEX (#RRGGBB): The most common web color format. Six hexadecimal digits representing Red, Green, and Blue channels (0-255 each). Example: #3B82F6 is a bright blue. Shorthand (#RGB) is available when each pair is identical: #FFF = #FFFFFF. RGB / RGBA: Functional notation that separates Red, Green, Blue channels as decimal values. RGBA adds an Alpha channel for transparency. Example: rgba(59, 130, 246, 0.5) is the same blue at 50% opacity. HSL / HSLA: Hue (0-360°), Saturation (0-100%), Lightness (0-100%). The most intuitive system for designers because it maps to how humans think about color: • Hue is the color itself (0°=red, 120°=green, 240°=blue) • Saturation controls vibrancy (0%=gray, 100%=vivid) • Lightness controls brightness (0%=black, 50%=pure color, 100%=white) OKLCH (new): The newest CSS color space, supported since 2023. It provides perceptually uniform lightness, meaning a 50% lightness blue and 50% lightness yellow actually look equally bright — unlike HSL where they don't. OKLCH is becoming the preferred color system for design tokens. Pro Tip: Use HSL for your design system. Creating color scales becomes trivial — just adjust the Lightness value: hsl(220, 90%, 95%) for backgrounds, hsl(220, 90%, 50%) for primary, hsl(220, 90%, 20%) for text.
CSS Color Format Comparison
| Format | Syntax Example | Readability | Best For |
|---|---|---|---|
| HEX | #3b82f6 | Low | Copy-pasting from design tools |
| RGB | rgb(59, 130, 246) | Medium | Programmatic color manipulation |
| HSL | hsl(217, 91%, 60%) | High | Manual color tuning & themes |
| OKLCH | oklch(0.62 0.2 255) | Medium | Perceptually uniform palettes |
Pro Tip: HSL for Design Systems
When building a design system, define your brand colors in HSL. You can create consistent tints and shades by only adjusting the lightness value (e.g., hsl(217, 91%, 40%) for dark, hsl(217, 91%, 80%) for light), keeping hue and saturation constant.
From My Experience
After building 20+ React projects, I've settled on HSL for all my design tokens. The reason is simple: when a designer says "make that green a bit lighter," I just bump the L value by 10. With hex codes, I'd have to open a color picker every time. HSL maps directly to how humans think about color.
Color Theory and Accessible Color Palettes
Great web design starts with understanding how colors interact and ensuring everyone can perceive them: Color Harmony Rules: • Complementary: Colors opposite on the wheel (blue + orange). High contrast, energetic. Use for CTAs and important UI elements. • Analogous: Adjacent colors (blue + blue-green + cyan). Harmonious and calming. Use for backgrounds and content areas. • Triadic: Three equally spaced colors (red + yellow + blue). Vibrant and balanced. Use one as primary, others as accents. • Split-Complementary: Base color + two colors adjacent to its complement. Less tension than complementary, more interest than analogous. • Monochromatic: Variations of a single hue (different saturation and lightness). Professional and cohesive. The safest choice. Accessibility (WCAG 2.1) Requirements: • Normal text: Minimum 4.5:1 contrast ratio against background • Large text (18px bold / 24px regular): Minimum 3:1 contrast ratio • UI components: Minimum 3:1 contrast ratio against adjacent colors • Don't rely on color alone to convey information (use icons, patterns, or text labels) Color Blindness Considerations: • 8% of men and 0.5% of women have some form of color vision deficiency • The most common type (deuteranopia) makes red and green look similar • Always test your palette with color blindness simulators • Ensure your design works in grayscale The 60-30-10 Rule: Apply your dominant color to 60% of the interface, secondary color to 30%, and accent color to 10%. This creates visual balance and natural hierarchy.
/* Linear gradient — smooth directional blend */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
/* Radial gradient — circular or elliptical */
background: radial-gradient(circle at top left, #f093fb, #f5576c);
/* Conic gradient — pie-chart style */
background: conic-gradient(from 45deg, #ff6b6b, #feca57, #48dbfb, #ff6b6b);
/* Multi-stop gradient with precise control */
background: linear-gradient(
to right,
#ee7752 0%,
#e73c7e 25%,
#23a6d5 50%,
#23d5ab 100%
);Info
CSS gradients are rendered by the browser as images, so they can be used anywhere background-image is accepted. They scale infinitely without quality loss, making them ideal for responsive designs.
A Pattern That Works
For glass-morphism cards (like the ones on this site), I use a subtle gradient overlay on top of backdrop-filter: blur(). The trick is keeping opacity under 0.5 and using a white-to-transparent gradient. It creates that frosted glass depth without looking muddy.
CSS Gradients: From Basics to Advanced Techniques
CSS gradients are resolution-independent, have zero file size impact, and are fully hardware-accelerated. Master them to replace heavy image backgrounds: Linear Gradients: The workhorse of web design. Define a direction and color stops: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); Advanced: Create sharp lines by placing two color stops at the same position: background: linear-gradient(to right, red 50%, blue 50%); /* sharp split */ Radial Gradients: Expand from a center point outward. Perfect for spotlight effects and button highlights: background: radial-gradient(circle at 30% 30%, #fff 0%, transparent 50%, #111 100%); Conic Gradients: Rotate around a center point like a color wheel. Used for pie charts, gauges, and artistic effects: background: conic-gradient(from 0deg, red, yellow, lime, aqua, blue, magenta, red); Stacking Gradients: Multiple gradients can be layered using comma separation — a powerful technique for complex patterns without images: background: linear-gradient(135deg, rgba(255,0,0,0.3) 0%, transparent 50%), linear-gradient(225deg, rgba(0,0,255,0.3) 0%, transparent 50%), linear-gradient(315deg, rgba(0,255,0,0.3) 0%, transparent 50%); Performance Tips: • CSS gradients are rendered by the GPU and add zero bytes to page weight • Avoid animating gradient properties directly — animate opacity or transform instead • Keep color stops under 10 per gradient for best rendering performance • Use will-change: background carefully as it can increase GPU memory usage
/* Flat shadow — simple depth */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
/* Elevated card — layered shadows for realism */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.07),
0 2px 4px rgba(0, 0, 0, 0.07),
0 4px 8px rgba(0, 0, 0, 0.07),
0 8px 16px rgba(0, 0, 0, 0.07);
/* Colored glow effect */
box-shadow: 0 0 40px rgba(99, 102, 241, 0.3);
/* Inset shadow — pressed/recessed look */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);Performance Note
Large box-shadow values with high blur radius can trigger repaints and impact scrolling performance on mobile devices. Use will-change: transform on animated elements and keep shadow blur under 40px for smooth 60fps scrolling.
Performance Lesson Learned
Layered box-shadows look amazing but I've seen them tank scroll performance on mobile Safari. On one project, 200+ cards each with 3-layer shadows caused visible jank. The fix: use will-change: transform on the card container and limit complex shadows to hover states only.
Box Shadow Systems: Creating Depth and Hierarchy
Box shadows are the primary tool for creating visual depth in flat UI designs. Understanding shadow anatomy and creating consistent shadow systems elevates your design quality dramatically. Anatomy of box-shadow: box-shadow: [offset-x] [offset-y] [blur-radius] [spread-radius] [color] [inset]; Creating Realistic Shadows: Real-world shadows have two components that most developers miss: 1. A large, soft shadow for ambient occlusion (the overall darkening) 2. A small, sharp shadow for the key light (directional light source) /* Realistic layered shadow */ box-shadow: 0 1px 3px rgba(0,0,0,0.12), /* sharp key shadow */ 0 4px 12px rgba(0,0,0,0.08); /* soft ambient shadow */ Elevation Systems (Material Design inspired): Create a consistent shadow scale for your design system: /* Level 1: Cards, input fields */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); /* Level 2: Dropdowns, popovers */ --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06); /* Level 3: Modals, dialogs */ --shadow-lg: 0 10px 25px rgba(0,0,0,0.1), 0 6px 10px rgba(0,0,0,0.08); /* Level 4: Floating actions, tooltips */ --shadow-xl: 0 20px 50px rgba(0,0,0,0.15), 0 8px 16px rgba(0,0,0,0.1); Neuomorphism (Soft UI): A design trend using dual shadows (light + dark) to create soft, extruded elements: box-shadow: 8px 8px 16px #d1d1d1, -8px -8px 16px #ffffff; Warning: Neumorphism can fail WCAG contrast requirements. Use sparingly and test carefully. Dark Mode Shadows: Shadows are less visible on dark backgrounds. Options: • Reduce opacity and increase blur • Use subtle borders instead of shadows • Use colored shadows matching the background hue • Consider using elevation through background lightness instead
Accessibility First
Always verify your color choices meet WCAG 2.1 contrast requirements. Use browser DevTools (Inspect > color picker) to check contrast ratios in real time. Text on gradient backgrounds should be tested at multiple breakpoints since the underlying color changes across screen sizes.
Building a Complete Design Token System
Design tokens are the atomic values (colors, shadows, spacing, typography) that define your visual system. A well-structured token system ensures consistency across your entire application. Color Tokens (using CSS custom properties): :root { /* Base palette */ --color-primary-50: hsl(220, 90%, 96%); --color-primary-100: hsl(220, 90%, 90%); --color-primary-500: hsl(220, 90%, 50%); --color-primary-900: hsl(220, 90%, 15%); /* Semantic colors */ --color-bg: var(--color-primary-50); --color-text: var(--color-primary-900); --color-accent: var(--color-primary-500); /* Dark mode override */ @media (prefers-color-scheme: dark) { --color-bg: var(--color-primary-900); --color-text: var(--color-primary-50); } } Why This Approach Works: 1. Change one HSL hue value and your entire brand color palette updates 2. Semantic names (--color-text, --color-bg) decouple design intent from specific values 3. Dark mode becomes a simple token swap, not a complete redesign 4. Components reference tokens, not hardcoded colors, making themes trivial Popular Token Systems: • Tailwind CSS: Provides a pre-built, well-considered token system • Open Props: A set of CSS custom properties with great defaults • Radix Colors: Carefully crafted color scales with built-in accessibility • Material Design 3: Google's token-based design language Getting Started: Begin with 5 tokens: primary color, background, text, border, and shadow. Expand only when you need more specificity. A small, well-used token set is far more valuable than a comprehensive one nobody follows.
Sources & Further Reading
Design with Our CSS Tools
Put these principles into practice! Generate beautiful color palettes, create perfect CSS gradients, and design stunning box shadows — all visually, all in your browser.
Explore Design Tools