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