Color System Overview

Generate accessible color palettes based on Radix Colors

Introduction to the Color System

BreakColorUI uses the Radix Colors algorithm to generate beautiful, accessible color palettes. Each palette contains 12 carefully balanced steps designed for different use cases, from subtle backgrounds to high-contrast text.

Our color system is built on Radix Colors, an open-source color system designed for building accessible user interfaces. Every palette is scientifically balanced for optimal contrast and visual harmony.

One Color In, 12 Steps Out

Pick a single base color and get a complete 12-step palette automatically generated

Built-in Accessibility

Every step meets WCAG contrast requirements for its intended use case

Light Mode Support

Lighter backgrounds with darker text for optimal readability in light environments

Dark Mode Support

Automatically inverted scales with perfect contrast for dark interfaces

See the 12-Step Scale in Action

Interact with a live color scale to understand how each step works in both light and dark modes:

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);

Three Types of Color Palettes

BreakColorUI provides three types of color palettes, each designed for different purposes in your design system:

Brand Colors

Your primary brand color expanded into a 12-step palette. Perfect for buttons, links, and brand-specific UI.

Neutral Colors

Choose from 6 neutral palettes (Gray, Mauve, Slate, Sage, Olive, Sand) for backgrounds and text.

Custom Schemas

Create unlimited palettes for semantic purposes (success, error, warning) or alternative brands.

Understanding the 12-Step Scale

Each palette is divided into 12 steps, numbered 1-12. Each range serves a specific purpose:

Scale Usage Guide

Steps 1-2: Subtle backgrounds, app backgrounds

Steps 3-5: UI element backgrounds, hover states

Steps 6-8: Borders, separators, focus rings

Steps 9-10: Solid backgrounds, primary actions

Steps 11-12: High contrast text, important labels

Example Usagecss

.button {
  background-color: var(--hcl-brand-9);  /* Solid action color */
  color: var(--hcl-brand-12);            /* High contrast text */
  border: 1px solid var(--hcl-brand-7);  /* Subtle border */
}

.button:hover {
  background-color: var(--hcl-brand-10); /* Slightly darker */
}

Automatic Light & Dark Mode

Every color palette automatically adapts to light and dark modes without any manual configuration:

It Just Works™

• Light mode - Lighter backgrounds (steps 1-2) with darker text (steps 11-12)
• Dark mode - Automatically inverts for optimal contrast
• Same CSS variables - Write once, works in both modes
• No media queries - Theme switching handled automatically

Same code, both themescss

/* This works perfectly in both light and dark mode */
.card {
  background-color: var(--hcl-neutral-2);
  color: var(--hcl-neutral-12);
  border: 1px solid var(--hcl-neutral-6);
}

/* No need for @media (prefers-color-scheme) queries! */

Next Steps

Ready to build your color system? Start with your brand color, then add neutrals and custom palettes as needed.

Recommended workflow

1. Configure Brand Color - Start with Brand Colors to define your primary palette
2. Choose Neutral Palette - Select from Neutral Colors for backgrounds and text
3. Add Custom Schemas - Optionally create Custom Schemas for semantic colors