Creating a Practical Color System

[ByteB4rb1e]

As part of my HTML theming reference implementation, I've been exploring how to design and manage color schemes effectively - not just from a coding perspective, but also from a design and usability standpoint.

Core Principles for a Color System

A well-designed color system ensures consistency, scalability, and ease of maintenance while prioritizing accessibility. Here’s the approach I’ve adopted:

Core Palette: Start simple. Define a small, cohesive set of base colors:

Designing a Core Palette

A thoughtfully designed color palette is the foundation of a great user experience. Here's the process I’ve followed:

Defining Key Categories

• Primary: key colors for headers, buttons, and CTAs.
• Secondary: Complementary colors for variety and highlights.
• Neutral: Blacks, whites, and grays for text, backgrounds, and borders.
• Alert/State Colors: Success (green), warning (yellow), error (red), etc.
• Accent: Optional colors for emphasis.

Establish Visual Harmony

Use tools like Adobe Color, or Coolors to build harmonious relationships between colors (e.g., complementary, triadic). Inspiration is available on swatch/palette specific websites like Color Hunt, or at local cosmetic stores like Sephora.
Example palette:

• Primary: #3498db (Blue)
• Secondary: #2ecc71 (Green)
• Neutral: #f5f5f5 (Light Gray), #333333 (Dark Gray)
• Accent: #e67e22 (Orange)

Implementing Contrasting Foreground and Background Colors

Contrast is critical for accessibility and readability. Here’s how I’ve approached this:

Contrast Ratios

Following the W3 Web Content Accessibility Guidelines (WCAG), ensure a minimum contrast ratio of:

• 4.5:1 for body text.
• 3:1 for UI components like buttons.

Example:

• Background: #ffffff
• Dark Text: #333333

Dynamic Pairing

Create pairs of foreground and background variables that work together across light and dark modes.

Example:

• Primary Foreground: #3498db
• Primary Foreground: #ffffff
• Secondary Background: #2ecc71
• Secondary Foreground: #ffffff

$colors: (
    primary: #3498db,
    secondary: #2ecc71,
    neutral-light: #f5f5f5,
    neutral-dark: #333,
    success: #27ae60,
    warning: #f1c40f,
    error: #e74c3c
);

$foreground-colors: (
    primary: #ffffff,
    secondary: #ffffff,
    success: #ffffff,
    error: #ffffff
);

.btn-primary {
    background-color: map-get($colors, primary);
    color: map-get($foreground-colors, primary);
}

.btn-secondary {
    background-color: map-get($colors, secondary);
    color: map-get($foreground-colors, secondary);
}

Testing

Tools like WebAIM Contrast Checker ensure all text and UI elements meet accessibility standards.

Creating a maintainable system

Instead of mapping SCSS variables to functional roles, stick to maintaining clarity through well-structured and directly usable color definitions. Each variable directly represents its design intent, keeping things modular and avoiding over-complication.

Flat Variables for color definitions

Define colors in their raw form, grouped by their design purpose (primary, secondary, neutrals, states, etc.). This avoids abstraction and keeps the system predictable.

// Core Palette
$color-primary: #3498db;
$color-secondary: #2ecc71;
$color-neutral-light: #f5f5f5;
$color-neutral-dark: #333;
$color-success: #27ae60;
$color-warning: #f1c40f;
$color-error: #e74c3c;

// Foreground Colors (contrast pairs)
$color-primary-contrast: #ffffff;
$color-secondary-contrast: #ffffff;
$color-neutral-dark-contrast: #ffffff;

Explicit Use in Components

Use these variables directly in your styles, avoiding unnecessary indirection. For instance:

.btn-primary {
    background-color: $color-primary;
    color: $color-primary-contrast;
}

.btn-secondary {
    background-color: $color-secondary;
    color: $color-secondary-contrast;
}

This keeps the connection between design and implementation straightforward and transparent.

Theme Variations with maps (Optional for scaling)

