Adding color palettes to your brand guide
In this tutorial, we'll walk through how to add and edit color palettes in Guidelines, giving your team clear access to brand colors and their values.
The Colors Page
When you create a site 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 hold one or more colors. 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.
Managing Colors
At any time, you can expand or update your brand palette by clicking . Here you can:
- Add new colors to your brand.
- Adjust existing values such as CMYK and Pantone.
- Organize and rearrange colors for clarity.
These changes will update automatically across your brand guide.
Publishing and User Experience
Once your color palette is set, click .
On the live site, viewers will be able to:
- See the displayed colors.
- Copy values instantly with a single click.
Colors are also searchable within your guide. Users can search for a color by name and view all of its 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 in Guidelines, you ensure your team has quick, reliable access to every color value. With click-to-copy codes, search integration, and accessibility tools, your brand colors remain consistent and easy to use across all projects.