Gutenberg Custom Color Pallet

gutenberg-color-pallet.php

<?php
/**
 * Add support for custom color palettes in Gutenberg.
 */
function meta13_gutenberg_color_palette()
{
    add_theme_support(
        'editor-color-palette',
        array(
            array(
                'name'  => esc_html__('Light Gray', '@@textdomain'),
                'slug' => 'lightgray',
                'color' => '#f7f7f7',
            ),
            array(
                'name'  => esc_html__('Medium Gray', '@@textdomain'),
                'slug' => 'mediumgray',
                'color' => '#58595B',
            ),
            array(
                'name'  => esc_html__('Dark Gray', '@@textdomain'),
                'slug' => 'darkmediumgray',
                'color' => '#231F20',
            ),
            array(
                'name'  => esc_html__('Black', '@@textdomain'),
                'slug' => 'black',
                'color' => '#020202',
            ),
            array(
                'name'  => esc_html__('White', '@@textdomain'),
                'slug' => 'white',
                'color' => '#fefefe',
            )
        )
    );
}
add_action('after_setup_theme', 'meta13_gutenberg_color_palette');

gutenberg.scss

/*------------------------------------*\
    #GUTENBERG COLOR PALLET
\*------------------------------------*/

// lightgray
.has-lightgray-background-color {
     background-color: $light-gray;
 }
.has-lightgray-color {
     color: $light-gray;
}

// mediumgray
.has-mediumgray-background-color {
     background-color: $medium-gray;
}
.has-mediumgray-color {
     color: $medium-gray;
}

// darkgray
.has-darkgray-background-color {
     background-color: $dark-gray;
}
.has-darkgray-color {
     color: $dark-gray;
}

// black
.has-black-background-color {
     background-color: $black;
}
.has-black-color {
     color: $black;
}

// white
.has-white-background-color {
     background-color: $white;
}
.has-white-color {
     color: $white;
}