WordPress Customizer Color Palette Control

Learn how to create a color-palette control using the Kirki Customizer Framework.

Back to Controls

Returnsstring

The color-palette control allows you to define an array of colors and users can choose from those colors. Internally the control is a simple radio control with some additional styling to make color selection easier.

You can define inside the choices arguments an array of colors, the style (round or not) and also the size each color will have. See the examples below.

Example

Kirki::add_field( 'theme_config_id', [
	'type'        => 'color-palette',
	'settings'    => 'color_palette_setting_0',
	'label'       => esc_html__( 'Color-Palette', 'kirki' ),
	'description' => esc_html__( 'This is a color-palette control', 'kirki' ),
	'section'     => 'section_id',
	'default'     => '#888888',
	'choices'     => [
		'colors' => [ '#000000', '#222222', '#444444', '#666666', '#888888', '#aaaaaa', '#cccccc', '#eeeeee', '#ffffff' ],
		'style'  => 'round',
	],
] );

The result of the above example would look like this:

color-palette control example 1

Additionally the Kirki_Helper class provides helper methods in case you want to use Google’s Material Design color palettes.

Some additional examples using those helper methods:

Material-design Colors - All.

Kirki::add_field( 'theme_config_id', [
	'type'        => 'color-palette',
	'settings'    => 'color_palette_setting_4',
	'label'       => esc_html__( 'Color-Palette', 'kirki' ),
	'description' => esc_html__( 'Material Design Colors - all', 'kirki' ),
	'section'     => 'section_id',
	'default'     => '#F44336',
	'choices'     => [
		'colors' => Kirki_Helper::get_material_design_colors( 'all' ),
		'size'   => 17,
	],
] );

color-palette control example 2

Material-design Colors - Primary

Kirki::add_field( 'theme_config_id', [
	'type'        => 'color-palette',
	'settings'    => 'color_palette_setting_1',
	'label'       => esc_html__( 'Color-Palette', 'kirki' ),
	'description' => esc_html__( 'Material Design Colors - primary', 'kirki' ),
	'section'     => 'section_id',
	'default'     => '#000000',
	'choices'     => [
		'colors' => Kirki_Helper::get_material_design_colors( 'primary' ),
		'size'   => 25,
	],
] );

color-palette control example 2

All Material-design Colors - Reds

Kirki::add_field( 'theme_config_id', [
	'type'        => 'color-palette',
	'settings'    => 'color_palette_setting_2',
	'label'       => esc_html__( 'Color-Palette', 'kirki' ),
	'description' => esc_html__( 'Material Design Colors - red', 'kirki' ),
	'section'     => 'section_id',
	'default'     => '#FF1744',
	'choices'     => [
		'colors' => Kirki_Helper::get_material_design_colors( 'red' ),
		'size'   => 16,
	],
] );

color-palette control example 2

All Material-design Colors - A100 variation.

Kirki::add_field( 'theme_config_id', [
	'type'        => 'color-palette',
	'settings'    => 'color_palette_setting_3',
	'label'       => esc_html__( 'Color-Palette', 'kirki' ),
	'description' => esc_html__( 'Material Design Colors - A100', 'kirki' ),
	'section'     => 'section_id',
	'default'     => '#FF80AB',
	'choices'     => [
		'colors' => Kirki_Helper::get_material_design_colors( 'A100' ),
		'size'   => 60,
		'style'  => 'round',
	],
] );

color-palette control example 2

Can't find what you're looking for? Check the github issues or edit this page to add what's missing.