Skip to main content

​
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