How to Define Array Colors in CSS

What Are CSS Custom Properties?

CSS custom properties (also known as CSS variables) are entities defined by CSS authors that represent specific values to be reused throughout a document. They are set using custom property syntax and accessed using the CSS var() function.

Custom properties are subject to the cascade and inherit their value from their parent, making them ideal for defining color arrays that can be customized at different scoping levels. This native CSS feature eliminates the need for preprocessor variables when you need runtime flexibility, allowing you to create design systems that adapt to user preferences and different contexts.

Unlike preprocessor variables that compile away, CSS custom properties remain in the browser, enabling dynamic updates through JavaScript and responsive changes based on media queries.

Defining Color Palettes with :root

For global color arrays that apply throughout your application, define custom properties on the :root pseudo-class. This ensures the colors are available across all elements in your document.

Semantic Color Naming

Rather than naming colors by their appearance (like --blue-500), consider semantic naming that describes their purpose (like --primary, --secondary, --success). This approach makes your color system more maintainable as you can change the underlying color values without updating every reference throughout your codebase. When working on responsive design projects, this flexibility becomes invaluable for maintaining consistent branding across different contexts.

Organizing Color Groups

Group related colors into logical categories: brand colors, semantic status colors, and neutral colors. This organization makes it easier to find and update colors as your design evolves and helps team members understand the color system quickly.

Following consistent UX writing principles for naming makes your CSS more intuitive for developers and designers alike.

Using @property for Type-Safe Color Variables

The @property at-rule allows more control over custom properties by defining type, inheritance, and initial value. This is particularly useful for color arrays where you want to enforce type consistency and improve the developer experience.

Syntax for @property

When defining a color property with @property, specify the syntax as <color>, set whether it inherits, and provide an initial value. This creates a property that browser tools and frameworks can recognize as a color value, enabling better autocomplete in code editors and clearer debugging information in developer tools.

Benefits for Color Arrays

Using @property with color arrays provides better developer experience through autocomplete in code editors, validation in CSS preprocessing tools, and clearer debugging information in browser developer tools. This type safety helps catch errors early in development.

Dynamic Color Mixing with color-mix()

The CSS color-mix() function lets you mix colors in any supported color space directly from your CSS. This eliminates the need for preprocessor functions or JavaScript for creating color variations. According to Chrome for Developers documentation, this function is supported in Chrome 111+, Firefox 113+, and Safari 16.2+.

Basic color-mix() Syntax

The color-mix() function takes a color space, two colors to mix, and optional percentages to control the mix ratio. The percentage indicates how much of each color to include in the mix.

Color Spaces for Mixing

Different color spaces produce different mixing results:

• oklab/oklch: Perceptually uniform, best for natural-looking mixes
• srgb: Good compatibility, predictable results
• hsl: Produces vibrant results for certain color combinations

Creating Tints and Shades

Use color-mix() to create tints by mixing with white and shades by mixing with black. This approach ensures all variations maintain the same hue while varying in lightness, creating harmonious color scales for your design system.

Building Theme Systems with CSS Color Arrays

CSS custom properties excel at implementing theme systems that can switch between light and dark modes or custom color themes. This capability is essential for modern web applications that need to respect user preferences.

Theme Variable Structure

Structure your color array to support theme switching by having semantic variable names that point to different base colors for each theme. This allows complete theme changes by updating just a few root-level custom properties, reducing maintenance overhead.

Dark Mode Implementation

For dark mode, define a complementary set of colors that follow the same semantic structure as your light theme. Elements reference the same custom property names but the underlying values change based on the color scheme preference. Implementing proper accessibility standards ensures your theme system remains usable for all users.

JavaScript Integration with Color Variables

CSS custom properties can be read and modified through JavaScript, enabling dynamic color changes based on user interaction or system preferences. As documented by MDN Web Docs, this runtime modification capability is one of the key advantages of CSS variables over preprocessor variables.

Reading Color Values

Use getComputedStyle() to read the current value of a custom property, accounting for any cascading or inherited values. This is useful for analytics, synchronization with non-CSS systems, or implementing color pickers.

Updating Colors Dynamically

Modify custom properties through the style property of elements. Changes to custom properties on the :root element propagate throughout the document, making it efficient to update entire color themes instantly.

Fallback Values and Invalid Values

CSS custom properties support fallback values for when a variable is undefined or contains an invalid value. This capability is essential for creating robust color systems that gracefully handle missing or misconfigured variables.

Fallback Syntax

The var() function accepts a second parameter that serves as a fallback when the referenced variable is not defined. You can chain multiple fallbacks for progressive enhancement scenarios.

Invalid Values

When a custom property contains an invalid value for its context, the property acts as if it were not declared. Understanding this behavior helps prevent unexpected styling issues and ensures your color system remains predictable even when variables contain unexpected values.

Best Practices for Color Arrays

Single Source of Truth

Keep all color definitions in a centralized location, typically a dedicated CSS file that imports into your main stylesheet. This approach makes it easy to audit colors, ensure consistency, and make global changes across your application.

Documentation and Comments

Document the purpose of each color, including when it should be used and any accessibility considerations. This documentation helps team members maintain consistency as the project evolves and serves as a reference for future updates.

Accessibility Considerations

Ensure sufficient contrast between foreground and background colors. Include both primary and emphasis versions of each color to support different interaction states while maintaining accessibility compliance with WCAG guidelines. Following design principles helps create color systems that work for all users.

Naming Conventions

Establish and follow consistent naming conventions across your color array. Use a consistent pattern for scales, variants, and semantic meanings throughout your project.

Sources

1. MDN Web Docs - Using CSS Custom Properties - Official documentation on CSS custom properties, covering declaration syntax, inheritance, and JavaScript integration

2. Chrome for Developers - CSS color-mix() - Official Chrome documentation on the color-mix() function, syntax, color spaces, and browser support