Color Properties

To manipulate color programmatically, designers dissect light into three independent coordinate dimensions:

1. Hue: The pure chromatic identity of the color, measured as an angle from 0° to 360° on the color circle (e.g., 0° Red, 120° Green, 240° Blue).
2. Saturation: The purity or chromatic intensity of the hue (0% represents completely desaturated grayscale; 100% represents electric, pure pigment).
3. Brightness / Lightness: The perceived luminance (0% is absolute pitch black; 100% is maximum light reflection).

Mastering HSB/HSL allows designers to adjust brightness without distorting underlying chromatic identity.

In traditional fine art and modern digital token systems:

• Tint: Adding pure White to a base hue. Lightens the value while reducing saturation. Essential for constructing subtle hover states, input fill backgrounds, and tag containers.
• Shade: Adding pure Black to a base hue. Darkens the value. Used for active pressed button states and high-contrast borders.
• Tone: Adding Gray (simultaneously reducing saturation). Softens colors, eliminating harsh glare in complex interface components.

A robust design system generates a 10-step scale (50 through 900) for every brand color using consistent tint and shade curves.

A major historical flaw of the sRGB and HSL color models is that they are not perceptually uniform.

In HSL, pure blue at 50% lightness appears dramatically darker to human eyes than pure yellow at 50% lightness because human biology is far more sensitive to green and yellow wavelengths.

The OKLCH Advantage

The modern OKLCH color model maps color according to human visual perception:

• L (Lightness): Predicts perceived brightness accurately across all hues.
• C (Chroma): Purity of color.
• H (Hue): Color angle.

In OKLCH, a Lightness value of 0.70 delivers identical perceived contrast regardless of whether the hue is yellow, blue, or violet, making it the premier choice for algorithmic light/dark theme generators.

Scalable design systems never hardcode hex values directly into components. They structure color into a two-tiered token architecture:

1. Primitive (Global) Tokens

Raw color palette definitions referencing specific values:

• blue-500: #3B82F6
• gray-100: #F3F4F6
• red-600: #DC2626

2. Semantic (Contextual) Tokens

Intent-based aliases that bind to primitives depending on application context and theme:

• surface-primary: references gray-50 in light mode and gray-900 in dark mode.
• action-primary-hover: references blue-600.
• feedback-error-text: references red-600.

Semantic tokens allow an entire product to re-theme or toggle dark mode instantly without touching component markup.

Creating a professional dark mode is not a naive mathematical inversion of light colors:

• Avoid Pure Black (#000000) for Canvas: On high-contrast displays, pure white text on pitch black causes harsh halation (glow) and eye fatigue. Professional interfaces use deep charcoals (e.g., #121212 or #0F172A).
• Communicate Elevation with Surface Lightness: In light mode, elevated cards cast dark drop shadows. In dark mode, shadows are invisible against dark canvas; therefore, elevation is communicated by lightening the card background (e.g., surface 0 is #121212, surface 1 card is #1E1E1E, surface 2 modal is #2C2C2C).
• Desaturate Saturated Accents: Saturated colors that look vibrant on white screens vibrate violently against dark backgrounds. Dark mode tokens must be desaturated by 10–20%.

Approximately 8% of men and 0.5% of women worldwide experience Color Vision Deficiency (CVD):

• Protanopia & Deuteranopia (Red-Green Deficiencies): The most common forms; users cannot differentiate between red and green.
• Tritanopia (Blue-Yellow Deficiency): Rarest form; difficulty distinguishing blue from green and yellow from violet.
• Achromatopsia: Complete color blindness; seeing entirely in grayscale.

The Multi-Signal Mandate (WCAG 1.4.1)

Never use color as the sole visual signifier of status or interactivity:

• Success messages must include a checkmark icon and text confirmation alongside green styling.
• Error alerts must include an alert icon and descriptive copy alongside red outlines.