Custom Gutenberg Color Palettes

The default Gutenberg color palettes are pretty basic. There’s also a way to add a ‘custom’ color but I don’t really want to go hunting for a HEX color code every-time I need it.

original colors

color picker

So, like the true nerdy coding artist that I am, I decided to customize my color palette to match my favorite Procreate colors from my #the100dayproject in 2020!

When you’re viewing the color palettes in Procreate if you select the ‘Value’ view it displays your Hexadecimal value, so handy!

Procreate color palette screenshot

The Code – Change your Gutenberg color palette!

Instead of adding all of this to my functions.php file I created a new file called ‘color-palettes.php’ and then I added it to the top of my functions.php so it’s pulled into the theme:

/** Custom Gutenberg Colors */
require get_template_directory() . '/inc/color-palettes.php';

And then in my color-palettes.php file I defined all my names and colors:

<?php
/**
* Custom Gutenberg Colors
**/

function add_custom_colors() {
add_theme_support(
'editor-color-palette',
[
[
	'name'  => esc_html__( 'Dark Gray', 'ah' ),
	'slug'  => 'dark-gray',
	'color' => '#212321',
],
[
	'name'  => esc_html__( 'Grayish White', 'ah' ),
	'slug'  => 'grayish-white',
	'color' => '#dfded9',
],
[
	'name'  => esc_html__( 'Off White', 'ah' ),
	'slug'  => 'off-white',
	'color' => '#f1f1ec',
],
[
	'name'  => esc_html__( 'Leafy Green', 'ah' ),
	'slug'  => 'leafy-green',
	'color' => '#61b05a',
],
[
	'name'  => esc_html__( 'Dark Green', 'ah' ),
	'slug'  => 'dark-green',
	'color' => '#309974',
],
[
	'name'  => esc_html__( 'Bright Pink', 'ah' ),
	'slug'  => 'bright-pink',
	'color' => '#f07a7c',
],
[
	'name'  => esc_html__( 'Medium Pink', 'ah' ),
	'slug'  => 'medium-pink',
	'color' => '#ffa3a4',
],
[
	'name'  => esc_html__( 'Light Pink', 'ah' ),
	'slug'  => 'light-pink',
	'color' => '#fbcec3',
],
[
	'name'  => esc_html__( 'Peach', 'ah' ),
	'slug'  => 'peach',
	'color' => '#fab093',
],
[
	'name'  => esc_html__( 'Goldy', 'ah' ),
	'slug'  => 'goldy',
	'color' => '#e6be41',
],
[
	'name'  => esc_html__( 'Reddish', 'ah' ),
	'slug'  => 'reddish',
	'color' => '#e04e33',
],
[
	'name'  => esc_html__( 'Blue Green', 'ah' ),
	'slug'  => 'blue-green',
	'color' => '#1888a8',
],
[
	'name'  => esc_html__( 'Brown', 'ah' ),
	'slug'  => 'brown',
	'color' => '#9a604b',
],
[
	'name'  => esc_html__( 'Light Brown', 'ah' ),
	'slug'  => 'light-brown',
	'color' => '#c88d51',
],
[
	'name'  => esc_html__( 'Rusty Orange', 'ah' ),
	'slug'  => 'rusty-orange',
	'color' => '#d87e1d',
],

]
);
}
add_action( 'after_setup_theme', 'add_custom_colors' );

That added the colors to the editor but we still need to add those colors to our theme’s CSS. Warning! This part took forever. Copy. Paste. Copy. Paste.

/** Custom Gutenberg Colors **/
 .has-dark-gray-background-color {background-color: #212321;}
 .has-dark-gray-color {color: #212321;}
 .has-grayish-white-background-color {background-color: #dfded9;}
 .has-grayish-white-color {color: #dfded9;}
 .has-off-white-background-color {background-color: #f1f1ec;}
 .has-off-white-color {color: #f1f1ec;}
 .has-leafy-green-background-color {background-color: #61b05a;}
 .has-leafy-green-color {color: #61b05a;}
 .has-dark-green-background-color {background-color: #309974;}
 .has-dark-green-color {color: #309974;}
 .has-bright-pink-background-color {background-color: #f07a7c;}
 .has-bright-pink-color {color: #f07a7c;}
 .has-medium-pink-background-color {background-color: #ffa3a4;}
 .has-medium-pink-color {color: #ffa3a4;}
 .has-light-pink-background-color {background-color: #fbcec3;}
 .has-light-pink-color {color: #fbcec3;}
 .has-peach-background-color {background-color: #fab093;}
 .has-peach-color {color: #fab093;}
 .has-goldy-background-color {background-color: #e6be41;}
 .has-goldy-color {color: #e6be41;}
 .has-reddish-background-color {background-color: #e04e33;}
 .has-reddish-color {color: #e04e33;}
 .has-blue-green-background-color {background-color: #1888a8;}
 .has-blue-green-color {color: #1888a8;}
 .has-brown-background-color {background-color: #9a604b;}
 .has-brown-color {color: #9a604b;}
 .has-light-brown-background-color {background-color: #c88d51;}
 .has-light-brown-color {color: #c88d51;}
 .has-rusty-orange-background-color {background-color: #d87e1d;}
 .has-rusty-orange-color {color: #d87e1d;}

Once I saved everything and cleared my cache and refreshed my admin post page the new colors appeared and they are giving me all the heart eyes. ๐Ÿ˜ ๐Ÿ˜ ๐Ÿ˜

before

default gutenberg color palette

after

gutenberg color palette with custom colors
โ™ฅ๏ธ Thank you to the colors used in this tutorial, I couldn’t have done it without your support. โ™ฅ๏ธ

Dark Gray
#212321

Grayish White
#dfded9

Off White
#f1f1ec

Leafy Green
#61b05a

Dark Green
#309974

Bright Pink
#f07a7c

Medium Pink
#ffa3a4

Light Pink
#fbcec3

Peach
#fab093

Goldy
#e6be41

Reddish
#e04e33

Blue-Green
#1888a8

Brown
#9a604b

Light Brown
#c88d51

Rusty Orange
#d87e1d

A circular shell like drawing with many colors.
Drawing 58 of 100 from my 100 day Procreate project in 2020

Leave a Reply

Your email address will not be published. Required fields are marked *