Color Value: A Developer's Guide to CSS Colors in Design Systems

Understanding CSS Color Formats

Color values are the foundation of every design system, yet many developers treat them as an afterthought. When you're copying colors from a design file into your CSS, you're working with a deceptively complex system that has evolved significantly.

Understanding color values isn't just about aesthetics--it's about building maintainable, accessible, and scalable component libraries. This guide explores how modern CSS color features can transform your approach to color in design systems, from combining color formats to creating cohesive color palettes that enhance user experience.

What You'll Learn

• Hexadecimal color format and when to use hex codes
• RGB and RGBA functions for programmatic color manipulation
• HSL color values for design system scalability
• Modern color formats like OKLCH and Display P3
• CSS custom properties for maintainable color tokens
• Relative color syntax for generating variations
• Light and dark mode color scheme handling
• Color accessibility and WCAG contrast requirements
• Component-driven color implementation patterns

Hexadecimal Color Values

Hex codes are the workhorse of web colors. They use a # prefix followed by six hexadecimal digits representing red, green, and blue values.

Hex Code Structure

Each pair of digits controls one color channel in the 0-255 range, expressed as hexadecimal (00-FF). An optional seventh and eighth pair can specify alpha transparency.

When to Use Hex Codes

Hex codes work well when you have fixed color values from a design file. However, for dynamic color manipulation or generating color variations, RGB or HSL formats offer more flexibility.

For teams building comprehensive design systems, hex codes serve as primitive tokens while RGB or HSL power the semantic layer.

Pros: Compact, familiar, widely understood, great for fixed values Cons: Not human-readable, difficult to modify programmatically

RGB and RGBA Color Functions

The RGB color model forms the foundation of digital color. Modern CSS provides powerful ways to express and manipulate RGB values.

How RGB Works

RGB uses three 0-255 values for red, green, and blue channels. When all three are at maximum (255), you get white. When all are zero, you get black.

Change Text Color CSS with RGB

Setting text color with RGB is straightforward. The modern space-separated syntax works seamlessly with CSS custom properties. This approach is particularly valuable when building maintainable web applications where color consistency across components is critical.

/* Basic text color */
.text-primary { color: rgb(37 99 235); }

/* Using CSS variables for text color */
.text-heading { color: rgb(from var(--color-primary) r g b); }

/* Semi-transparent text */
.text-muted { color: rgb(15 23 42 / 0.7); }

HSL Color Values for Design Systems

HSL (Hue, Saturation, Lightness) is the preferred format for design systems because it maps more closely to how humans perceive and manipulate colors.

Understanding HSL Components

• Hue (0-360°): Position on the color wheel. Red is 0°, green is 120°, blue is 240°.
• Saturation (0-100%): Intensity or vividness of the color.
• Lightness (0-100%): How light or dark the color appears. 0% is black, 100% is white.

Why HSL Works for Design Systems

The power of HSL lies in its predictability. To create lighter shades, you simply increase lightness while keeping hue and saturation constant. This approach complements color psychology principles by allowing consistent emotional tone across variations.

:root {
 --color-primary: hsl(217 73% 50%);
 --color-primary-light: hsl(217 73% 60%);
 --color-primary-dark: hsl(217 73% 40%);
 --color-primary-surface: hsl(217 73% 97%);
}

This consistency makes HSL ideal for generating color scales programmatically.

CSS Custom Properties for Design System Colors

CSS custom properties (variables) are essential for maintaining consistent color values across components and enabling theme switching.

Organizing Color Tokens

A well-structured color system uses semantic tokens that describe what the color is used for, rather than what the color looks like. This abstraction layer allows design systems to remain flexible as brand colors evolve.

Modern CSS: Relative Colors

CSS relative color syntax is a game-changer for design systems. It allows you to create new colors based on existing ones, with full programmatic manipulation.

Generating Color Variations

With relative colors, you can derive hover states, focus states, and surface colors from a single source of truth. This approach reduces token bloat and ensures color harmony across interactive states.

Light and Dark Color Schemes

Modern CSS provides native support for automatic light and dark mode color handling through the color-scheme property and light-dark() function.

Declaring Supported Color Schemes

Color Accessibility in Design Systems

Building accessible color systems means ensuring sufficient contrast between text and backgrounds for all users. This consideration extends to color symbolism across cultures and user demographics.

WCAG Contrast Requirements

• AA Level: 4.5:1 for normal text, 3:1 for large text (18px+ or 14px bold)
• AAA Level: 7:1 for normal text, 4.5:1 for large text

CSS color-contrast() Function

Modern CSS includes a color-contrast() function that automatically selects an accessible text color from a list of background colors:

Accessibility Best Practices

1. Test early and often: Use browser DevTools accessibility audits
2. Define safe combinations: Document approved text/background pairs
3. Don't rely on color alone: Use icons, patterns, or labels alongside color
4. Consider color blindness: Test your palette with simulation tools
5. Build contrast into tokens: Start with accessible color values in your design system

Putting It All Together: Component Color Implementation

A complete example showing how to implement colors for a button component using all the concepts covered. For larger applications, consider partnering with professional web development services to establish robust color systems.