If theming is needed, use SCSS maps to group colors by theme but reference them only at the root level to avoid spaghetti.

Example:

$light-theme: (
    background: #ffffff,
    text: #000000,
    primary: #3498db,
    primary-contrast: #ffffff
);

$dark-theme: (
    background: #000000,
    text: #ffffff,
    primary: #3498db,
    primary-contrast: #000000
);

// Applying a theme
body.light {
    background-color: map-get($light-theme, background);
    color: map-get($light-theme, text);
}

body.dark {
    background-color: map-get($dark-theme, background);
    color: map-get($dark-theme, text);
}

Conclusion

Why This Works:

• Avoids Over-Abstraction: Colors remain flat, readable, and directly tied to their design meaning.
• Clear Usage: No guessing what $btn-primary-bg maps to—it’s immediately visible in the component.
• Scalability: Using maps at the top level keeps themes modular without introducing excessive layers of indirection.
• Maintainability: Variables remain simple and don’t mutate into tangled relationships across the SCSS files.

I believe this revision strikes a better balance between practicality and maintainability without sacrificing clarity.

[ByteB4rb1e]

Kudos to designers—choosing colors is fun, but making them all work together in a cohesive system is no small feat. As I've been revising and refining my approach to creating a practical color system, I've found that while creating a palette is straightforward, structuring it into a usable and accessible (on-paper) system requires clear rules and a systematic approach.

Harmonization Is a Science (and a Little Art)

Designers often describe color harmonization as intuitive, but much of it is grounded in rules, particularly when focusing on usability and scalability. With the right tools and a structured mindset, you can streamline the process while leaving room for flexibility.

Key Takeaways for Building a Color System

Assign super clear Roles to Colors

Every color in the palette should have a clearly defined role. Like a very clearly defined role... If it just looks nice, I don't know what to apply it to.

Bootstrap, bootstrap, bootstrap... 🥾🥾🥾

By bootstrapping I'm not talking about using a framework and calling it a day. Putting everything nicely together in SCSS isn't a problem and does not cost a lot of time. Mastering the fundamentals of color theory however... That won't happen in a day, week, and probably not even in a month. So I'm not going to pretend as if I have intuition for that. It takes practice, learning and experience. A bootstrap, in this case, is (just) an opinionated crutch for defining a color system.

Start with Tools Like Google Material's Theme Builder. Palette generators are very nice and helpful tools, yet If you don't know how to apply the colors, you'll be spending hours on doing nothing but looking at colors and trying to figure out how to apply color theory...

Tools like Google Material Theme Build, or Realtime Colors can do much of the heavy lifting. You can input a single base color, and the tools will generate an extended, accessible palette with roles like "primary," "surface," and "on-primary" already assigned. This provides a great foundation that reduces guesswork while ensuring harmony and usability.

Stick to contrast ratios

Adhering to accessibility standards (like WCAG's 4.5:1 for text and background) is non-negotiable. Using tools such as WebAIM Contrast Checker, which I mentioned before, or Material Design's built-in contrast testing ensures your color system remains inclusive.

HSL-Based Harmonization

You can demystify “harmonization” by focusing on predictable HSL values:

• Hue: Use analogous or complementary relationships depending on your palette's goals.
• Saturation: Reserve high saturation for accents or CTAs; use muted tones for backgrounds.
• Lightness: Separate levels clearly for text, backgrounds, and accents.

Automate Contextual Roles

Tools like Material Design not only generate palettes but also assign roles for things like text on dark vs. light backgrounds, surfaces, and accents. This makes it easier to stay consistent across your components.

In the end

Creating an effective color system may feel overwhelming because rules in design are often flexible to accommodate creativity and branding. However, tools like Google Material’s Theme Builder provide a systematic approach to assigning roles and ensuring accessibility, making it much easier to bridge the gap between artistic intuition and engineering logic.

By treating colors like components with defined purposes—and leveraging tools to streamline the process—you can create a scalable, maintainable color system without the trial-and-error headache.