Overview
Lambda UI uses the OKLCH color space for defining its color system. This ensures perceptually uniform colors and consistent contrast ratios across different palettes. The system is divided into two layers: Primitive Colors (the raw palette) andSemantic Colors (roles for UI elements).
All colors are accessible as CSS variables. The raw values are available, but we recommend using Semantic Colors for building UI components to ensure theming support.
Primitive Colors
The foundation of our color system. Each family consists of 11 steps ranging from 050 (lightest) to 950 (darkest).
Neutral
Warm
Red
Brown
Orange
Yellow
Amber
Lime
Green
Emerald
Teal
Cyan
Sky
Blue
Indigo
Violet
Purple
Fuchsia
Pink
Rose
Slate
Gray
Zinc
Semantic Colors
Semantic colors map primitive colors to specific UI contexts (e.g., "primary action", "error message"). These automatically adapt when switching themes (Light/Dark/Retro).
Primary
base--primary-base-colorhover--primary-hover-colordisabled--primary-disabled-colortext--primary-text-colorcontent--primary-content-colorsoft--primary-soft-colorsubtle--primary-subtle-colorborder--primary-border-coloroutline--primary-outline-colorSecondary
base--secondary-base-colorhover--secondary-hover-colordisabled--secondary-disabled-colortext--secondary-text-colorcontent--secondary-content-colorsoft--secondary-soft-colorsubtle--secondary-subtle-colorborder--secondary-border-coloroutline--secondary-outline-colorNeutral
base--neutral-base-colorhover--neutral-hover-colordisabled--neutral-disabled-colortext--neutral-text-colorcontent--neutral-content-colorsoft--neutral-soft-colorsubtle--neutral-subtle-colorborder--neutral-border-coloroutline--neutral-outline-colorSuccess
base--success-base-colorhover--success-hover-colordisabled--success-disabled-colortext--success-text-colorcontent--success-content-colorsoft--success-soft-colorsubtle--success-subtle-colorborder--success-border-coloroutline--success-outline-colorDanger
base--danger-base-colorhover--danger-hover-colordisabled--danger-disabled-colortext--danger-text-colorcontent--danger-content-colorsoft--danger-soft-colorsubtle--danger-subtle-colorborder--danger-border-coloroutline--danger-outline-colorWarning
base--warning-base-colorhover--warning-hover-colordisabled--warning-disabled-colortext--warning-text-colorcontent--warning-content-colorsoft--warning-soft-colorsubtle--warning-subtle-colorborder--warning-border-coloroutline--warning-outline-colorInfo
base--info-base-colorhover--info-hover-colordisabled--info-disabled-colortext--info-text-colorcontent--info-content-colorsoft--info-soft-colorsubtle--info-subtle-colorborder--info-border-coloroutline--info-outline-colorUsage
Use semantic variables in your CSS to inherit theme changes.
.my-button {
background-color: var(--primary-base-color);
color: var(--primary-content-color);
border: 1px solid var(--primary-border-color);
}
.my-button:hover {
background-color: var(--primary-hover-color);
}
.my-alert {
background-color: var(--danger-soft-color);
color: var(--danger-text-color);
}