Powder offers a beautiful palette of six colors inspired by Tailwind CSS: Primary, Secondary, Tertiary, Quaternary, Base, and Contrast.

These colors, defined in theme.json, ensure balance and consistency, providing a solid foundation for building your website with a cohesive and professional design, while keeping the process simple and effortless.

Default Palette

{
	"settings": {
		"color": {
			"palette": [
				{
					"color": "#4d179a",
					"name": "Primary",
					"slug": "primary"
				},
				{
					"color": "#7f22fe",
					"name": "Secondary",
					"slug": "secondary"
				},
				{
					"color": "#c4b4ff",
					"name": "Tertiary",
					"slug": "tertiary"
				},
				{
					"color": "#ede9fe",
					"name": "Quaternary",
					"slug": "quaternary"
				},
				{
					"color": "#ffffff",
					"name": "Base",
					"slug": "base"
				},
				{
					"color": "#000000",
					"name": "Contrast",
					"slug": "contrast"
				}
			]
		}
	}
}

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

--wp--preset--color--primary: #4d179a;
--wp--preset--color--secondary: #7f22fe;
--wp--preset--color--tertiary: #c4b4ff;
--wp--preset--color--quaternary: #ede9fe;
--wp--preset--color--base: #ffffff;
--wp--preset--color--contrast: #000000;