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',
	],
] );

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'   => 20,
	],
] );

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,
	],
] );

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'   => 20,
	],
] );

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'   => 20,
		'style'  => 'round',
	],
] );