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%)
           |
           +----------------------------------------------------------
           |
           v
   +---------------------------------------------------------------------+
   |                      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