Defining predictable color

A complete model explaining how every color in the system is generated and applied.

Foundation

Color in Saturn is not chosen; it’s calculated.

Every token. whether background, text, icon, or border is derived from perceptual math, not subjective taste.

We base our logic on three sources:

  • OKHSL / OKLCH color space → perceptual uniformity

  • USWDS Magic Number model → luminance-based accessibility thresholds

  • Nate Baldwin’s Adaptive Color → theme inversion via lightness function

This allows us to:

  • Generate light/dark themes algorithmically

  • Maintain guaranteed WCAG AA contrast

  • Build semantics (success, error, etc.) from hue math, not guessing

2. Core Formula

We define every color by three equations:

Where:

  • n = normalized scale position (0 → 1, corresponding to grade 0–100)

  • H₀ = base hue (seed color)

  • ΔH ≈ ±5° = hue adjustment across brightness

Then, every color’s relative luminance Y is calculated:

Y = 0.2126R + 0.7152G + 0.0722B
Y = 0.2126R + 0.7152G + 0.0722B
Y = 0.2126R + 0.7152G + 0.0722B

Contrast between two colors follows WCAG’s ratio:

C = {L_1 + 0.05} / {L_2 + 0.05}
C = {L_1 + 0.05} / {L_2 + 0.05}
C = {L_1 + 0.05} / {L_2 + 0.05}
AA → C ≥ 4.5,  AAA → C ≥ 7.0
AA → C ≥ 4.5,  AAA → C ≥ 7.0
AA → C ≥ 4.5,  AAA → C ≥ 7.0

The Two Structural Categories

Background(Fill) → defines space, elevation, and states.

Foreground(Typography) → text, icon, border colors follow the same luminance function.

We model Fill and Typography as mathematical opposites:

If background lightness = L_bg, text lightness = L_fg = L_bg - ΔL, ensuring fixed contrast.

The Neutral Grey Backbone

Greys are generated using fixed luminance spacing from the USWDS system.

Grade

Lightness (L)

Contrast vs White

Hex (Light Theme)

Hex (Dark Theme)

0

1.00

—

#FFFFFF

#000000

10

0.93

1.1 : 1

#F5F6FA

#12141A

20

0.82

1.8 : 1

#E2E4EB

#1D2028

30

0.65

3.0 : 1

#C5C8D2

#2B2E38

40

0.45

4.5 : 1

#9DA2AF

#3B3F4A

50

0.30

7.0 : 1

#6A7080

#4C515D

60

0.18

9.0 : 1

#404553

#676D7A

70

0.10

11.0 : 1

#232630

#9AA0AD

80

0.05

13.0 : 1

#111319

#C5CAD4

90

0.02

15.0 : 1

#07080C

#E6E8ED

100

0.00

—

#000000

#FFFFFF

Reference: USWDS Magic Number table ensures predictable luminance gaps between every grade.

Disabled, inactive, and divider states are mapped mathematically:

State

Formula

Example (Light Bg = 0.95)

Contrast

WCAG

Disabled

L_bg - 0.20

0.75 → #C5C8D2

3 : 1

✅ Large Text

Inactive

L_bg - 0.40

0.55 → #9DA2AF

4.5 : 1

✅ AA

Divider

L_bg - 0.50

0.45 → #6A7080

7 : 1

✅ AAA

Semantic + Brand Colors

We use four primary hue anchors (H₀) and generate scales by the OKHSL formula.

Role

Seed

H₀ (°)

L₀.₅

S₀

Light Theme Mid

Dark Theme Mid

Success

#11AD32

135

0.5

0.9

#11AD32

#30D75B

Warning

#F14D4C

2

0.5

0.9

#F14D4C

#FF7B7A

Error

#EBAB00

46

0.5

0.9

#EBAB00

#FFD238

Neutral / Info

#4F86FF

225

0.5

0.9

#4F86FF

#7CA4FF

Brand / CTA

#0202D5

250

0.5

0.9

#0202D5

#3E47FF

Each color generates five tonal values using the same equations.

Example → Success

Grade

L

S

H

Light Theme

Dark Theme

Contrast vs Bg

WCAG

10

0.93

0.6

137°

#D9F7E0

#003611

1.1 : 1

—

30

0.70

0.8

136°

#56D26B

#017A29

3.3 : 1

—

50

0.50

0.9

135°

#11AD32

#30D75B

6.5 : 1

✅ AA

70

0.30

0.8

134°

#0B7123

#74F999

10.8 : 1

✅ AAA

90

0.15

0.7

133°

#042E0F

#A4FFC4

15.5 : 1

✅ AAA

This same math is used to compute Warning, Error, Info, and Brand scales.

Typography and Fill Relationships

We maintain mathematical pairing for contrast:

L_{fg} = L_{bg} - ΔL
L_{fg} = L_{bg} - ΔL
L_{fg} = L_{bg} - ΔL

Where ΔL is derived from target contrast ratio (using WCAG formula). For text over any background:

Target

ΔL Required

Contrast

Use

AA

0.40

4.5 : 1

Body text

AAA

0.55

7.0 : 1

Small / light text

Example — on background L_bg = 0.95 (White):

(1.0 + 0.05)/(0.55 + 0.05) = 4.5 → L_fg = 0.55
(1.0 + 0.05)/(0.55 + 0.05) = 4.5 → L_fg = 0.55
(1.0 + 0.05)/(0.55 + 0.05) = 4.5 → L_fg = 0.55

→ Typography should have L ≤ 0.55 (roughly #70798B).

For dark backgrounds L_bg = 0.1:

(0.55 + 0.05)/(0.1 + 0.05) = 4.0 → L_fg = 0.55
(0.55 + 0.05)/(0.1 + 0.05) = 4.0 → L_fg = 0.55
(0.55 + 0.05)/(0.1 + 0.05) = 4.0 → L_fg = 0.55

→ Use light text (≈ #E6E8ED).

Thus, text, icon, and border colors invert automatically via the lightness function.

Theme Inversion Logic

Dark theme colors are derived mathematically, not by manual adjustment.

Saturation slightly increases (≈ +0.1) to retain vibrancy at lower lightness.
Example:
Color
Light (L=0.50)
Dark (L=1−0.50)
ΔS
Result
Brand Blue
#0202D5
#3E47FF
+0.1
visual parity preserved
Success
#11AD32
#30D75B
+0.1
maintains vividness
This ensures perceptual equivalence across modes
To conclude
  • Every color in Saturn is derived from OKHSL equations, not eyeballed.
  • Contrast is mathematically guaranteed for both light and dark themes.
  • Foreground colors (text, icons, borders) follow the same luminance delta rules.
  • Designers can replicate the entire palette by running the same formulas on new hues.
This makes color in Saturn predictable, scalable, and scientifically correct, rooted in measurable light and perception, not preference.
Defining DLS that scales on any system ›