Palette

A palette is a color scale built from a single color and expanded into multiple steps. In a design system, palettes serve as the foundation for a wide range of UI colors.

For example, if you choose one blue color, ColorBread can generate steps like:

Lower numbers represent lighter colors.
Higher numbers represent darker colors.

---

Base Color

Every palette starts from a Base Color.

This is the central color of the palette and is usually based on a brand’s primary color.

Examples include:

• A brand main color
• A primary UI color

ColorBread uses this color to generate a balanced color scale automatically.

---

Why palettes matter

Palettes play an important role in design systems.

They help you:

• Keep colors consistent
• Support a wider range of UI states
• Build for both light and dark modes
• Create systems that are easier to scale

---

How ColorBread generates palettes

ColorBread generates palettes automatically from a Base Color.

You can adjust:

• The number of steps
• Lightness distribution
• Chroma
• Hue shift

This gives you more control over how the palette behaves in your design.

---

Palette in the larger system

A palette is the starting point of the system.

In ColorBread, the full structure looks like this:

Palette
→ Recipe
→ Semantic Color
→ Figma Variables