The Color_Palette control allows you to define an array of colors that users can choose from. Technically, the control is a simple radio control with some additional styling to make color selection easier.

The choices an argument can hold information about the colors, style & size.

Example

new \Kirki\Field\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',
		'transport'   => 'postMessage',
		'choices'     => [
			'colors' => [ '#000000', '#222222', '#444444', '#666666', '#888888', '#aaaaaa', '#cccccc', '#eeeeee', '#ffffff' ],
			'style'  => 'round',
		],
	]
);

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

Here are some additional examples using those helper methods.

Material-Design Colors (All)

new \Kirki\Field\Color_Palette(
	[
		'settings'    => 'color_palette_setting_1',
		'label'       => esc_html__( 'Color-Palette', 'kirki' ),
		'description' => esc_html__( 'Material Design Colors - all', 'kirki' ),
		'section'     => 'section_id',
		'default'     => '#F44336',
		'transport'   => 'postMessage',
		'choices'     => [
			'colors' => Helper::get_material_design_colors( 'all' ),
			'size'   => 20,
		],
	]
);

Material-Design Colors (Primary)

new \Kirki\Field\Color_Palette(
	[
		'settings'    => 'color_palette_setting_2',
		'label'       => esc_html__( 'Color-Palette', 'kirki' ),
		'description' => esc_html__( 'Material Design Colors - primary', 'kirki' ),
		'section'     => 'section_id',
		'choices'     => [
			'colors' => Helper::get_material_design_colors( 'primary' ),
			'size'   => 25,
		],
	]
);

Material-Design Colors (Reds)

new \Kirki\Field\Color_Palette(
	[
		'settings'    => 'color_palette_setting_3',
		'label'       => esc_html__( 'Color-Palette', 'kirki' ),
		'description' => esc_html__( 'Material Design Colors - red', 'kirki' ),
		'section'     => 'color_palette_section',
		'choices'     => [
			'colors' => Helper::get_material_design_colors( 'red' ),
			'size'   => 16,
		],
	]
);