The Hex Gallery Component is designed specifically for showcasing color palettes. It automatically displays a grid of color swatches based on the HEX values you’ve added in the Color Manager.
This makes it perfect for brand color sections, palette overviews, and visual color references.

Unlike the standard Gallery Component, the Hex Gallery doesn’t use images — it generates swatches directly from HEX codes.

🌟 What You Can Do with the Hex Gallery Component

Inside this component, you can:

• Add a title, subtitle, and category label
• Choose how many swatches appear per row
• Customize colors for titles, text, labels, and background
• Automatically display all HEX values from your Color Manager
• Maintain brand consistency with theme‑aware color options

It’s a simple, elegant way to present your brand’s color system.

🧭 Component Overview

When you open the Hex Gallery Component in the Component Editor, you’ll see two main sections:

1. Gallery Text Settings

These fields control the text that appears above the color swatches.

Title

A large heading for the section.
Examples:

• “Brand Colors”
• “Primary Palette”
• “Extended Color System”

Subtitle

A smaller supporting line.
Examples:

• “Core brand colors”
• “Use these colors for digital and print applications”

Category Label

A label that appears above each swatch.
Examples:

• “Primary”
• “Secondary”
• “Accent”

Images Per Row

Controls how many swatches appear in each row:

• 2 per row — large swatches
• 3 per row — balanced
• 4 per row — compact
• 5 per row — tighter grid
• 6 per row — dense
• 8 per row — very compact
• 10 per row — micro‑swatches

This gives you full control over the visual density of your palette.

2. Color Settings

You can customize four color fields:

Title Color

Controls the color of the main gallery title.

Text Color

Controls the subtitle and general text.

Category Label Color

Controls the label above each swatch.

Background Color

Sets the background behind the entire gallery section.

All color fields support:

• HEX values
• Theme color presets
• Leaving blank to use default styling

This ensures your color gallery stays visually consistent with your brand.

🎨 Theme‑Aware Color Options

All color pickers automatically pull from your brand’s theme colors, including:

• Light / dark backgrounds
• Highlight colors
• Typography colors

This makes it easy to maintain a cohesive visual style across your entire guide.

💾 Saving Your Changes

As you edit:

• Fields update the component’s JSON automatically
• The preview refreshes in real time
• Click Save Component to finalize your changes

Your hex gallery will now appear on the page exactly as configured.

🎯 Summary

The Hex Gallery Component helps you:

• Display your brand’s color palette in a clean, responsive grid
• Add titles, subtitles, and category labels
• Control layout density with swatches‑per‑row
• Customize colors for full brand consistency
• Automatically pull HEX values from your Color Manager

It’s the perfect component for presenting your brand’s color system clearly and professionally.