Skip to main content

​
What is Transparency Flow?

Transparency Flow is the process of deriving semi-transparent versions of Core Colors using the color-mix() function with the transparent keyword. Unlike traditional rgba() or opacity property approaches, Transparency Flow:
  1. Maintains perceptual color accuracy through OKLAB color space
  2. Derives from CSS variables (dynamic, themeable)
  3. Creates consistent visual hierarchy across UI elements
┌──────────────────────────────────────────────────────────────────────────────┐
│  TRANSPARENCY FLOW ARCHITECTURE                                              │
├──────────────────────────────────────────────────────────────────────────────┤
│                                                                              │
│  CORE COLOR (100% Opacity)                                                   │
│  ═════════════════════════                                                   │
│  --oklch-primary: oklch(55% 0.15 230);                                       │
│          │                                                                   │
│          │  color-mix(in oklab, CORE, transparent N%)                        │
│          │                                                                   │
│          └──────────────────────────────────────────────────────────────     │
│          │                                                                   │
│          ▼                                                                   │
│  ┌────────────────────────────────────────────────────────────────────────┐  │
│  │                      TRANSPARENCY SPECTRUM                             │  │
│  │                                                                        │  │
│  │  100%    80%     60%     40%     20%     10%     5%      0%            │  │
│  │  ####    ####    ..##    ...#    ....    ....    ....    ....          │  │
│  │                                                                        │  │
│  │  solid   subtle  medium  light   very    almost  trace   fully         │  │
│  │  color   tint    fill    wash    light   gone    hint    transparent   │  │
│  │                                                                        │  │
│  │  Badge   Status  Hover   Select  Subtle  Focus   Glow    None          │  │
│  │  Label   BG      State   BG      Tint    Ring    Effect                │  │
│  └────────────────────────────────────────────────────────────────────────┘  │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

​
The transparent Keyword in CSS

The transparent keyword in CSS represents rgba(0, 0, 0, 0) - a fully transparent color with no RGB component. When used in color-mix(): 
/* Mixing with transparent reduces opacity while preserving hue */
color-mix(in oklab, var(--color), transparent 80%)

/* This creates a color with:
   - Same hue as --color
   - Same saturation as --color
   - 20% of original opacity (100% - 80% = 20%)
*/

​
Why OKLAB for Transparency?

OKLAB is chosen because:
  1. Perceptual accuracy: The perceived opacity matches the specified percentage
  2. Color fidelity: The underlying hue is preserved during transparency
  3. No color shift: Unlike sRGB mixing, OKLAB does not shift toward gray

​
Light Overlay System

Light overlays create subtle highlights on dark backgrounds. They add visual feedback without overwhelming the content. 
/* Light overlays (using color-mix in oklab) */
--color-overlay-light-1: color-mix(in oklab, var(--color-text-primary), transparent 92%);
--color-overlay-light-2: color-mix(in oklab, var(--color-text-primary), transparent 88%);
--color-overlay-light-3: color-mix(in oklab, var(--color-text-primary), transparent 84%);
--color-overlay-light-4: color-mix(in oklab, var(--color-text-primary), transparent 80%);

​
Light Overlay Opacity Progression

┌──────────────────────────────────────────────────────────────────────────────┐
│  LIGHT OVERLAY OPACITY PROGRESSION                                           │
├──────────────────────────────────────────────────────────────────────────────┤
│                                                                              │
│  Variable                    Transparent %    Resulting Opacity              │
│  ═════════════════════════   ═════════════    ═══════════════════            │
│                                                                              │
│  --color-overlay-light-1     92%              8%  (100 - 92)                 │
│  --color-overlay-light-2     88%              12% (100 - 88)                 │
│  --color-overlay-light-3     84%              16% (100 - 84)                 │
│  --color-overlay-light-4     80%              20% (100 - 80)                 │
│                                                                              │
│  Progression Pattern: +4% opacity per step                                   │
│  Base value: 8% -> 12% -> 16% -> 20%                                         │
│                                                                              │
│  Visual Representation:                                                      │
│                                                                              │
│  Light-1 (8%)   .................... Barely visible                         │
│  Light-2 (12%)  =................... Subtle hint                            │
│  Light-3 (16%)  ==.................. Noticeable tint                        │
│  Light-4 (20%)  ===................. Clear overlay                          │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

​
Light Overlay Usage Patterns

/* Hover state - subtle feedback */
.list-item:hover {
    background: var(--color-overlay-light-1);  /* 8% overlay */
}

/* Focus state - more visible */
.list-item:focus {
    background: var(--color-overlay-light-2);  /* 12% overlay */
}

