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,
}
}
Code language: JavaScript (javascript)Generally, these options should be set to true—which provides end-users the ability to customize the look and feel of their website. However, a freelancer or agency may limit the client’s ability to change colors; setting these options to false is an intelligent decision.
Color Palette
The Frost theme for WordPress 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"
}
]
}
}
Code language: JavaScript (javascript)Gradients
Custom gradients can also be set in theme.json. Frost defines: Black to Primary, Black to Secondary, Black to Tertiary. Here is the code used:
"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%)"
}
]
}
}
Code language: JavaScript (javascript)Duotone Filters
Do you ever look at a photo on a website and think, “Wow, how did they get that effect?” Chances are, a duotone filter to create this desired look. These filters result in striking visuals with high contrast and bold colors—adding intrigue and drama to an image.
The Frost 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" ]
}
]
}
}
Code language: JavaScript (javascript)As WordPress continues to evolve, we anticipate builders will receive additional settings and control. These changes will matter because, after all, colors set the tone for a website and are a crucial piece to delivering a delightful experience for visitors and potential customers.
