Adding color palettes to your brand guide

In this tutorial, we'll walk through how to add and edit color palettes in Guidelines, organize your colors into groups, and give your team clear access to brand colors and their values.

The Colors Page

When you create a guide using a template, Guidelines automatically generates a Colors Page. This page includes your primary colors and provides options for extended palettes if needed—for example, building out color scales for digital interfaces.

Working With Palette Blocks

Each palette block can show one of your color groups, or a custom set of colors you pick one by one. Within each block, you can:

• Add new colors.
• Adjust both the color itself and the text color.
• Choose what information to display (Hex, RGB, HSL, CMYK, or Pantone values).
• Enable click-to-copy, allowing users to copy color codes directly to their clipboard.
• Turn on Info under Actions so visitors can open a color's full details.

Managing Colors

At any time, you can expand or update your brand palette by clicking Manage Colors. Here you can:

• Add new colors to your brand.
• Adjust existing values such as CMYK and Pantone.
• Organize colors into groups and rearrange them for clarity.

These changes will update automatically across your brand guide.

Organizing Colors Into Groups

Color groups let you organize your brand colors the way your team talks about them, such as Primary, Secondary and Neutrals, or a set of shades for digital interfaces.

To create a color group:

1. Click Manage Colors.
2. Click New Group, then give the group a name.
3. Drag colors into the group. You can select several colors and move them together.
4. Drag groups to change their order.

Colors that aren't in a group appear under Ungrouped.

If your colors aren't grouped yet, Guidelines suggests groups for you. Click Add Groups to accept the suggestion, or Got it to dismiss it. Colors without a clear match stay in Ungrouped.

Group Settings

Click Group settings on any group to change:

• Name — The name shown in the dashboard, in palette blocks, and in search on your live guide.
• Use in templates — Whether templates and section color schemes can use this group's colors. Templates favor the groups at the top of your list, so keep your main brand colors first.
• Shade group — Turn this on for a set of tints and shades of one color. Choose a Base shade, the main color the others are built around. Colors in a shade group are always ordered by lightness.

In a shade group, hover between two colors and click Add shade to insert a suggested shade that sits between them.

Deleting a group doesn't delete its colors. They move to Ungrouped.

Showing a Color Group in a Palette Block

Once your brand has color groups, a palette block can show a whole group. The block stays linked to the group, so colors you add, edit or reorder in Manage Colors update on every page that shows it.

To show a color group in a palette block:

1. Select the palette block and open the Colors tab in the toolbar.
2. Set Mode to Grouped.
3. Choose a group from the Group menu.
4. Use the switch next to each color to show or hide it in this block, and drag colors to reorder them.

Hiding a color only affects that block. Once you hide a color, new colors added to the group also start hidden in that block, so you can turn them on when you're ready.

You can also:

• Base Shades — Choose Base Shades from the Group menu to show the base shade of each shade group, labeled with the group's name. This option appears once you have two or more shade groups.
• Order — For a shade group, show shades Light to dark or Dark to light.
• Custom — Set Mode to Custom to pick colors one by one. The block keeps the colors it was showing.

Publishing and User Experience

Once your color palette is set, click Publish.
On the live guide, visitors will be able to:

• See the displayed colors.
• Copy values instantly with a single click.

Colors are also searchable within your guide. Search results list colors under their group, and visitors can search by color or group name to view all of a color's properties.

Accessibility Tools

Guidelines includes a built-in accessibility checker. When users search for colors, they can test color pairings against AA standards for contrast and readability. This makes it easy to identify which combinations are usable and which should be avoided.

Conclusion

By setting up color palettes and color groups in Guidelines, you ensure your team has quick, reliable access to every color value. With grouped palettes, click-to-copy codes, search integration, and accessibility tools, your brand colors remain consistent and easy to use across all projects.