Dynamic Color Manipulation

Maple treats colors as parameters rather than static values, using the OKLCH color space to enable runtime adjustments.

In most styling systems, colors are static. If you want lighter, darker, muted, or emphasized variants, you predefine them ahead of time. (blue-100, blue-200, blue-300 ...).

In Maple, color utilities resolve through CSS variables in the OKLCH color space, making lightness, chroma, hue, and alpha adjustable at runtime. A single semantic color can express an entire range of shades—without defining them upfront.

<div class="bgc-primary-320/70 c-white/80"></div>

90,000 Combinations per Color

Color adjustments are derived relative to the base color using color-scale/alpha syntax. Because the scale maps to OKLCH lightness mathematics rather than a static dictionary, you are not limited to 10 or 20 predefined steps. You instantly have access to 90,000 (900 scale steps × 100 alpha steps) combinations of a single color.


<div class="c-primary-600"></div>
<div class="c-primary/50"></div>
<div class="c-primary-600/70"></div>
<div class="c-primary-732/54"></div>

Named Colors

CSS ships with a built-in palette of 140+ named colors (like coral, teal, slateblue). Traditionally, these have been treated as legacy values—flat, inconsistent, and unsuitable for modern design systems.

In Maple, named colors flow through the exact same OKLCH pipeline as your semantic tokens. As a result, every legacy named color automatically gains lightness scaling, chroma adjustment, hue rotation, and alpha control.


<div class="c-coral-600"></div>
<div class="bg-teal/70"></div>
<div class="c-slateblue-500/20"></div>

In this way, the browser's native named colors turn into a zero-configuration color system with thousands of immediately usable variants.

Try the Color Playground

Jump into the interactive Native Palette to see how the named colors and their variants behave.

Context-aware Theming

Because all color adjustments are driven by the variable cascade, colors respond naturally to their DOM context.


<section class="--primary=teal">
  <button class="bgc-primary c-white">Button</button>
</section>

<section class="--primary=purple">
  <button class="bgc-primary c-white">Button</button>
</section>

The exact same markup produces completely different results based on where it lives—without conditional classes, CSS duplication, or rebuilds.

Per-component Color Behavior

Components can also tune color behavior locally by intercepting the OKLCH modifier variables.


<!-- Change lightness in dark mode via --l-scale:
     Backgrounds will be darker, colors will be lighter -->
<div class="@dark:--bgc-l-scale=0.2 @dark:--c-l-scale=100">
  <div class="bgc-primary-200 c-primary-800">Button</div>
</div>

This allows components to soften, intensify, or shift colors relative to their surroundings—something static color systems cannot mathematically express.

Effortless Dark Mode

The standard approach to CSS theming requires you to define every color twice. You build a complete light theme palette in your :root, and then you need to manually map out and maintain a secondary dark theme palette inside a .dark class or @media (prefers-color-scheme: dark) block.

With Maple, you don't need a secondary palette at all. Because every color is evaluated relative to its OKLCH baseline, you can invert your entire theme with a single mathematical shift.

For example, the documentation website you are currently reading implements full dark mode simply by dropping this onto the root document:

<html class="@dark:--l-shift=-0.7">

By shifting the global lightness variable down by -0.7, the entire color system recalculates itself instantly. Every background, border, and text utility on the page adapts accordingly. Check Dark Mode guide to read more about this approach.

Deep Dive: The Color System

We've only scratched the surface of how Maple handles colors. To see exactly how the fallback chain works, or how to manipulate lightness, chroma, and hue on the fly, dive into the full Color System guide.