Custom Color Schemas

Create unlimited color palettes for semantic purposes

What are Custom Color Schemas?

Beyond brand and neutral colors, you can create unlimited custom color schemas for semantic purposes (success, error, warning) or alternative brand colors. Each schema gets the same 12-step Radix Colors treatment.

Unlimited flexibility

Custom schemas are perfect when you need colors beyond your primary brand palette. Create as many as you need - each one gets its own complete 12-step scale with automatic light/dark mode support.

Common Use Cases

Custom schemas excel at semantic UI states and alternative brand colors:

Success States

Green palette for confirmations, completed tasks, and positive feedback

Error/Destructive

Red palette for errors, warnings, and destructive actions requiring caution

Warning/Caution

Yellow/orange palette for alerts, pending states, and important notices

Info/Notice

Blue palette for informational messages and neutral notifications

Secondary Brands

Alternative brand colors for sub-brands or product variations

Category Colors

Distinct palettes for categories, tags, or content classification

How Custom Schemas Work

Custom schemas use the same powerful Radix Colors algorithm as your brand colors:

Same 12-Step Generation

Each schema generates a complete 12-step palette from a single base color

Semantic Naming

Use clear names like 'success' or 'error' for easy identification in code

Independent Palettes

Each schema is completely independent with its own color and scale

Creating Custom Schemas

Add custom color schemas to your project in just a few steps:

Configuration Steps

1. Navigate to Colors tab - Open your project in the dashboard
2. Find Custom Schemas section - Scroll below brand and neutral colors
3. Click "Add New Schema" - Create a new custom color palette
4. Name your schema - Use semantic names (e.g., "success", "error", "warning")
5. Choose base color - Select the primary color for this schema
6. Auto-generation - BreakColorUI generates all 12 steps automatically
7. Save - Click save to persist your custom schemas

Using Custom Color Schemas

Once created, your custom schemas become CSS variables ready to use anywhere:

CSS Variables - Naming Conventioncss

/* Custom schema variables use your chosen name */

/* Example: "success" schema */
--hcl-success-1   /* Lightest (backgrounds) */
--hcl-success-9   /* Solid (buttons) */
--hcl-success-12  /* Darkest (text) */

/* Example: "error" schema */
--hcl-error-1
--hcl-error-9
--hcl-error-12

/* Example: "warning" schema */
--hcl-warning-1
--hcl-warning-9
--hcl-warning-12

Practical Usage Examplescss

/* Success button */
.btn-success {
  background: var(--hcl-success-9);
  color: var(--hcl-success-12);
  border: 1px solid var(--hcl-success-7);
}

.btn-success:hover {
  background: var(--hcl-success-10);
}

/* Error alert */
.alert-error {
  background: var(--hcl-error-2);
  color: var(--hcl-error-12);
  border-left: 3px solid var(--hcl-error-9);
}

/* Warning banner */
.banner-warning {
  background: var(--hcl-warning-3);
  color: var(--hcl-warning-12);
  border: 1px solid var(--hcl-warning-6);
}

Chrome Extension Integration

All custom schemas automatically appear in the Chrome Extension modal! When you click any color input in Breakdance, your custom schemas will be organized by name for quick access.

Best Practices

Follow these guidelines to get the most from custom color schemas:

Use Semantic Names

Choose clear, descriptive names like "success", "error", "warning" instead of generic color names like "green", "red", "yellow". This makes your code self-documenting and easier to maintain.

Limit Your Palette

While unlimited schemas are possible, stick to 3-5 essential schemas. Too many colors can create visual confusion and decision fatigue. Focus on the semantic colors your design system truly needs.

Test Accessibility

Always test custom schemas for proper contrast ratios, especially for text on colored backgrounds. Use steps 11-12 for text and steps 1-3 for backgrounds to ensure WCAG compliance.

Real-World Example

Here's how a complete semantic color system might look in practice:

Complete Semantic Systemcss

/* Your project has 4 custom schemas: success, error, warning, info */

/* Success notification */
.notification-success {
  background: var(--hcl-success-2);
  border-left: 4px solid var(--hcl-success-9);
  color: var(--hcl-success-12);
}

/* Delete button (destructive) */
.btn-delete {
  background: var(--hcl-error-9);
  color: var(--hcl-error-12);
}

.btn-delete:hover {
  background: var(--hcl-error-10);
}

/* Warning badge */
.badge-warning {
  background: var(--hcl-warning-9);
  color: var(--hcl-warning-12);
  font-weight: 600;
}

/* Info tooltip */
.tooltip-info {
  background: var(--hcl-info-3);
  border: 1px solid var(--hcl-info-6);
  color: var(--hcl-info-12);
}

Next Steps

With your complete color system configured (brand, neutral, and custom schemas), you're ready to move on to typography:

Color system complete!

Head to Typography to configure fluid, responsive font sizes that adapt smoothly across all viewport sizes.