Palette Merger
Merge two or more color palettes into a single unified palette. Useful for combining brand colors, theme tokens, and design system libraries.
What the Palette Merger Does
Combine two or more color palettes into a single unified set. Add palettes by pasting hex codes or loading presets, then merge them with optional duplicate removal. The merged result shows all colors in a preview bar plus individual swatches with export options.
How Merging Works
The tool concatenates all colors from all input palettes in order. If duplicate removal is enabled, it checks each new color against already-merged colors using HSL distance. Colors within your similarity threshold are skipped, keeping only the first occurrence.
Duplicate removal settings
- Very Strict (5%): Only removes near-identical colors (off by 1-2 RGB values)
- Strict (10%): Removes colors that are very similar but not obviously so
- Moderate (15%): Good balance for consolidating design tokens
- Loose (20%): Aggressive consolidation — removes colors that are visibly similar
- Very Loose (30%): Maximum consolidation — keeps only distinctly different colors
Real Merge Scenarios
Combining Brand and UI Palettes
A company has brand colors (logo, marketing) and separate UI colors (buttons, states). They merge both to create a master palette for their design system. With duplicate removal on, they discover their "primary blue" exists in both palettes with slightly different values — time to standardize.
Consolidating Team Contributions
Four designers each created color palettes for different features. Merging them reveals 23 total colors, but with 15% similarity threshold, only 14 are unique. The team agrees on the 14-color consolidated set for their shared library.
Migrating from Multiple Projects
Someone is consolidating three old projects into one codebase. Each has its own color variables. They extract all colors, merge them here, and discover significant overlap. The new unified palette is half the size of the three combined.
Building a Comprehensive Token Set
A design team merges their primary, secondary, neutral, semantic (success/warning/error), and brand palettes into one master reference. The merged preview shows all 32 colors in sequence, helping them spot gaps or redundancies.
Vendor Color Harmonization
A company works with multiple agencies, each using slightly different color values. They merge all agency palettes, identify the variations, and publish an official consolidated palette that everyone must use going forward.
Tips for Clean Merges
Name your palettes before merging. It's easier to track which colors came from where if you label them "Brand," "UI," "Marketing," etc. The tool shows palette names in the preview.
Start with duplicate removal ON. Unless you specifically want all colors (including duplicates), enable removal. You can always see what was removed and adjust the threshold.
Review the merged preview bar. The horizontal color strip shows all merged colors in sequence. If you see adjacent colors that look identical, your threshold might be too loose.
Use presets to test the workflow. The Ocean, Sunset, Forest, and Warm presets let you experiment with merging before loading your actual palettes.
Export before making decisions. Download the merged palette as JSON or CSS, then review it in your actual design tool or codebase. Sometimes context reveals issues the preview doesn't show.
Export Formats
Comma-Separated List
#0077b6, #00b4d8, #90e0ef, #ff6b6b, #feca57
Simple format for pasting into other tools, docs, or chat messages.
CSS Variables
:root {
--color-1: #0077b6;
--color-2: #00b4d8;
--color-3: #90e0ef;
}Ready to drop into your global CSS. Reference as var(--color-1).
Individual Color Data
Each merged color shows its hex value and lightness percentage. This helps you understand the distribution — whether your merged palette is heavy on darks, lights, or balanced.
Frequently Asked Questions
How many palettes can I merge?
There's no hard limit — add as many as you need. However, merging more than 5-6 palettes often produces unwieldy results. Consider merging in stages: combine related palettes first, then merge the results.
What order do merged colors appear in?
Colors appear in the order you added the palettes, with each palette's colors in their original order. If you need a different arrangement, use the Palette Sorter after merging.
Can I undo a merge?
The tool doesn't have undo functionality, but you can keep your original palettes in the list and re-merge with different settings. Or just reload the page and start fresh.
Why did duplicate removal skip some colors that look similar?
The similarity calculation uses HSL distance with weighted components. Two colors might look similar but have different hue values that push them over the threshold. Try increasing the threshold percentage for more aggressive deduplication.
Can I edit colors after merging?
The merged result is read-only in this tool. Copy the merged colors and paste them into another tool (like the Color Palette Generator) if you need to modify individual values.
How do I save my merged palette?
Use the Copy All button to grab the hex list, or download as CSS/JSON. For long-term palette management, use the Favorite Colors Manager or Palette Export Tool.
What happens if I merge palettes with the same colors?
With duplicate removal ON, each unique color appears only once. With it OFF, you'll see every occurrence — so if three palettes contain #3b82f6, you'll get it three times in the merge.
When to Use This vs. Other Tools
Use this Palette Merger when you need to combine multiple distinct palettes into one set with optional deduplication.
Use the Palette Duplicate Finder when you have one large palette and want to find/remove internal duplicates without merging separate sources.
Use the Palette Comparison Tool when you want to evaluate palettes side-by-side before deciding whether to merge them.
Use the Palette Sorter when you want to reorganize merged colors by hue, lightness, or saturation after combining them.
Other Free Color Tools
Color Palette Export Tool
Export your color palette as CSS variables, JSON, or plain text. Seamlessly transfer your colors into code, design tools, or documentation.
Favorite Colors Manager
Save, organize, and manage your favorite color swatches locally in the browser. Build a personal color library without signing up for anything.
Palette Duplicate Color Finder
Detect duplicate or near-identical colors within a color palette. Keep your design system clean and free of redundant swatches.
Custom Color Palette Generator
Create beautiful, harmonious color palettes for your projects.
Color Picker
Pick any color using an interactive palette or enter HEX, RGB, or HSL values. Copy your color code instantly for use in any design or development project.
Color Palette Generator from Base Color
Generate a beautiful, harmonious color palette from a single base color. Perfect for building consistent UI color schemes and brand identities.