Color Gallery Component

The Color Gallery Component presents one of your saved color palettes in a clean, organized gallery. Drawing directly from the Color Manager, it displays your brand colors as a structured collection, making it easy to communicate approved palettes throughout your brand guide.

Use this component whenever you want to document a complete color palette rather than simply display a list of HEX values.

Common Uses

The Color Gallery Component is ideal for:

• Primary brand colors
• Secondary color palettes
• Accent colors
• Neutral palettes
• UI color systems
• Print and digital color standards
• Brand identity documentation

Because it displays saved palettes from your Color Manager, your published documentation always stays synchronized with your approved color system.

Gallery Content

Customize the information displayed above your color palette.

Title

Introduce the palette with a descriptive heading.

Examples include:

• Primary Palette
• Brand Colors
• UI Color System

Subtitle

Provide additional guidance describing how the palette should be used.

Examples include:

• Core colors used throughout our brand
• Approved colors for digital and print applications

Category Label

Display a label above each color swatch to identify the palette or color group.

Examples include:

• Primary
• Secondary
• Accent
• Neutral

Category labels help organize your documentation and provide additional context for each collection of colors.

Gallery Layout

Swatches Per Row

Choose how many color swatches appear in each row.

Fewer columns create larger, more detailed swatches, while additional columns provide a compact overview of larger color collections.

Select the layout that best complements your documentation.

Palette Selection

Choose one of the color palettes you've created in the Color Manager.

Every color within the selected palette is displayed automatically.

Because the gallery references your saved palette, any updates made in the Color Manager are reflected automatically, helping keep your documentation accurate and consistent.

Color Information

Each swatch displays the information you've documented in the selected palette.

Depending on your Color Manager settings, this may include:

• Color name
• HEX value
• RGB value
• CMYK value
• PMS reference

This provides designers, developers, printers, and marketing teams with the information they need to reproduce your brand accurately across different media.

Color Options

Customize the appearance of the gallery using optional color settings.

Available options include:

• Title color
• Text color
• Category label color
• Background color

If no colors are selected, the component automatically inherits your brand's default theme styling.

Theme Integration

The Color Gallery Component works seamlessly with your brand theme.

You can:

• Select predefined theme colors
• Enter custom HEX values
• Leave fields blank to inherit your default styling

This ensures your color documentation remains visually consistent throughout your brand guide.

Saving Your Changes

Click Save Component to apply your updates.

The live preview refreshes automatically, allowing you to review the finished gallery before returning to the Page Editor.

Tips

• Organize palettes by purpose, such as Primary, Secondary, Accent, or Neutral.
• Use descriptive titles so viewers immediately understand the role of each palette.
• Keep your Color Manager up to date so every Color Gallery remains synchronized.
• Use the Color Gallery Component when viewers need complete color specifications.
• Use the HEX Gallery Component when a simple visual overview of your brand colors is all that's needed.

Summary

The Color Gallery Component provides a professional way to document your brand's complete color system.

By displaying the palettes you've defined in the Color Manager, it creates a single source of truth that helps designers, developers, printers, and marketing teams apply your brand colors accurately and consistently across every project.