This free WordPress color palette generator helps you build a complete color system for your block theme. Pick a base color or start from a Strakture preset, choose a harmony mode, and export theme.json-ready settings you can drop into your theme’s styles folder. Every palette uses the same slug structure that WordPress Full Site Editing themes expect.
How to Use This WordPress Color Palette Generator
Creating a cohesive color palette for a WordPress block theme normally means editing theme.json by hand, converting hex codes to HSL, and testing contrast ratios one pair at a time. This tool automates the entire process in four steps:
- Pick a base color. Choose any color with the picker, enter a hex code, or start from one of 13 Strakture presets designed for real WordPress sites.
- Select a harmony mode. The generator supports complementary, analogous, triadic, split-complementary, and monochromatic palettes. Each mode produces a mathematically balanced set of colors.
- Adjust and preview. Fine-tune individual swatches. The live preview shows how your colors look applied to WordPress blocks like buttons, headings, and backgrounds.
- Export. Download a theme.json snippet with the correct
settings.color.palettestructure, or copy CSS custom properties you can paste into a child theme stylesheet.
The exported palette follows WordPress’s slug naming convention (primary, secondary, base, contrast, plus five neutral shades) so it works immediately with any Full Site Editing theme. No manual slug mapping required.
What Is a WordPress Color Palette?
A WordPress color palette is a predefined set of colors declared in a theme’s theme.json file under settings.color.palette. Each color gets a name, a slug, and a hex value. WordPress converts these into CSS custom properties (like --wp--preset--color--primary) that cascade to every block on the site. When a user selects “Primary” in the block editor’s color picker, WordPress applies the corresponding custom property rather than a hardcoded hex value.
This system matters because it creates a single source of truth for color across an entire site. According to the WordPress Theme Handbook, theme.json is the canonical location for all design tokens including colors, typography, and spacing. Change one palette value in theme.json and every block, pattern, and template part updates automatically.
Why Color Harmony Modes Matter
Color harmony is the principle that certain color combinations are inherently more visually balanced than others. Design research from the Interaction Design Foundation shows that harmonious color schemes reduce cognitive load and increase perceived trustworthiness of a design. This tool implements five standard harmony modes:
| Harmony Mode | How It Works | Best For |
|---|---|---|
| Complementary | Two colors opposite on the color wheel (180 degrees apart) | High-contrast CTAs, bold brand statements |
| Analogous | Three colors adjacent on the wheel (30 degrees apart) | Calm, cohesive layouts like portfolios and blogs |
| Triadic | Three colors evenly spaced (120 degrees apart) | Vibrant, balanced designs with variety |
| Split-Complementary | A base color plus two colors adjacent to its complement | Visual tension without the harshness of pure complementary |
| Monochromatic | Variations in lightness and saturation of a single hue | Elegant, minimal designs with subtle depth |
WordPress Color Palette vs. CSS Custom Properties
WordPress block themes use two layers of color definition. The palette layer lives in theme.json and defines the available colors in the editor’s color picker. The CSS layer is auto-generated by WordPress core, converting each palette entry into a custom property (e.g., --wp--preset--color--primary: #fa6262). This tool exports both formats so you can use whichever approach fits your workflow. If you are building a block theme from scratch, use the theme.json export. If you are adding colors to a child theme or custom stylesheet, use the CSS custom properties export.
How many colors should a WordPress theme palette have?
Most well-designed WordPress themes use 7 to 10 palette colors: a primary brand color, a secondary accent, a base (background) color, a contrast (text) color, and 3 to 5 neutral shades for borders, subtle backgrounds, and secondary text. The WordPress Core team’s Twenty Twenty-Five theme uses exactly this structure. This generator follows the same convention.
Will this work with any WordPress theme?
The theme.json export works with any block theme (Full Site Editing theme) running WordPress 6.0 or later. Classic themes that do not use theme.json can still use the CSS custom properties export by pasting the variables into their stylesheet. Page builder themes (Elementor, Divi) have their own color systems and would need manual mapping.
What is the difference between theme.json v2 and v3?
Theme.json version 2 was introduced in WordPress 5.9 and version 3 in WordPress 6.6. The main difference for color palettes is that v3 added the defaultFontSizes and defaultSpacingSizes flags and refined how custom properties cascade. The color palette structure itself (settings.color.palette) is identical in both versions. This tool exports v3 format with the $schema reference included.
Can I use this tool for WooCommerce stores?
Yes. WooCommerce blocks inherit colors from your theme’s palette. If your WooCommerce store uses a block theme, the palette exported by this tool will apply to product grids, cart blocks, and checkout blocks automatically. The contrast color is especially important for WooCommerce because it controls text readability on product cards and buttons.
Built by Strakture. See our guide to WordPress design tokens and WordPress design systems for more on building consistent block theme sites.