/* Selected state - clear indication */
.list-item.selected {
    background: var(--color-overlay-light-3);  /* 16% overlay */
}

/* Active/pressed state - strongest */
.list-item:active {
    background: var(--color-overlay-light-4);  /* 20% overlay */
}

​
Legacy Fallback Variables

/* Legacy rgba fallbacks */
--color-overlay-light-1-fallback: rgba(147, 161, 161, 0.08);
--color-overlay-light-2-fallback: rgba(147, 161, 161, 0.12);
--color-overlay-dark-1-fallback: rgba(0, 0, 0, 0.05);
--color-overlay-dark-2-fallback: rgba(0, 0, 0, 0.1);
These fallbacks exist for:
  1. Older browsers without color-mix() support
  2. Static color values when CSS variable resolution fails
  3. Documentation of intended opacity values

​
Dark Overlay System

Dark overlays create shadows and depth in the UI. They use black as the base color for universal darkening. 
/* Dark overlays (using color-mix in oklab) */
--color-overlay-dark-1: color-mix(in oklab, black, transparent 95%);
--color-overlay-dark-2: color-mix(in oklab, black, transparent 90%);
--color-overlay-dark-3: color-mix(in oklab, black, transparent 80%);
--color-overlay-dark-4: color-mix(in oklab, black, transparent 70%);

​
Dark Overlay Opacity Progression

┌──────────────────────────────────────────────────────────────────────────────┐
│  DARK OVERLAY OPACITY PROGRESSION                                            │
├──────────────────────────────────────────────────────────────────────────────┤
│                                                                              │
│  Variable                    Transparent %    Resulting Opacity              │
│  ═════════════════════════   ═════════════    ═══════════════════            │
│                                                                              │
│  --color-overlay-dark-1      95%              5%  (100 - 95)                 │
│  --color-overlay-dark-2      90%              10% (100 - 90)                 │
│  --color-overlay-dark-3      80%              20% (100 - 80)                 │
│  --color-overlay-dark-4      70%              30% (100 - 70)                 │
│                                                                              │
│  Progression Pattern: Accelerating (+5, +10, +10)                            │
│  Base value: 5% -> 10% -> 20% -> 30%                                         │
│                                                                              │
│  Visual Representation (on light background):                                │
│                                                                              │
│  Dark-1 (5%)   .................... Very subtle shadow                      │
│  Dark-2 (10%)  =................... Light shadow                            │
│  Dark-3 (20%)  ===................. Medium shadow                           │
│  Dark-4 (30%)  ======.............. Heavy shadow/scrim                      │
│                                                                              │
│  NOTE: Dark overlays use larger jumps because visual perception              │
│  of darkness requires more contrast to notice differences.                   │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

​
Light vs Dark Overlay Comparison

┌──────────────────────────────────────────────────────────────────────────────┐
│  LIGHT VS DARK OVERLAY COMPARISON                                            │
├──────────────────────────────────────────────────────────────────────────────┤
│                                                                              │
│  LIGHT OVERLAYS                        DARK OVERLAYS                         │
│  ══════════════                        ═════════════                         │
│                                                                              │
│  Source: --color-text-primary          Source: black                         │
│  (Theme-dependent, adapts)             (Fixed, universal)                    │
│                                                                              │
│  Opacity steps: 8, 12, 16, 20%         Opacity steps: 5, 10, 20, 30%         │
│  (Linear +4% progression)              (Accelerating progression)            │
│                                                                              │
│  Use case:                             Use case:                             │
│  • Hover states on dark BG             • Shadows                             │
│  • Selection highlights                • Scrims/backdrops                    │
│  • Active indicators                   • Disabled overlays                   │
│  • Focus rings                         • Modal backgrounds                   │
│                                                                              │
│  Appearance:                           Appearance:                           │
│  Lightens the background               Darkens the background                │
│  (white tint on dark theme)            (universal darkening)                 │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

​
Semantic Color Transparency (Muted Variants)

Muted colors are semi-transparent versions of semantic colors. They are used for backgrounds that need to convey meaning without overwhelming content. 
/* Complete muted color derivations */
--oklch-primary-muted: color-mix(in oklab, var(--oklch-primary), transparent 80%);
--oklch-success-muted: color-mix(in oklab, var(--oklch-success), transparent 80%);
--oklch-danger-muted: color-mix(in oklab, var(--oklch-danger), transparent 80%);
--oklch-warning-muted: color-mix(in oklab, var(--oklch-warning), transparent 80%);

​
Muted Color Architecture

