Theme Colors

Suede features a refined color palette of Black, White, and Accent.

Rather than providing an overwhelming collection of presets, the palette is intentionally restrained to promote consistency, strengthen visual hierarchy, and make thoughtful design decisions easier throughout your website.

The color palette is registered in the theme’s theme.json file, ensuring consistent defaults across Global Styles and easy to extend and customize.

Each core color is also available in a series of refined opacity variants, ranging from 10% to 80%. These presets make it easy to introduce depth, emphasis, and subtle visual hierarchy without expanding the palette, making them ideal for borders, backgrounds, overlays, and other supporting interface elements.

Default Palette

{
	"settings": {
		"color": {
			"palette": [
				{ "color": "#000000", "name": "Black", "slug": "black" },
				{ "color": "#000000cc", "name": "Black 80", "slug": "black-80" },
				{ "color": "#00000099", "name": "Black 60", "slug": "black-60" },
				{ "color": "#00000080", "name": "Black 50", "slug": "black-50" },
				{ "color": "#00000026", "name": "Black 15", "slug": "black-15" },
				{ "color": "#0000001a", "name": "Black 10", "slug": "black-10" },
				{ "color": "#ffffff", "name": "White", "slug": "white" },
				{ "color": "#ffffffcc", "name": "White 80", "slug": "white-80" },
				{ "color": "#ffffff99", "name": "White 60", "slug": "white-60" },
				{ "color": "#ffffff80", "name": "White 50", "slug": "white-50" },
				{ "color": "#ffffff26", "name": "White 15", "slug": "white-15" },
				{ "color": "#ffffff1a", "name": "White 10", "slug": "white-10" },
				{ "color": "#aa6600", "name": "Accent", "slug": "accent" },
				{ "color": "#aa6600cc", "name": "Accent 80", "slug": "accent-80" },
				{ "color": "#aa660099", "name": "Accent 60", "slug": "accent-60" },
				{ "color": "#aa660080", "name": "Accent 50", "slug": "accent-50" },
				{ "color": "#aa660033", "name": "Accent 20", "slug": "accent-20" },
				{ "color": "#aa66001a", "name": "Accent 10", "slug": "accent-10" }
			]
		}
	}
}

Generated CSS variables for the Black color palette:

--wp--preset--color--black: #000000;
--wp--preset--color--black-80: #000000cc;
--wp--preset--color--black-60: #00000099;
--wp--preset--color--black-50: #00000080;
--wp--preset--color--black-15: #00000026;
--wp--preset--color--black-10: #0000001a;

Generated CSS variables for the White color palette:

--wp--preset--color--white: #ffffff;
--wp--preset--color--white-80: #ffffffcc;
--wp--preset--color--white-60: #ffffff99;
--wp--preset--color--white-50: #ffffff80;
--wp--preset--color--white-15: #ffffff26;
--wp--preset--color--white-10: #ffffff1a;

Generated CSS variables for the Accent color palette:

--wp--preset--color--accent: #aa6600;
--wp--preset--color--accent-80: #aa6600cc;
--wp--preset--color--accent-60: #aa660099;
--wp--preset--color--accent-50: #aa660080;
--wp--preset--color--accent-20: #aa660033;
--wp--preset--color--accent-10: #aa66001a;