Color Scheme Designer

Design a Boreal UI palette and preview how each color resolves across buttons, badges, alerts, cards, and inputs.

Starting fromAutumn Glow

Values are seeded from the active ThemeProvider scheme

Palette

Scheme values

Contrast

Resolved text colors

Aa
Page text#000000 on #f5f5f5
19.26:1
Aa
Primary text#000000 on #c58686
7.13:1
Aa
Secondary text#000000 on #cc8430
6.91:1
Aa
Tertiary text#000000 on #b19476
7.37:1
Aa
Quaternary text#000000 on #b9a27b
8.52:1
Live Preview

Autumn Glow Draft

Dashboard

Campaign performance

Component text uses the same resolved CSS variables that Boreal UI applies from the active color scheme.

Active
Revenue$84.2k+12.8%
Conversion7.4%+2.1%
Retention91%Stable
Readable foregrounds
Low-contrast combinations fall back to black or white text so the preview reflects Boreal's runtime color decisions.
Primary#c58686
Secondary#cc8430
Tertiary#b19476
Quaternary#b9a27b
Background#f5f5f5
Export

Custom scheme object

javascript
const customSchemes = [
  {
    name: "Autumn Glow Draft",
    primaryColor: "#c58686",
    secondaryColor: "#cc8430",
    tertiaryColor: "#b19476",
    quaternaryColor: "#b9a27b",
    backgroundColor: "#f5f5f5",
  },
];