┌──────────────────────────────────────────────────────────────────────────────┐
│  MUTED COLOR DERIVATION ARCHITECTURE                                         │
├──────────────────────────────────────────────────────────────────────────────┤
│                                                                              │
│  CORE COLORS (OKLCH)                MUTED VARIANTS (OKLAB + transparent)     │
│  ═══════════════════                ════════════════════════════════════     │
│                                                                              │
│  --oklch-primary ───────────────►   --oklch-primary-muted                    │
│  oklch(55% 0.15 230)                color-mix(..., transparent 80%)          │
│  ####################               ................####                     │
│  100% opacity                       20% opacity                              │
│                                                                              │
│  --oklch-success ───────────────►   --oklch-success-muted                    │
│  oklch(55% 0.15 130)                color-mix(..., transparent 80%)          │
│  ####################               ................####                     │
│  100% opacity                       20% opacity                              │
│                                                                              │
│  --oklch-danger ────────────────►   --oklch-danger-muted                     │
│  oklch(55% 0.18 25)                 color-mix(..., transparent 80%)          │
│  ####################               ................####                     │
│  100% opacity                       20% opacity                              │
│                                                                              │
│  --oklch-warning ───────────────►   --oklch-warning-muted                    │
│  oklch(65% 0.15 85)                 color-mix(..., transparent 80%)          │
│  ####################               ................####                     │
│  100% opacity                       20% opacity                              │
│                                                                              │
│  PATTERN: All muted variants use 80% transparent = 20% opacity               │
│  This creates consistent visual weight across semantic colors                │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

​
Selection Background Transparency

Selection states use the primary color at 20% opacity to indicate selected items without obscuring content. 
/* Selection state - using color-mix for transparency */
--color-bg-selected: color-mix(in oklab, var(--oklch-primary), transparent 80%);
--color-bg-selected-fallback: rgba(35, 128, 199, 0.2);  /* Legacy fallback */

​
Selection Transparency Analysis

┌──────────────────────────────────────────────────────────────────────────────┐
│  SELECTION BACKGROUND TRANSPARENCY                                           │
├──────────────────────────────────────────────────────────────────────────────┤
│                                                                              │
│  Selection Background Formula:                                               │
│  ════════════════════════════                                                │
│                                                                              │
│  color-mix(in oklab, var(--oklch-primary), transparent 80%)                  │
│                                                                              │
│  Components:                                                                 │
│  ├── Color space: oklab (perceptually uniform)                               │
│  ├── Primary color: var(--oklch-primary) = oklch(55% 0.15 230) [Blue]        │
│  ├── Mix target: transparent                                                 │
│  └── Mix ratio: 80% transparent = 20% of primary visible                     │
│                                                                              │
│  Legacy Fallback Analysis:                                                   │
│  ═════════════════════════                                                   │
│                                                                              │
│  rgba(35, 128, 199, 0.2)                                                     │
│  ├── R: 35  (dark blue)                                                      │
│  ├── G: 128 (medium)                                                         │
│  ├── B: 199 (dominant)                                                       │
│  └── A: 0.2 (20% opacity) - matches the color-mix result                     │
│                                                                              │
│  Visual Result:                                                              │
│  ┌────────────────────────────────────────────────────────────────────────┐  │
│  │  ══════════════════════════════════════════════════════════════════    │  │
│  │  ................................................................      │  │
│  │  ......  Selected file: package.json  ...........................      │  │
│  │  ................................................................      │  │
│  │  ................................................................      │  │
│  │                                                                        │  │
│  │  = = Selected row (20% blue tint)                                      │  │
│  │  . = Normal rows (no tint)                                             │  │
│  └────────────────────────────────────────────────────────────────────────┘  │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

​
Status Badge Transparency System

Status badges use a three-color system: full opacity for icons/text, 20% opacity for backgrounds. 
/* Success Status (Running, Active, Connected) */
--status-success: var(--oklch-success);
--status-success-bg: color-mix(in oklab, var(--oklch-success), transparent 80%);
--status-success-text: var(--oklch-success);

/* Warning Status (Pending, Not Started, Orphan) */
--status-warning: var(--oklch-warning);
--status-warning-bg: color-mix(in oklab, var(--oklch-warning), transparent 80%);
--status-warning-text: var(--oklch-warning);

/* Danger Status (Error, Failed, Disconnected) */
--status-danger: var(--oklch-danger);
--status-danger-bg: color-mix(in oklab, var(--oklch-danger), transparent 80%);
--status-danger-text: var(--oklch-danger);

/* Info Status (Informational, Neutral) */
--status-info: var(--oklch-info);
--status-info-bg: color-mix(in oklab, var(--oklch-info), transparent 80%);
--status-info-text: var(--oklch-info);

​
Status Badge Visual System

