Custom Colors, Gradients, Duotone Filters

When it comes to website design, color is one of the most critical factors. Colors set the tone of a website and influence the overall perception of a website. Therefore, when creating an effective website design, it’s essential to use colors that reflect your brand and support your message.

WordPress provides new methods inside theme.json for setting custom color elements: palette, gradient, and duotone filters. Enabling/disabling core color options can be set to true/false in the following:

"settings": {
	"color": {
		"custom": true,
		"customDuotone": true,
		"customGradient": true,
		"defaultGradients": true,
		"defaultPalette": true,
	}
}

Color Palette

The Frost WordPress theme sets six custom colors: Black, Primary, Secondary, Tertiary, White, Gray. Here is the code used in theme.json:

"settings": {
	"color": {
		"palette": [
			{
				"name": "Black",
				"slug": "black",
				"color": "#000"
			},
			{
				"name": "Primary",
				"slug": "primary",
				"color": "#990099"
			},
			{
				"name": "Secondary",
				"slug": "secondary",
				"color": "#0099ff"
			},
			{
				"name": "Tertiary",
				"slug": "tertiary",
				"color": "#00cccc"
			},
			{
				"name": "Gray",
				"slug": "gray",
				"color": "#eee"
			},
			{
				"name": "White",
				"slug": "white",
				"color": "#fff"
			}
		]
	}
}

Gradients

The Frost WordPress theme sets three custom gradients: Black to Primary, Black to Secondary, Black to Tertiary. Here is the code used in theme.json:

"settings": {
	"color": {
		"gradients": [
			{
				"name": "Black to Primary",
				"slug": "black-primary",
				"gradient": "linear-gradient(135deg,var(--wp--preset--color--black) 50%,var(--wp--preset--color--primary) 100%)"
			},
			{
				"name": "Black to Secondary",
				"slug": "black-secondary",
				"gradient": "linear-gradient(135deg,var(--wp--preset--color--black) 50%,var(--wp--preset--color--secondary) 100%)"
			},
			{
				"name": "Black to Tertiary",
				"slug": "black-tertiary",
				"gradient": "linear-gradient(135deg,var(--wp--preset--color--black) 50%,var(--wp--preset--color--tertiary) 100%)"
			}
		]
	}
}

Duotone Filters

The Frost WordPress theme sets three duotone filers: Black and Primary, Black and Secondary, Black and Tertiary. Here is the code used in theme.json:

"settings": {
	"color": {
		"duotone": [
			{
				"name": "Black and Primary",
				"slug": "black-and-primary",
				"colors": [ "#000", "#990099" ]
			},
			{
				"name": "Black and Secondary",
				"slug": "black-and-secondary",
				"colors": [ "#000", "#0099ff" ]
			},
			{
				"name": "Black and Tertiary",
				"slug": "black-and-tertiary",
					"colors": [ "#000", "#00cccc" ]
			}
		]
	}
}