Generate
Generate a color palette in ColorBread
Generate is the core feature of ColorBread.
Choose a Base Color, and ColorBread builds a color palette around it automatically.
You can then fine-tune the result to better match your design needs.
Real-time preview
As you adjust the settings, the palette updates in real time.
This makes it easy to test different directions quickly.
Base Color
Every palette starts from a Base Color.
This color becomes the center of the scale. Depending on the selected color, the generated palette may lean brighter or darker.
The system does not force a rigid output. It responds to the selected color in a way that keeps the designer’s original intent intact.
You can also select an existing Figma layer to preview and sample color directly from your design.
Color Steps
A palette is made of multiple color steps.
Example:
Lower numbers are lighter.
Higher numbers are darker.
Adjustments
In the Adjustments panel, you can control how the palette behaves.
The selected Base Color itself stays fixed. This reflects one of ColorBread’s core ideas: the designer’s original choice should be preserved.
Lightness
Adjusts the distribution of brightness across the scale.
Changing this affects the balance between lighter and darker areas of the palette.
Chroma (Saturation)
Adjusts the intensity of the color.
Higher values make the palette feel more vivid.
Lower values make it feel more muted and calm.
Smoothness
Controls how smoothly the steps transition from one to the next.
Higher values create more gradual and natural transitions.
Create
Create generates Figma layers based on the current preview.
- Palette: Creates the color steps as layers
- Gradient: Creates a gradient from the preview colors
- Report: Creates a report layer that includes contrast information
Apply
Choose whether the generated palette should also be registered as Figma assets.
If linked assets are created together, they can be managed along with the palette later.
- None: Create only the palette
- Styles: Create the palette and Figma Color Styles
- Variables: Create the palette and Figma Variables
- All: Create both Variables and Styles, with Styles linked as aliases to Variables
- Palette Name: Set the name of the palette
Bake Palette
Save the current palette to the Library.
Once saved, it can be reused later in the same file or in other files.