What is Transparency Flow?
Transparency Flow is the process of deriving semi-transparent versions of Core Colors using thecolor-mix() function with the transparent keyword. Unlike traditional rgba() or opacity property approaches, Transparency Flow:
- Maintains perceptual color accuracy through OKLAB color space
- Derives from CSS variables (dynamic, themeable)
- 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
Thetransparent 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:- Perceptual accuracy: The perceived opacity matches the specified percentage
- Color fidelity: The underlying hue is preserved during transparency
- 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);
- Older browsers without
color-mix()support - Static color values when CSS variable resolution fails
- 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)
- 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
Shadow and Overlay System
Learn how shadows create depth and elevation in the UI