Interactive State Color Theory
UI elements exist in discrete states, each requiring distinct visual feedback. Flow Colors provide a systematic way to derive these states from Core Colors.Copy
┌──────────────────────────────────────────────────────────────────────────────────┐
│ INTERACTIVE STATE MACHINE │
├──────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────┐ mouse enter ┌─────────┐ mouse down ┌──────────┐ │
│ │ DEFAULT │ ─────────────────-> │ HOVER │ ─────────────────>│ ACTIVE │ │
│ │ STATE │ <───────────────── │ STATE │ <─────────────────│ STATE │ │
│ └─────────┘ mouse leave └─────────┘ mouse up └──────────┘ │
│ │ │ │ │
│ │ │ │ │
│ │ click │ │ │
│ │ ┌──────────────────────┴──────────────────────────────┘ │
│ │ │ │
│ │ v │
│ │ ┌─────────┐ │
│ │ │ SELECTED│ (toggle state) │
│ │ │ STATE │ │
│ │ └─────────┘ │
│ │ │ │
│ │ │ (can still have hover/active when selected) │
│ │ │ │
│ │ v │
│ │ ┌─────────────┐ │
│ └──>│ DISABLED │ (blocks all other states) │
│ │ STATE │ │
│ └─────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────────────┘
Color Intensity Progression
Each state modifies the base color in a predictable way.Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ STATE COLOR INTENSITY PROGRESSION │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Default ────-> Hover ────-> Active ────-> Selected ────-> Disabled │
│ │ │ │ │ │ │
│ v v v v v │
│ ######## ..######.. ########## ++++#### ........ │
│ Base +15% white +20% black +20% tint 60% gray │
│ 100% Lighter Darker Tinted Desaturated │
│ │
│ STATE MODIFIER COLOR SPACE AMOUNT │
│ ───── ──────── ─────────── ────── │
│ Default None OKLCH 100% │
│ Hover + white OKLCH 15% (10% for warning) │
│ Active + black OKLAB 20% │
│ Disabled + gray OKLAB 60% │
│ Muted + transparent OKLAB 80% │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Hover State: Lightening
Hover states use OKLCH to preserve hue while increasing lightness.Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ HOVER STATE COLOR DERIVATION │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ WHY OKLCH FOR HOVER? │
│ ==================== │
│ │
│ 1. HUE PRESERVATION: OKLCH mixing with white preserves hue angle │
│ 2. PREDICTABLE LIGHTENING: L value increases proportionally │
│ 3. NO CHROMA SHIFT: Maintains saturation while lightening │
│ │
│ VISUAL EXAMPLE: │
│ │
│ DEFAULT (55% Lightness) HOVER (~63% Lightness) │
│ ######################## ....################.... │
│ Stable color Lightened, hue intact │
│ │
│ The blue stays blue - just brighter! │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Warning Exception
Warning uses 10% instead of 15% white.Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ WARNING HOVER EXCEPTION │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Normal Colors: DEFAULT +15% white -> HOVER │
│ Warning Color: DEFAULT +10% white -> HOVER │
│ │
│ Why? Warning already has higher lightness (65% vs 55%) │
│ Adding 15% white would wash it out │
│ │
│ Primary (55% L): ######## --> ..######.. (15% works) │
│ Warning (65% L): ######## --> ..######.. (10% needed) │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Active State: Darkening
Active states (mouse down, pressed) use OKLAB for perceptually uniform darkening.Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ ACTIVE STATE DERIVATION │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ WHY OKLAB FOR ACTIVE? │
│ ===================== │
│ │
│ 1. PERCEPTUAL DARKENING: OKLAB provides uniform perceived darkness │
│ 2. NO HUE ROTATION: Mixing with black in OKLAB preserves hue better │
│ 3. PREDICTABLE CONTRAST: Linear relationship with added darkness │
│ │
│ STATE PROGRESSION: │
│ │
│ HOVER DEFAULT ACTIVE │
│ ....####.... ############ ################ │
│ (lighter) (base) (darker) │
│ ~63% L 55% L ~44% L │
│ │
│ ^ +15% white baseline v +20% black │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Disabled State: Desaturation
Disabled states communicate non-interactivity through reduced chroma.Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ DISABLED STATE DERIVATION │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ WHY OKLAB WITH GRAY? │
│ ==================== │
│ │
│ 1. PERCEPTUAL DESATURATION: Mixing with gray reduces chroma uniformly │
│ 2. HUE HINT PRESERVED: Original color is still slightly visible │
│ 3. UNIVERSAL SIGNAL: Gray = inactive in UI convention │
│ │
│ EXAMPLE: │
│ │
│ ENABLED DISABLED │
│ ######################## ........................ │
│ 100% chroma 40% chroma (60% gray) │
│ Full saturation Desaturated │
│ Interactive Non-interactive │
│ │
│ cursor: pointer cursor: not-allowed │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Theme-Specific State Inversions
Light and dark themes handle hover differently!Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ THEME-SPECIFIC STATE COLORS │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ DARK THEME: │
│ =========== │
│ │
│ DEFAULT HOVER │
│ ############ ..############.. │
│ Base LIGHTER (more visible) │
│ │
│ LIGHT THEME: │
│ ============ │
│ │
│ DEFAULT HOVER │
│ ############ ##############.. │
│ Base DARKER (more contrast) │
│ │
│ WHY THE INVERSION? │
│ ================== │
│ │
│ Dark theme: lighter = more visible = better feedback │
│ Light theme: darker = more contrast = better feedback │
│ │
│ The goal is always "MORE VISIBLE ON HOVER" │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Color Space Selection Rules
Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ STATE COLOR SPACE SELECTION RULES │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ USE OKLCH FOR: │
│ =============== │
│ │
│ * Hover states with white (hue preservation) │
│ * Any adjustment where HUE must be preserved exactly │
│ * Lightness adjustments on identity colors │
│ │
│ ┌───────────────────────────┐ │
│ │ Hover = OKLCH │ │
│ │ "Keep the color identity" │ │
│ └───────────────────────────┘ │
│ │
│ USE OKLAB FOR: │
│ =============== │
│ │
│ * Active states with black (uniform darkening) │
│ * Disabled states with gray (uniform desaturation) │
│ * Transparency mixing │
│ * Any blending operation between two colors │
│ │
│ ┌───────────────────────────┐ │
│ │ Everything else = OKLAB │ │
│ │ "Blend smoothly" │ │
│ └───────────────────────────┘ │
│ │
│ MNEMONIC: "OKLCH for Identity, OKLAB for Blending" │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Summary: State Pattern Reference
Copy
┌─────────────────────────────────────────────────────────────────────────────────┐
│ STATE TRANSITION SUMMARY │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ STATE MODIFIER SPACE AMOUNT VISUAL │
│ ─────── ──────── ───── ────── ────────────────────── │
│ Default None OKLCH 100% ################ │
│ Hover + white OKLCH 15%* ....############.... │
│ Active + black OKLAB 20% ################## │
│ Disabled + gray OKLAB 60% ................ │
│ Muted + transparent OKLAB 80% ....####............ │
│ │
│ * Warning uses 10% white (already light) │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Muted Variants
Learn about muted background colors and semantic backgrounds