Neutral Colors

Choose from 6 neutral palettes to complement your brand

What are Neutral Colors?

Neutral colors form the foundation of your UI - backgrounds, text, borders, and surfaces. BreakColorUI offers 6 carefully crafted neutral palettes, each with subtle undertones that pair beautifully with different brand colors.

Why Choose Neutral Palettes?

• Each neutral has subtle undertones that complement specific brand colors
• All neutrals generate 12 steps for consistent UI hierarchy
• Automatic light and dark mode adaptation
• Scientifically balanced for accessibility

Available Neutral Palettes

Each neutral palette has a unique character. Choose the one that best complements your brand color:

Gray

Pure neutral, no color bias. The universal choice that works with any brand.

Mauve

Subtle purple undertone. Perfect for purple and pink brand colors.

Slate

Subtle blue undertone. Complements blue and cyan brand colors.

Sage

Subtle green undertone. Works beautifully with bright green brands.

Olive

Warm green-brown undertone. Pairs with earth tones and warm greens.

Sand

Warm yellow-brown undertone. Ideal for orange, yellow, or warm red brands.

Choosing the Right Neutral

Match your neutral palette to your brand color temperature for harmonious designs:

Gray - The Universal Choice

Gray is the safest bet - it has zero color bias and works perfectly with any brand color. Best for clean, minimal designs where you want the brand color to be the star.

Cool Tones

Mauve (purple undertone) + Slate (blue undertone) pair with cool brand colors like purple, pink, blue, and cyan.

Green Tones

Sage (bright green) + Olive (earth green) complement green brand colors from lime to forest.

Warm Tones

Sand (yellow-brown) works beautifully with warm brand colors like orange, yellow, and warm red.

Configuring Neutral Colors

Setting up your neutral palette is quick and easy:

Configuration Steps

1. Open your project - Navigate to the Colors tab
2. Find the Neutral dropdown - Located below your brand color
3. Select a palette - Choose from Gray, Mauve, Slate, Sage, Olive, or Sand
4. Preview - See the 12-step palette generated instantly
5. Save - Click save to persist your neutral selection

Using Neutral Colors

Neutral colors are the workhorses of your design system. Use them for backgrounds, text, and UI structure:

CSS Variablescss

/* Neutral color steps (1-12) */
.app-background {
  background: var(--hcl-neutral-1);  /* Subtle app background */
  color: var(--hcl-neutral-12);      /* High contrast text */
}

.card {
  background: var(--hcl-neutral-2);  /* Card background */
  border: 1px solid var(--hcl-neutral-6);  /* Subtle border */
}

.text-secondary {
  color: var(--hcl-neutral-11);      /* Secondary text */
}

Common Use Cases

• Steps 1-3: Page backgrounds, card surfaces, disabled states
• Steps 4-6: Subtle borders, separators, input backgrounds
• Steps 7-9: Hover states, focus rings, active borders
• Steps 10-12: Body text, headings, high-contrast labels

Pairing with Brand Colors

Neutral colors shine when paired with your brand colors. Here's how they work together:

Brand + Neutral Harmonycss

.primary-button {
  /* Brand color for action */
  background: var(--hcl-brand-9);
  color: var(--hcl-brand-12);

  /* Neutral for subtle border */
  border: 1px solid var(--hcl-neutral-7);
}

.card-with-accent {
  /* Neutral foundation */
  background: var(--hcl-neutral-2);
  border-left: 3px solid var(--hcl-brand-9);  /* Brand accent */

  /* Neutral text */
  color: var(--hcl-neutral-12);
}

Next Steps

With brand and neutral colors configured, you have a complete color system. Optionally, add custom schemas for semantic colors:

Optional: Custom Color Schemas

Want to add semantic colors like success, error, or warning? Head to Custom Color Schemas to create unlimited additional palettes.