HEX Gallery Component

The HEX Gallery Component displays your brand's colors as a clean, responsive grid of color swatches. Drawing directly from the Quick HEX List in the Color Manager, it provides an easy-to-scan visual reference for your core brand colors.

Use this component whenever you want to present your color palette without the additional specifications shown in a full Color Gallery.

Common Uses

The HEX Gallery Component is ideal for:

• Brand color overviews
• Primary color palettes
• Accent color collections
• Quick color references
• Design system documentation
• Developer handoff

Because the gallery is generated from your Color Manager, your published color palette always stays synchronized with your documented brand colors.

Gallery Content

Customize the information displayed above your color swatches.

Title

Introduce your color palette with a descriptive heading.

Examples include:

• Brand Colors
• Primary Palette
• Core Colors

Subtitle

Provide additional context about the palette.

Examples include:

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

Category Label

Display a label above each swatch to organize related colors.

Examples include:

• Primary
• Secondary
• Accent
• Neutral

Category labels help viewers quickly understand the purpose of each group of colors.

Gallery Layout

Swatches Per Row

Choose how many color swatches appear in each row.

Fewer columns create larger swatches with greater visual emphasis, while additional columns provide a compact overview of larger color collections.

Select the layout that best fits your guide.

Color Swatches

Every swatch is generated directly from the HEX values stored in your Color Manager.

As your Quick HEX List changes, the gallery updates automatically, ensuring your documentation always reflects your latest approved color palette.

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 HEX 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 keeps your color documentation 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

• Use the HEX Gallery for quick visual references rather than detailed color specifications.
• Organize your Quick HEX List in the Color Manager so colors appear in a logical sequence.
• Pair the HEX Gallery with a Color Gallery Component when your audience also needs RGB, CMYK, PMS, or additional color information.
• Use clear titles and category labels to distinguish primary, secondary, and accent colors.

Summary

The HEX Gallery Component provides a fast, visual overview of your brand's approved color palette.

By displaying the HEX values managed in your Color Manager, it creates a simple, attractive reference that helps designers, developers, and collaborators apply your brand colors consistently across every project.