What are Flow Colors?
Flow Colors are derived from Core Colors to represent states, transitions, and overlays. They use OKLAB (Cartesian coordinates) for perceptually uniform mixing.┌─────────────────────────────────────────────────────────────────────────────────┐
│ CORE vs FLOW │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ CORE (OKLCH Polar) FLOW (OKLAB Cartesian) │
│ ================== ======================== │
│ │
│ "What IS this?" "How does it BEHAVE?" │
│ │
│ Identity colors: State colors: │
│ * Primary (blue) * Hover (lighter) │
│ * Success (green) * Active (darker) │
│ * Danger (red) * Disabled (grayed) │
│ * Warning (yellow) * Muted (transparent) │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Why OKLAB for Mixing?
When colors blend together, the path they take through color space matters. OKLAB provides a perceptually straight path.┌─────────────────────────────────────────────────────────────────────────────────┐
│ sRGB vs OKLAB INTERPOLATION │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ sRGB Path (Blue to Yellow): │
│ ============================ │
│ │
│ Blue ────-> Muddy Brown ────-> Yellow │
│ (desaturated) │
│ │
│ Problem: Non-linear RGB causes desaturation in middle │
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ #### .... .... .... #### │ │
│ │ BLUE gray mud gray YELLOW │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ OKLAB Path (Blue to Yellow): │
│ ============================= │
│ │
│ Blue ────-> Vibrant Purple ────-> Yellow │
│ (saturated) │
│ │
│ Solution: Perceptually uniform space maintains saturation │
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ #### #### #### #### #### │ │
│ │ BLUE violet purple orange YELLOW │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ "When colors flow from Core to Core, OKLAB prevents muddy transitions" │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
OKLAB Coordinate System
OKLAB uses Cartesian coordinates (L, a, b) - like a 3D box rather than a cylinder.┌─────────────────────────────────────────────────────────────────────────────────┐
│ OKLAB CARTESIAN SPACE │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ +Y (Yellow) │
│ │ │
│ │ │
│ ┌────────────┼────────────┐ │
│ /│ │ │\ │
│ / │ │ │ \ │
│ -X (Green) │ │ │ +X (Red) │
│ \ │ L (Lightness) │ / │
│ \│ 0=black, 1=white │/ │
│ └────────────┼────────────┘ │
│ │ │
│ │ │
│ -Y (Blue) │
│ │
│ Component Range Meaning │
│ ───────── ───── ─────── │
│ L 0-1 Lightness (0=black, 1=white) │
│ a -0.4 to 0.4 Green-Red axis │
│ b -0.4 to 0.4 Blue-Yellow axis │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Flow Patterns
Pattern 1: Transparency
For backgrounds and overlays - create subtle tinted areas.┌─────────────────────────────────────────────────────────────────────────────────┐
│ TRANSPARENCY FLOW │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Core Color (100%) │
│ ###################### │
│ Full vibrant blue │
│ │
│ │ mix with transparent 80% │
│ v │
│ │
│ Muted Background (20% visible) │
│ ....##................ │
│ Subtle blue tint │
│ │
│ Use: Badge backgrounds, selection highlights, status areas │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Pattern 2: Hover States
For interactive element hover - lighten while preserving identity.┌─────────────────────────────────────────────────────────────────────────────────┐
│ HOVER LIGHTENING │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ DEFAULT HOVER │
│ ################ --> ....############.... │
│ Base color +15% white added │
│ │
│ Note: Uses OKLCH (polar) to preserve hue while adjusting lightness │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Pattern 3: Active/Pressed States
For active/pressed interactions - darken to show engagement.┌─────────────────────────────────────────────────────────────────────────────────┐
│ ACTIVE DARKENING │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ DEFAULT ACTIVE │
│ ################ --> ################## │
│ Base color +20% black added │
│ │
│ Creates a "pressed in" visual feedback │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Pattern 4: Disabled States
For disabled elements - reduce color intensity.┌─────────────────────────────────────────────────────────────────────────────────┐
│ DISABLED DESATURATION │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ENABLED DISABLED │
│ ################ --> ................ │
│ Full saturation +60% gray mixed │
│ │
│ Retains color hint but clearly signals non-interactivity │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Complete Flow Pattern Reference
┌─────────────────────────────────────────────────────────────────────────────────┐
│ COMPLETE FLOW PATTERN REFERENCE │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ STATE MODIFIER SPACE VISUAL │
│ ──────────────── ──────────────── ───── ─────────────────────── │
│ │
│ Muted Background transparent 80% OKLAB ....##................ │
│ Hover white 15% OKLCH ....############.... │
│ Active/Pressed black 20% OKLAB ################## │
│ Disabled gray 60% OKLAB ................ │
│ Focus ring transparent 50% OKLAB ..........##.......... │
│ Border transparent 70% OKLAB ......####...... │
│ │
│ RULE OF THUMB: │
│ * Transparency/Darkening -> OKLAB (cartesian) │
│ * Hue-preserving lightness -> OKLCH (polar) │
│ * Core-to-Core interpolation -> OKLAB (no muddy colors) │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
When to Use Each Color Space
┌─────────────────────────────────────────────────────────────────────────────────┐
│ OKLAB vs OKLCH SELECTION GUIDE │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ OKLAB OKLCH │
│ ===== ===== │
│ │
│ Best for: Blending operations Lightness adjustments │
│ Transparency Hover states │
│ Darkening Hue preservation │
│ Desaturation │
│ │
│ Think: "Mixing two things" "Adjusting one thing" │
│ │
│ Examples: Muted backgrounds Hover lightening │
│ Gradients Color scales │
│ Active states │
│ Disabled states │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
State Transitions
Learn how hover, active, and disabled states are derived