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 Demo

Live example of how BreakColorUI generates a 12-step brand color palette. Toggle between Light and Dark mode to see automatic adaptation. Click any step to copy the CSS variable.

Brand Color Scale

12 Steps

Step 1

Backgrounds & Surfaces

--hcl-brand-1

Step 2

Backgrounds & Surfaces

--hcl-brand-2

Step 3

Backgrounds & Surfaces

--hcl-brand-3

Step 4

Borders & Components

--hcl-brand-4

Step 5

Borders & Components

--hcl-brand-5

Step 6

Borders & Components

--hcl-brand-6

Step 7

Solid & Interactive

--hcl-brand-7

Step 8

Solid & Interactive

--hcl-brand-8

Step 9

Solid & Interactive

--hcl-brand-9

Step 10

Text & High Contrast

--hcl-brand-10

Step 11

Text & High Contrast

--hcl-brand-11

Step 12

Text & High Contrast

--hcl-brand-12

Light Mode Adaptation:

In light mode, step 1 is the lightest (backgrounds) and step 12 is darkest (text). Perfect for light backgrounds with dark text.

Usage Example:

/* Same code works in both themes */

background-color: var(--hcl-brand-9);

color: var(--hcl-brand-12);

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:

CSS Variablescss

/* Brand color steps (1-12) */
.card {
  background: var(--hcl-brand-1);    /* Subtle background */
  border: 1px solid var(--hcl-brand-7);  /* Border */
}

.button {
  background: var(--hcl-brand-9);    /* Solid action color */
  color: var(--hcl-brand-12);        /* High contrast text */
}

.button:hover {
  background: var(--hcl-brand-10);   /* Darker on hover */
}

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.