Brand Colors
Generate accessible 12-step color palettes from your brand color
What are Brand Colors?
Brand colors are the primary colors that define your brand identity. BreakColorUI takes a single base color and automatically generates a scientifically-balanced 12-step palette using the Radix Colors algorithm.
Why 12 steps?
- • Each step serves a specific UI purpose (backgrounds → text)
- • Ensures consistent visual hierarchy
- • Maintains accessibility with proper contrast ratios
- • Works automatically in light and dark modes
Interactive Color System
Try our interactive color picker to see how BreakColorUI generates complete 12-step palettes. Pick any brand color and neutral palette to see real-time generation with automatic light/dark mode adaptation.
Light & Dark Mode Support
Your brand colors automatically adapt to both light and dark themes without any manual configuration:
Light Mode
Step 1 is lightest (app backgrounds), Step 12 is darkest (text on colored backgrounds)
Dark Mode
The scale automatically inverts: Step 1 becomes dark, Step 12 becomes light
Automatic Theme Switching
Write your CSS once using the same variables, and they'll work perfectly in both light and dark modes. No media queries or theme-specific code needed!
Configuring Brand Color
Setting up your brand color is straightforward - just pick your color and BreakColorUI handles the rest:
Configuration Steps
- 1. Open your project - Navigate to the Colors tab
- 2. Click the Brand color picker - Choose your primary brand color
- 3. Auto-generation - BreakColorUI automatically creates the 12-step palette
- 4. Preview - Review the palette in the color scale viewer
- 5. Save - Click save to persist your brand color
Using Brand Colors
All brand colors are available as CSS custom properties ready to use in your stylesheets:
/* Brand colors auto-adapt to light/dark mode */
/* Light Mode */
html:root,
[data-hsx*="light"] {
--hcl-brand-1: #fbfdff; /* Subtle background */
--hcl-brand-7: #8ec8f6; /* Border */
--hcl-brand-9: #0090ff; /* Solid action */
--hcl-brand-12: #113264; /* High contrast text */
}
/* Dark Mode (automatic inversion) */
:root:root[data-hsx*="dark"],
[data-hsx*="dark"] {
--hcl-brand-1: #0d1520; /* Dark background */
--hcl-brand-7: #205d9e; /* Border */
--hcl-brand-9: #0090ff; /* Solid action */
--hcl-brand-12: #c2e6ff; /* Light text */
}
/* Usage in components */
.card {
background: var(--hcl-brand-1);
border: 1px solid var(--hcl-brand-7);
}
.button {
background: var(--hcl-brand-9);
color: var(--hcl-on-brand); /* White in both modes */
}
.button:hover {
background: var(--hcl-brand-10);
}Chrome Extension Integration
Using the Chrome Extension with Breakdance? Click any color input in the builder to apply brand colors directly - no copy/paste needed!
Understanding the Scale
Each step in the 12-step scale has a recommended use case:
Steps 1-4
Subtle backgrounds, app surfaces, and disabled states
Steps 5-8
Borders, separators, focus rings, and hover states
Steps 9-12
Solid backgrounds, primary actions, and high-contrast text
Next Steps
After configuring your brand color, complete your color system by choosing a neutral palette:
Recommended next step
Head to Neutral Colors to select from 6 neutral palettes (Gray, Mauve, Slate, Sage, Olive, Sand) for backgrounds and text.