Pantone Color Palette Builder
Build a 5-color palette from any base color using one of five classical harmonies: complementary, analogous, triadic, tetradic, or monochromatic. Each palette color shows its closest Pantone Solid Coated match with a Delta E 2000 score. Lock individual colors to iterate, export as CSS or JSON, and copy a share URL that encodes the whole palette.
Loading palette...
What is a Pantone color palette?
A Pantone color palette is a curated set of colors, each specified as a Pantone code, chosen to work together in a design. Unlike a digital palette, which is defined as a list of HEX or RGB values, a Pantone palette is defined by ink codes — which means it can be reproduced identically in print, packaging, textiles, and painted surfaces, not just on screens. This makes Pantone palettes particularly valuable for brand systems that span multiple media: a brand palette might specify one Pantone code for print, a matching TCX code for textiles, and a Pantone Paint code for interior applications, all mapping to a single visual identity.
Building a Pantone palette is harder than building a digital one, because Pantone codes have specific structural relationships to each other and to their print behavior. Two Pantone blues with similar HEX approximations can look very different on press because their ink mixes behave differently under different paper stocks. This tool helps by generating harmonies in HSL — which is universally understood — then translating each generated color to its closest Pantone Solid Coated match, so you can see both the digital palette and the print palette side by side.
The five harmony modes
- Complementary — base color plus the color 180° opposite on the color wheel. Produces the highest contrast pairing. In a 5-color palette this becomes the base color, its complement, and lightness variations of both. Use for high-impact hero sections, CTAs, and any design that needs punch.
- Analogous — colors that sit within 30° of the base hue. Calm, cohesive, and easy to balance. Use for editorial layouts, background-heavy interfaces, and any design that needs to feel unified rather than dynamic.
- Triadic — three colors at 120° apart, forming an equilateral triangle on the color wheel. Vibrant and balanced. Use for children's brands, sports, playful UI, and any design that needs energy without the tension of complementary pairs.
- Tetradic — two complementary pairs at 90° from each other. Richest, most complex, hardest to balance. Use when you need two distinct accent pairs and can dedicate visual space to each.
- Monochromatic — single hue with varied lightness. Safest and most sophisticated. Use for luxury, editorial, and any design that needs cohesion without becoming monotonous.
How the palette is generated
The base color is converted to HSL, and the harmony is computed by rotating the hue channel according to the mode: complementary rotates 180°, analogous rotates −30° to +30° in 15° steps, triadic rotates 0° / 120° / 240° with two additional lightness variants, tetradic rotates 0° / 90° / 180° / 270° plus a neutral, and monochromatic keeps the hue fixed at five lightness levels. The resulting HSL triplets are converted back to RGB and displayed as HEX.
Each color is then matched to its closest Pantone Solid Coated code via Delta E 2000. Because the harmonies are computed in HSL — which is not perceptually uniform — some harmonies may produce palettes where one color appears much brighter or darker than the others at the same HSL lightness value. This is a known limitation of HSL-based harmony generation; more sophisticated perceptual models (OKLCH, HCL) are on the roadmap for future versions.
Slot locking and iterative design
Each of the five slots has a lock button. Locking a slot freezes that color — it stays the same even when you change the base color or harmony. This lets you build palettes iteratively: generate a harmony, lock a color you love, switch to a different base color, and see the same locked color in a new context. Unlocked slots regenerate on every change. Lock all five slots and edit each one individually to build a completely custom palette.
Export and sharing
Three export formats: HEX list is a plain list of five HEX values suitable for Figma, Sketch, or any design tool's color input. CSS variables generates a :root block with one variable per slot, ready to paste into a stylesheet. JSON generates a plain object suitable for programmatic consumption. The Copy share URL button encodes all five colors in the URL, so the palette can be bookmarked or shared — anyone opening the link will see the exact same palette.
Use cases
- Brand palette foundations. Generate a starting palette from a single brand color, then match each color to its closest Pantone for print specifications.
- Editorial illustration palettes. Generate cohesive palettes for illustrations and data visualizations that need to work within a Pantone-based brand system.
- Interior design coordination. Generate palettes for interior projects, matching each color to a Pantone for paint and textile specifications.
- Packaging design. Build palettes for packaging systems where every color must match a specific Pantone for print consistency.
- Design system tokens. Generate accessible color variations from a single Pantone base, then match each variation to a printable Pantone for physical UI elements.
- Client presentations. Quickly generate alternative palettes for a client, share a URL, and iterate through favorites together.
Common mistakes
- Assuming a harmony from HSL will look perceptually balanced — HSL is not perceptually uniform, so some harmonies will need manual adjustment after generation.
- Trusting Pantone matches for the extreme palette colors — very light or dark colors often match poorly to Pantone because the library is concentrated in mid-tone brand colors.
- Using tetradic when a simpler harmony would work — tetradic is genuinely hard to balance and often produces palettes that feel chaotic unless the designer dedicates real visual space to each color.
- Locking all slots and never re-rolling — the palette becomes stagnant; lock only the colors you love, let the others regenerate.
- Assuming a shared URL will look identical in every browser — the HEX values are identical, but rendering depends on each browser's color management.
Frequently asked questions
What is a color harmony?
A color harmony is a set of colors chosen according to a geometric relationship on the color wheel. Complementary colors sit opposite each other (180° apart), analogous colors sit next to each other (within 30°), triadic colors form an equilateral triangle (120° apart), tetradic colors form a rectangle (90° apart in pairs), and monochromatic colors share a single hue with different lightness or saturation. Harmonies exist because they reliably produce palettes that feel intentional rather than accidental — the geometric relationship does the design work.
Which harmony should I use?
Complementary is the highest-contrast and most attention-grabbing — good for calls to action and hero sections. Analogous is the calmest and most cohesive — good for editorial and background-heavy design. Triadic is balanced and vibrant — good for children�s brands, sports, and playful UI. Tetradic is rich and complex but hardest to balance — good when you need two complementary pairs and can dedicate space to each. Monochromatic is the safest and most sophisticated — good for luxury, editorial, and any design that needs a cohesive but not boring palette.
What does the lock button do?
Locking a slot freezes that color so it stays the same even when you change the base color or harmony. This lets you build palettes iteratively — find one color you love, lock it, then generate variations around it. Unlocked slots regenerate whenever the base or harmony changes. Lock all five slots to build a custom palette from scratch by editing each slot individually.
How are the Pantone matches calculated?
Each palette color is converted to CIELAB, then compared against all 2,371 Pantone Solid Coated colors using Delta E 2000 — the CIE standard for perceptual color difference. The closest match is shown with its ΔE value. A ΔE under 2 means very close, under 5 means close, over 10 means loosely related. Note that harmonies are computed in HSL, which is not perceptually uniform — so a perceptually even palette may not be what you see from a pure HSL rotation. If perceptual evenness matters, use the palette as a starting point and nudge individual colors after the fact.
Can I share a palette?
Yes — click the "Copy share URL" button to get a link that encodes all five colors. Anyone with the link will see the exact same palette, pre-loaded. This is useful for design reviews, client presentations, and saving palettes in a bookmark. The URL structure is /pantone-color-palette/?palette=HEX1,HEX2,HEX3,HEX4,HEX5 — you can also construct one manually if you have specific HEX values in mind.
What is the difference between monochromatic and analogous?
Monochromatic uses a single hue with variations only in lightness (and optionally saturation). Analogous uses multiple hues that sit within about 30° of each other on the color wheel. Both feel cohesive, but monochromatic is more restrained — it looks like "a single color in different shades" — while analogous is more colorful, with visible hue variation. Analogous is warmer and more varied; monochromatic is calmer and more formal.
Why do some harmonies look uneven?
Because HSL (the model used here) is not perceptually uniform. A hue rotation of 120° produces a triadic palette where one color may appear much brighter than the others, because yellow naturally appears brighter than blue at the same HSL lightness. This is a well-known limitation of HSL-based harmony tools. More sophisticated systems (OKLCH, HCL, or CAM16-UCS) produce perceptually even palettes but are not yet universally supported in browsers — future versions of this tool may add them.