Color Pipeline

Each preset color (primary, accent, neutral) is a single hex value that passes through a generation pipeline to produce an 11-level shade scale.

Summary

The pipeline converts a hex color to HSL, then interpolates lightness and adjusts saturation to produce 11 shades (50 through 950). Each shade is converted back to hex and written as a CSS custom property.

The base color sits at the 600 level.

How It Works

Step 1: Hex to HSL

The input hex color (e.g., #ea580c) is parsed into RGB channels, then converted to HSL (hue, saturation, lightness) using standard color math.

#ea580c → RGB(234, 88, 12) → HSL(20.5°, 90.2%, 48.2%)

Step 2: Generate Shade Scale

Each shade level has a predefined lightness position and saturation factor:

Lightness calculation:

• Positive position: targetLightness = baseLightness + (position × (100 − baseLightness))
• Negative position: targetLightness = baseLightness × (1 + position)

Saturation calculation:

• adjustedSaturation = baseSaturation × saturationFactor

Step 3: HSL to Hex

Each computed HSL value is converted back to RGB, then to a hex string. The result is a set of 11 hex colors that form a perceptually smooth gradient from near-white to near-black.

Output

For the Foundry primary color #ea580c:

The same pipeline runs for accent and neutral, producing 33 CSS custom properties total (11 per color channel).

Using Color Tokens

Reference the generated tokens in your CSS:

.my-element {
  color: var(--nova-color-primary-600);
  background-color: var(--nova-color-neutral-50);
  border-color: var(--nova-color-accent-200);
}

Lighter shades (50–400) work well for backgrounds and borders. The base shade (600) is the brand color.

Darker shades (700–950) work well for text and emphasis.