Theme Colors

Inspired by the vibrant color palettes of Tailwind CSS, Powder offers 22 unique style variations, transcending conventional standards and providing a design canvas where creativity knows no bounds.

Each variation includes six colors, as defined in theme.json below: Base, Contrast, Primary, Secondary, Tertiary, and Quaternary.

Default Palette

{
	"settings": {
		"color": {
			"palette": [
				{
					"color": "#ffffff",
					"name": "Base",
					"slug": "base"
				},
				{
					"color": "#0a0a0a",
					"name": "Contrast",
					"slug": "contrast"
				},
				{
					"color": "#6d28d9",
					"name": "Primary",
					"slug": "primary"
				},
				{
					"color": "#8b5cf6",
					"name": "Secondary",
					"slug": "secondary"
				},
				{
					"color": "#c4b5fd",
					"name": "Tertiary",
					"slug": "tertiary"
				},
				{
					"color": "#ede9fe",
					"name": "Quaternary",
					"slug": "quaternary"
				}
			]
		}
	}
}

This code yields a set of preset variables for the colors:

--wp--preset--color--base: #ffffff;
--wp--preset--color--contrast: #0a0a0a;
--wp--preset--color--primary: #be185d;
--wp--preset--color--secondary: #ec4899;
--wp--preset--color--tertiary: #f9a8d4;
--wp--preset--color--quaternary: #fce7f3;

The default palette in the Powder theme mirrors Tailwind CSS’s Violet shades. Below is a screenshot of its appearance in the editor:

You can choose from 22 variations by going to Appearance > Editor > Styles and selecting your favorite color palette.