Colors serve as more than just decorative elements; they are functional tools that play a crucial role in website design. By breathing life into a site, colors enhance its visual appeal and shape its overall mood.
Thanks to the WordPress site editor and block themes, working with colors has become more accessible. These intuitive tools empower website builders to implement various color palettes and effortlessly craft visually striking, user-friendly websites.
Let’s dive into the world of colors, gradients, and duotone filters and discover how they can transform your WordPress website-building experience.
Feel free to watch the video version of this article or continue reading.
Table of Contents
Color Settings
WordPress offers a convenient feature within theme.json that enables the customization of color elements, including palette, gradient, and duotone filters. By utilizing this functionality, users can effortlessly adjust the visual appearance of their website.
"settings": {
"color": {
"custom": true,
"customDuotone": true,
"customGradient": true,
"defaultDuotone": true,
"defaultGradients": true,
"defaultPalette": true,
}
}
Code language: JavaScript (javascript)Below is an explanation what each of these settings allow:
custom: This setting determines whether or not custom colors are available for use in the editor.customDuotone: This setting determines whether or not custom duotone filters are available for use in the editor.customGradient: This setting determines whether or not custom gradients are available for use in the editor.defaultDuotone: This setting determines whether or not the default WordPress duotone filters are available for use in the editor.defaultGradients: This setting determines whether or not the default WordPress gradients are available for use in the editor.defaultPalette: This setting determines whether or not the default WordPress palette is available for use in the editor.
While it is recommended to keep these options enabled (“true”), there may be scenarios where a builder or agency wishes to restrict the client’s color customization capabilities. In such cases, setting these options to “false” is advisable to ensure a more controlled and consistent design approach.
This is one of many ways to curate the WordPress editor and can help create a more custom experience for site owners and maintainers.
Color Palette
Implementing a color palette in a block theme is a straightforward process. The Frost theme defines five custom colors: Base, Contrast, Primary, Secondary, and Neutral. Below is the code snippet utilized to register these colors in the theme.json file:
"settings": {
"color": {
"palette": [
{
"color": "#ffffff",
"name": "Base",
"slug": "base"
},
{
"color": "#000000",
"name": "Contrast",
"slug": "contrast"
},
{
"color": "#0000ff",
"name": "Primary",
"slug": "primary"
},
{
"color": "#000099",
"name": "Secondary",
"slug": "secondary"
},
{
"color": "#eeeeee",
"name": "Neutral",
"slug": "neutral"
}
]
}
}
Code language: JavaScript (javascript)By using this code snippet, the Frost theme becomes even better. It registers the specified color palette within the theme.json file, ensuring a consistent and visually appealing look for the website.
WordPress Gradients
Color gradients are a design technique that smoothly transitions from one color to another. They are commonly used in various design elements, including backgrounds, images, and user interfaces, to add depth, movement, or visual interest.
Example of a gradient background seen in the Frost WordPress theme.
In the WordPress Block Editor, you can select from a range of default core gradients. Alternatively, you can customize the gradients specifically for your theme by overriding the default options. This allows you to generate patterns that align precisely with your design requirements, ensuring a cohesive and visually appealing website.
Carolina Nymark’s comprehensive guide on gradients is an invaluable resource in Full Site Editing. Her lesson on theme.json color options provides a detailed and insightful overview of incorporating gradients into your website design.
Her expertise and guidance enable you to understand and leverage gradients effectively. By incorporating gradients to their full potential, you can create visually stunning and harmonious designs for your website.
Add Custom Gradient via Theme.json
With the introduction of theme.json, builders can now define custom gradients within the Block Editor. This empowers you to create unique and personalized gradient options for your website. Here’s an example of the code needed to add a custom gradient named “Tiffany to Royal”:
{
"version": 2,
"settings": {
"color": {
"customGradient": true,
"gradients": [
{
"name": "Tiffany to Royal",
"slug": "tiffany-royal",
"gradient": "linear-gradient(135deg,rgb(14,202,212) 0%,rgb(126,92,239) 100%)"
}
],
}
}
}
Code language: JSON / JSON with Comments (json)Below is a group block with the custom gradient applied to the background:
–wp–preset–tiffany-to-royal
linear-gradient(135deg,rgb(14,202,212) 0%,rgb(126,92,239) 100%)
Core Blocks That Include Gradient Backgrounds
Button, code, column, columns, comment author name, comment content, comment date, comment edit link, comment reply link, comment, comments next page, comments page numbers, comments pagination, comments previous page, comments title, file, gallery, group, heading, latest posts, list, media & text, next page, no results, page numbers, pagination, paragraph, post author, post author biography, post author name, post comments count, post comments form, post date, post excerpt, post template, post terms, post title, preformatted, previous page, pullquote, query title, quote, read more, search, separator, site tagline, site title, social icons, table, table of contents, and verse. Additionally, the cover block supports gradients as overlays. (source)
Duotone Filters
Have you ever encountered a captivating photo on a website and wondered how it achieved that stunning effect? Well, they employed a duotone filter to create that desired look. Duotone filters are a powerful tool for producing visually striking images with high contrast and vibrant colors, instantly adding intrigue and drama.
Let’s take the Frost theme as an example, which includes three distinctive duotone filters: Black and White, Primary and White, and Secondary and White. The following code snippet showcases how these filters are implemented in the theme.json file:
"settings": {
"color": {
"duotone": [
{
"name": "Black and White",
"slug": "black-and-white",
"colors": [ "#000000", "#ffffff" ]
},
{
"name": "Primary and White",
"slug": "primary-and-white",
"colors": [ "#0000ff", "#ffffff" ]
},
{
"name": "Secondary and White",
"slug": "secondary-and-white",
"colors": [ "#000099", "#ffffff" ]
}
]
}
}
Code language: JavaScript (javascript)Utilizing this code within your theme.json file allows you to seamlessly apply these duotone filters—such as Black and White, Primary and White, and Secondary and White—providing your images with stunning visual effects. The result is a remarkable enhancement of contrast and color intensity, infusing your website with an added visual appeal.
Below are images that have the Frost duotone filters applied:
Image with Black and White duotone filter applied in Frost.
Image with Primary and White duotone filter applied in Frost.
Image with Secondary and White duotone filter applied in Frost.
Style Variations
Style variations have emerged as a fresh perspective that enriches global styles, fully amplifying the capabilities of Full Site Editing and block themes.
Imagine Full Site Editing as your whimsical playground—a world free from the complexities of code where you have the power to transform colors, shuffle headers around, or even craft a unique site from the ground up.
Style variations sparkle like distinctive shades in a vibrant palette. They empower theme authors to provide a unique aura on the parent theme, opening up new aesthetic possibilities. It’s similar to child themes but with a strategic revamp of the journey and framework to reach that point.
The most recent update to Frost brings a remarkable array of style variations, offering users even greater flexibility and customization options. In addition, the new color palette includes eight distinct and eye-catching variations: Blue, Graphite, Green, Magenta, Orange, Purple, Red, and Teal.
Frost Style Variations
The guiding light of this endeavor? Prioritizing extendability for developers and users makes the entire process as user-friendly and dynamic as possible. It’s a vibrant synergy of flexibility and user-centric design, creating a more colorful and engaging digital landscape.
Accessibility and Contrast
Color contrast plays a crucial role in the accessibility of a website. It refers to the distinction in brightness or luminance between the foreground and background colors of visual elements like text or images.
Ensuring sufficient color contrast is vital for accessibility because it enables individuals with visual impairments, including color blindness or low vision, to perceive and comprehend the content on a website or application. The recommended contrast ratio for text is a minimum of 4.5:1, while larger text should have a ratio of at least 3:1.
In line with accessibility guidelines, WordPress adheres to the “AA” level of the Web Content Accessibility Guidelines (WCAG). Tools like the WebAIM Contrast Checker provide a user-friendly way to assess the contrast between two colors using the RGB hexadecimal format to facilitate builders in testing contrast ratios. These tools ensure that the chosen color combinations meet the required accessibility standards, promoting inclusivity and a positive user experience for all visitors.
Conclusion
Colors are the magic ingredients to bring your website to life, setting the mood and defining the user experience. WordPress (and Frost) has your back if you’re a freelancer or agency keen to dabble in custom colors, gradients, and duotone filters. It allows you to experiment and implement unique color designs, turning any website into a visual treat.
Don’t stop here, though. Consider learning how to craft your own base WordPress theme for client sites. Check out How (and Why) to Build a Base WordPress Theme. It’s a comprehensive guide that will elevate your website-building journey, allowing you to offer your clients even more personalized and creative solutions.
Remember, the world of website design is colorful and exciting, and with WordPress, you’re always just a few clicks away from creating something extraordinary. Happy building
The ultimate WordPress theme
for website builders.
