The Gutenberg is the name WordPress uses for its newest editor. It’s also known as the block editor since the content elements of your blogs, such as images and texts, are now added as “blocks” to the editor. Once you upgrade to WordPress 5.0, you’ll get the Gutenberg editor. The block editor is very different from WordPress’ classic editor, but you’ll get used to it once you start. Moreover, the block editor makes it easier to access and edit content elements of blog posts – including creating your own custom color palette.
If you’re curious about how the Gutenberg editor works, you can try the demo here.
Importance of Color Palettes
Before going into the creation of custom color palettes, we should know why color palettes are important for our blogs.
When we talk about creating color palettes or color schemes, the first thing you have to understand is color theory. Color theory is basically looking at which colors work with each other and how these color combinations affect those who see it. This means that your blog’s color scheme may potentially make or break the visitor traffic. If your colors are pleasant, readers will want to read more. On the other hand, if the colors do not work well with each other, readers might stop looking at your content and will probably even stop visiting your blog altogether.
There are common types of color combinations that people usually use. These are:
Monochromatic – This type of color scheme only uses combinations of lighter and darker shades of a single hue.
Analogous – This color scheme, on the other hand, uses three colors. In a color wheel, you will choose a primary color, and choose 2 other supplementary colors a few degrees away from the primary color – left or right.
Split-Complementary – This is a combination of analogous color scheme with a complementary color based on the primary color. With an analogous scheme, the colors soften the combination; adding another complementary color adds a contrast.
Dual-Color Scheme – When you have a lot of content that you want your readers to pay attention to, you can use the dual-color scheme. It uses two complementary color pairs (four colors). However, you have to be careful when using this color scheme since two different combinations can overpower the other which could result in a disaster.
Creating Custom Color Palettes
To have your own color palette on the Gutenberg Editor, the first thing you have to do is to turn off the editor’s custom color picker. This prevents people who have admin access to the website to choose any random color.
To do this, add this code to your theme’s functions.php file.
// Disable Gutenberg Custom Colors
add_theme_support( 'disable-custom-colors' );
// Disable Gutenberg Custom Gradients
add_theme_support( 'disable-custom-gradients' );
This code is usually put within the theme support settings.
After disabling the custom color picker, you can now select or define the colors you want to be used on your blog. These colors may be the colors you use for branding, as well as generic colors like black and white.
NOTE: Setting up the custom color palette with this method requires that you have knowledge of your theme’s text domain. This method also assumes that you don’t have defined colors in your blog.
To input the colors you want for your blog, you will go to the functions.php file once again. Once you’re there, this is the code you have to put:
![]()
Image Credit: Speckyboy
Image Credit: Speckyboy// Editor Color Palette
add_theme_support( 'editor-color-palette', array(
array(
'name' => __( 'White', 'textdomain' ),
'slug' => 'white',
'color' => '#FFFFFF',
),
array(
'name' => __( 'Black', 'textdomain' ),
'slug' => 'black',
'color' => '#000000',
),
array(
'name' => __( 'Yellow', 'textdomain' ),
'slug' => 'yellow',
'color' => '#ffd000',
),
array(
'name' => __( 'Blue', 'textdomain' ),
'slug' => 'blue',
'color' => '#347ab7',
),
array(
'name' => __( 'Green', 'textdomain' ),
'slug' => 'green',
'color' => '#2e924d',
),
array(
'name' => __( 'Gray', 'textdomain' ),
'slug' => 'gray',
'color' => '#464646',
),
array(
'name' => __( 'Light Gray', 'textdomain' ),
'slug' => 'lightgray',
'color' => '#ebebeb',
),
) );
The colors that you want to use should have three things: name, slug, and color. The name is the label of the color, slug is used to assign CSS classes to elements that use that particular color. Lastly, the color is the hexadecimal code of the color.
After putting the code, you now have your own customized color palette to use for your blogs.
You might also enjoy:
