Bootstrap 6 color system

Bootstrap 6 colors flow through a fixed pipeline: a handful of oklch() hues become full scales, a subset of those scales gets semantic roles, and components read the roles — never the hues. Customizing colors means picking the right layer to change, so start by identifying which one your task belongs to.

Workflow

• Step 1: Locate the layer you need to change
• Step 2: Base hues and scales
• Step 3: Theme colors
• Step 4: Layer colors for backgrounds, foregrounds, and borders
• Step 5: Color modes
• Step 6: Compile-time overrides
• Step 7: Runtime overrides
• Step 8: Functions and utilities
• Step 9: Verify

Step 1: Locate the layer you need to change