coolors

Colour Palettes

Generate a colour palette

coolors.co is an excellent free resource for exploring and generating colour palettes. I recommend creating an account there so that you can save palettes for future reference.

Customising the colour palettes within wordpress

Once you have decided on a colour palette for your website Using a plugin like Code Snippets it is then possible to add in code to customise the colour palettes available in WordPress

Customise Palette in GeneratePress

The following code will customise the theme colour palette in GeneratePress. You can have a variable number of colours, but they are only given the same amount of space regardless so if you specify too many the palette blocks will become very small. Seven or eight colour blocks is about right.

add_filter( 'generate_default_color_palettes', 'tp_custom_color_palettes' );
function tp_custom_color_palettes( $palettes ) {
	$palettes = array(
		'#000000',
		'#264653',
		'#2A9D8F',
		'#E9C46A',
		'#F4A261',
		'#E76F51',
		'#FFFFFF',
	);
	
	return $palettes;
}

Customise Palette in Gutenberg Blocks

The code below will customise the colour palettes within the Gutenberg Block Editor in WordPress. As far as I know there is no restriction on the number of colours that can be specified here.

add_action( 'after_setup_theme', function() {
    add_theme_support( 'editor-color-palette', array(
		array(
            'name'  => __( 'Black' ),
            'slug'  => 'Black',
            'color' => '#000000',
        ),
        array(
            'name'  => __( 'Charcoal' ),
            'slug'  => 'Charcoal',
            'color' => '#264653',
        ),
        array(
            'name'  => __( 'Persian Green' ),
            'slug'  => 'PersianGreen',
            'color' => '#2A9D8F',
        ),
        array(
            'name'  => __( 'Orange Yellow Crayola' ),
            'slug'  => 'OrangeYellowCrayola',
            'color' => '#E9C46A',
        ),
        array(
            'name'  => __( 'Sandy Brown' ),
            'slug'  => 'SandyBrown',
            'color' => '#F4A261',
        ),
		array(
            'name'  => __( 'Burnt Sienna' ),
            'slug'  => 'BurntSienna',
            'color' => '#E76F51',
        ),
		array(
            'name'  => __( 'White' ),
            'slug'  => 'White',
            'color' => '#FFFFFF',
        ),
    ) );
} );