The Color Manager is where you build your brand’s color palettes — primary colors, secondary colors, neutrals, accents, and any other color groups your brand uses. You can create palettes, add swatches, reorder everything with drag‑and‑drop, and maintain a quick HEX list for fast reference.

This tool is perfect for designers and teams who want a clean, structured, professional color system inside their brand guide.

🌟 What You Can Do in the Color Manager

From this screen, you can:

• Create multiple color palettes
• Add swatches to each palette
• Store HEX, RGB, CMYK, and PMS values
• Reorder palettes and swatches with drag‑and‑drop
• Edit or delete any palette or swatch
• Maintain a quick HEX list for fast access
• Save all color data in one click

It’s a flexible, visual system for managing brand colors.

🧭 Page Overview

When you open the Color Manager, you’ll see two main sections:

🎨 1. Color Palettes

This is where you organize your brand’s colors into groups.
Each palette appears as a collapsible card containing:

• Palette name (e.g., “Primary Colors”, “Neutrals”, “Accent Colors”)
• Create Swatch button
• Delete Palette button
• A list of swatches inside the palette

You can expand or collapse each palette to keep your workspace tidy.

🎨 2. Quick HEX List

A simple text area where you can paste or type HEX values.
This is useful for:

• Designers who want a fast reference list
• Importing/exporting colors
• Keeping a lightweight list separate from full palettes

You can enter HEX values separated by commas or new lines.

➕ Creating a New Palette

Click Create Palette to open the modal.

Enter a palette name — for example:

• Brand Primary Colors
• Accent Colors
• Neutral Grays
• Accessibility Colors

Once created, the palette appears in your list and is ready for swatches.

🎨 Adding a Swatch

Inside any palette, click Create Swatch to open the swatch modal.

You can enter:

• Swatch Name — e.g., “Primary Blue”
• HEX — e.g., #298CCA
• RGB — e.g., 41,140,202
• CMYK — e.g., 80,30,0,0
• PMS — Pantone reference

A live preview box shows the color as you type.

Once added, the swatch appears in the palette.

✏️ Editing a Swatch

Click the pencil icon next to any swatch to open the edit modal.

You can update any field, including HEX, RGB, CMYK, PMS, and the swatch name.

🗑 Deleting a Swatch

Click the trash icon next to a swatch to remove it.

You’ll be asked to confirm before it’s deleted.

🧹 Deleting a Palette

Click Delete Palette inside the palette header.

This removes the palette and all its swatches.

🔁 Drag‑and‑Drop Reordering

The Color Manager supports drag‑and‑drop for:

Palettes

Drag the palette header to reorder your palette list.

Swatches

Drag the ⋮⋮ handle next to any swatch to reorder it within its palette.

This lets you control the order in which colors appear in your brand guide.

📝 Quick HEX List

The Quick HEX List is a simple text area where you can paste or type HEX values.

Examples:

#298CCA 
#F4F4F4 
#FF8034 
#1A1A1A

You can enter:

• One HEX per line
• Comma‑separated HEX values
• Mixed formatting — the system cleans it up when saving

This list is saved along with your palettes.

💾 Saving Your Colors

When you’re ready:

1. Click Save Colors in the bottom‑right corner
2. All palettes, swatches, and HEX list entries are saved
3. Your brand guide will now use the updated color system

Everything is stored together so your color system stays consistent.

🔐 Permissions

Only owners and editors can access the Color Manager.

View‑only users cannot modify palettes or swatches.

🎯 Summary

The Color Manager helps you:

• Build structured color palettes
• Document HEX, RGB, CMYK, and PMS values
• Organize swatches visually
• Maintain a quick HEX reference list
• Keep your brand’s color system clean and consistent

It’s a powerful, intuitive tool for maintaining a professional brand identity.