┌──────────────────────────────────────────────────────────────────────────────┐
│  STATUS BADGE TRANSPARENCY SYSTEM                                            │
├──────────────────────────────────────────────────────────────────────────────┤
│                                                                              │
│  Each status badge has three color components:                               │
│                                                                              │
│  1. --status-*       : Full opacity color (icons, borders)                   │
│  2. --status-*-bg    : 20% opacity background (badge fill)                   │
│  3. --status-*-text  : Full opacity text color (label)                       │
│                                                                              │
│  ┌────────────────────────────────────────────────────────────────────────┐  │
│  │                                                                        │  │
│  │  SUCCESS BADGE                                                         │  │
│  │  ┌───────────────────────────────────────────────┐                     │  │
│  │  │  ####  ..............................         │                     │  │
│  │  │  icon   Running (text)         bg fill        │                     │  │
│  │  │  100%   100%                   20%            │                     │  │
│  │  └───────────────────────────────────────────────┘                     │  │
│  │  border: 1px solid var(--status-success);  /* 100% */                  │  │
│  │  background: var(--status-success-bg);     /* 20% */                   │  │
│  │  color: var(--status-success-text);        /* 100% */                  │  │
│  │                                                                        │  │
│  └────────────────────────────────────────────────────────────────────────┘  │
│                                                                              │
│  CONSISTENCY: All status backgrounds use exactly 80% transparent (20% opacity)│
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

​
Light Theme Transparency Overrides

Light themes require different overlay values because dark elements on white backgrounds are more visible than light elements on dark backgrounds. 
[data-theme="light"] {
  /* Overlay/Transparency - Light Theme */
  --color-overlay-light-1: rgba(0, 0, 0, 0.03);
  --color-overlay-light-2: rgba(0, 0, 0, 0.05);
  --color-overlay-light-3: rgba(0, 0, 0, 0.08);
  --color-overlay-light-4: rgba(0, 0, 0, 0.12);

  --color-overlay-dark-1: rgba(0, 0, 0, 0.05);
  --color-overlay-dark-2: rgba(0, 0, 0, 0.1);
  --color-overlay-dark-3: rgba(0, 0, 0, 0.15);
  --color-overlay-dark-4: rgba(0, 0, 0, 0.2);
}

​
Dark vs Light Theme Comparison

┌──────────────────────────────────────────────────────────────────────────────┐
│  TRANSPARENCY COMPARISON: DARK VS LIGHT THEME                                │
├──────────────────────────────────────────────────────────────────────────────┤
│                                                                              │
│  LIGHT OVERLAYS                                                              │
│  ══════════════                                                              │
│                                                                              │
│  Variable          Dark Theme                   Light Theme                  │
│  ──────────────────────────────────────────────────────────────────────────  │
│  overlay-light-1   color-mix(..., 92%)          rgba(0,0,0, 0.03)            │
│                    = 8% light on dark           = 3% dark on light           │
│                                                                              │
│  overlay-light-2   color-mix(..., 88%)          rgba(0,0,0, 0.05)            │
│                    = 12% light on dark          = 5% dark on light           │
│                                                                              │
│  overlay-light-3   color-mix(..., 84%)          rgba(0,0,0, 0.08)            │
│                    = 16% light on dark          = 8% dark on light           │
│                                                                              │
│  overlay-light-4   color-mix(..., 80%)          rgba(0,0,0, 0.12)            │
│                    = 20% light on dark          = 12% dark on light          │
│                                                                              │
│  ──────────────────────────────────────────────────────────────────────────  │
│                                                                              │
│  KEY INSIGHT: Light theme overlays use LOWER opacity values because          │
│  dark elements on white backgrounds are more visible than light              │
│  elements on dark backgrounds.                                               │
│                                                                              │
│  ALSO NOTE: Light theme uses rgba() instead of color-mix() because           │
│  the overlays are simple black with varying opacity, not derived             │
│  from theme colors.                                                          │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

​
THE CENTER

​
How Transparency Communicates Information Flow

Connection to Core-Flow:
├── Transparency levels encode information hierarchy
├── 20% = background context (muted)
├── 8-20% = interactive states (overlays)
└── 100% = primary information (foreground)
Transparency is a fundamental tool for communicating information hierarchy. When a color becomes more transparent, it signals “this is context, not primary content.” The human eye naturally focuses on high-contrast (opaque) elements while perceiving transparent elements as environmental. In the Gestalt Color System:
  • Full opacity (100%): Primary actions, important text, active states
  • Mid opacity (20%): Selection backgrounds, status badges, semantic regions
  • Low opacity (5-12%): Hover states, subtle separators, ambient feedback
This creates a clear visual language where opacity directly maps to information priority.

Shadow and Overlay System

Learn how shadows create depth and elevation in the UI