Scalable Color System for Light and Dark Mode
Building a color palette for a single interface is relatively easy.
Building a color system that remains consistent across multiple products, semantic roles, interaction states, and Light and Dark Mode is significantly more difficult.
A color that works perfectly on a white background may appear too bright, too saturated, or even neon on a dark background. Two colors assigned to the same numerical level may not carry the same visual weight. A seemingly logical palette may also become difficult to maintain when the product adds more themes, status colors, or brand variations.
This article explores how to build a more scalable color system by looking at:
- The color models available in Figma
- The differences between HSL and HSB
- The limitations of RGB-based color models
- Why perceptual color spaces such as OKLCH are useful
- How WCAG and APCA evaluate contrast
- How Harmonizer can generate contrast-aware palettes
HSL consists of three values:
- H = Hue
- S = Saturation
- L = Lightness
Hue defines the color family. Saturation defines how colorful or neutral the color appears. Lightness places the color between black and white.
This produces a structured and reproducible scale.
However, equal numerical steps do not guarantee equal visual steps. A 10% Lightness change in one region of the palette may appear much larger than the same 10% change elsewhere.
In HSL, increasing Lightness eventually moves the color toward white. In HSB, increasing Brightness moves the color toward its maximum intensity.
This makes HSB especially useful for selecting and manually correcting a base color.
Ant Design, for example, publicly states that its design team prefers HSB because designers can form clearer expectations when adjusting colors and can communicate those adjustments more easily within the team.
How to switch light to dark mode?
Neutral colors primarily establish hierarchy through lightness. Therefore, reversing their direction of use often works reasonably well.
Chromatic colors such as brand blue, success green, warning yellow, and error red require more careful treatment.
A simple inverse may become:
- Too bright
- Too dark
- Too saturated
- Neon-looking on dark surfaces
- Inconsistent with the intended visual hierarchy
- Different from the established brand impression
The correct Dark Mode level does not depend only on the color family. It also depends on how the color is used.
HSL and HSB are still useful models, especially for manual color selection and quick variations.
Get Design Sharing Corner’s stories in your inbox
Join Medium for free to get updates from this writer.
However, both have a common limitation They are not perceptually uniform.
Both models are transformations of RGB. Their numerical values do not fully account for how the human visual system perceives brightness and color intensity.
This creates several practical problems:
- Uneven brightness across hues
- Inconsistent steps in a color scale
- More manual correction for every color family
- Difficulty automating palette generation
- Less predictable behavior between Light and Dark Mode
===>>> What's solution?
A scalable system should not depend on designers selecting every color independently.
A better workflow relies on:
- A repeatable palette-generation method
- Contrast calculated against the actual background
- Semantic mapping based on usage
- Validation on real interface components
Material Theme Builder is one example of algorithmic color generation.
Material Design 3 uses HCT:
OKLCH is the cylindrical representation of Oklab, a perceptual color space introduced by Björn Ottosson in December 2020.
Oklab was designed for modern digital color operations, including:
- Predicting perceived lightness
- Adjusting colorfulness while preserving hue and lightness
- Creating smoother gradients
- Producing more predictable color transformations
The model was informed by perceptual color-appearance data, including CAM16 data for lightness and chroma and IPT data for hue behavior.
The key advantage of OKLCH is not that the syntax looks better than HSL.
The advantage is that adjustments are generally more visually predictable.
OKLCH is no longer only an experimental color model.
The oklch() color function has been widely supported across modern browsers since May 2023 and can be used directly in CSS. A major production example is Tailwind CSS v4.
Tailwind CSS is a utility-first CSS framework. It provides reusable styling utilities that developers compose to implement a custom interface.
A color palette only becomes truly useful when we understand how its colors work together. Therefore, before defining color levels, we need to establish appropriate contrast between text, icons, surfaces, and backgrounds. WCAG is the current accessibility standard used to validate compliance through defined contrast-ratio thresholds. APCA is a newer approach that focuses on perceptual readability, considering factors such as font size, font weight, and the difference between dark text on a light background and light text on a dark background. In practice, APCA can guide contrast hierarchy during palette design, while WCAG should still be used to validate accessibility before release.
Harmonizer is a palette-generation tool that combines OKLCH with APCA to create more consistent color levels for Light and Dark Mode. Instead of manually selecting a Lightness value and repeatedly checking its contrast, designers can define the actual Light and Dark backgrounds, choose target contrast levels, and let Harmonizer calculate the appropriate color values.
