WP Blocks Color Palettes

functions.php

/*
 * WP Blocks Color Palettes
 */
function aa_theme_block_color_palette() {
	add_theme_support( 'editor-color-palette', array(
		array(
			'name'  => 'Primary',
			'slug'  => 'primary',
			'color' => '#478abd',
		),
		array(
			'name'  => 'Secondary',
			'slug'  => 'secondary',
			'color' => '#ef6802',
		),
		array(
			"name"  => "Black",
			"slug"  => "black",
			"color" => "#000000"
		),
		array(
			"name"  => "Cyan bluish gray",
			"slug"  => "cyan-bluish-gray",
			"color" => "#abb8c3"
		),
		array(
			"name"  => "White",
			"slug"  => "white",
			"color" => "#ffffff"
		),
		array(
			"name"  => "Pale pink",
			"slug"  => "pale-pink",
			"color" => "#f78da7"
		),
		array(
			"name"  => "Vivid red",
			"slug"  => "vivid-red",
			"color" => "#cf2e2e"
		),
		array(
			"name"  => "Luminous vivid amber",
			"slug"  => "luminous-vivid-amber",
			"color" => "#fcb900"
		),
		array(
			"name"  => "Vivid green cyan",
			"slug"  => "vivid-green-cyan",
			"color" => "#00d084"
		),
		array(
			"name"  => "Pale cyan blue",
			"slug"  => "pale-cyan-blue",
			"color" => "#8ed1fc"
		),
		array(
			"name"  => "Vivid cyan blue",
			"slug"  => "vivid-cyan-blue",
			"color" => "#0693e3"
		),
		array(
			"name"  => "Vivid purple",
			"slug"  => "vivid-purple",
			"color" => "#9b51e0"
		)
	) );
}

add_action( 'after_setup_theme', 'aa_theme_block_color_palette' );

style.scss

/*
 * WP Blocks Color Palettes CSS
 */
$colors: ("primary":"#478abd", "secondary":"#ef6802");
@each $name, $color in $colors {
	.has-#{$name}-color {
		color: $color;
	}
	.has-#{$name}-background-color {
		background-color: $color;
	}
}