Adding a new block editor color option to a theme

I am trying to add new colors to my gutenberg color palette, I would like to add a red color, but when I add the following lines:

array(
    'name'  = _x( 'Red', 'Name of the red color in the Gutenberg palette', 'baskerville' ),
    'slug'  = 'red',
    'color' = '#d70004',
),

My color palette shows red, the standard gutenberg text editor UI is coloring my red text, but the frontend does not.

I am currently working on the Baskerville theme.

Here's the palette after I edited my code:

Here's what it is shown in the block editor: note: the 2nd line is coloured with the custom colour function, the 3rd is colored with the palette colour I added

Here's what the frontend displays:

Expanded code:

In the functions.php file of baskerville theme:

/* -----SPECIFY GUTENBERG SUPPORT-------*/

if ( ! function_exists( 'baskerville_add_gutenberg_features' ) ) :
    function baskerville_add_gutenberg_features() {

        add_theme_support( 'align-wide' );

        /* Gutenberg Palette --------------------------------------- */

        add_theme_support( 'editor-color-palette', array(
            array(
                'name'  = _x( 'Cyan', 'Name of the cyan color in the Gutenberg palette', 'baskerville' ),
                'slug'  = 'accent',
                'color' = '#13C4A5',
            ),
            array(
                'name'  = _x( 'Black', 'Name of the black color in the Gutenberg palette', 'baskerville' ),
                'slug'  = 'black',
                'color' = '#222',
            ),
            array(
                'name'  = _x( 'Dark Gray', 'Name of the dark gray color in the Gutenberg palette', 'baskerville' ),
                'slug'  = 'dark-gray',
                'color' = '#444',
            ),
            array(
                'name'  = _x( 'Medium Gray', 'Name of the medium gray color in the Gutenberg palette', 'baskerville' ),
                'slug'  = 'medium-gray',
                'color' = '#666',
            ),
            array(
                'name'  = _x( 'Light Gray', 'Name of the light gray color in the Gutenberg palette', 'baskerville' ),
                'slug'  = 'light-gray',
                'color' = '#888',
            ),
            array(
                'name'  = _x( 'White', 'Name of the white color in the Gutenberg palette', 'baskerville' ),
                'slug'  = 'white',
                'color' = '#fff',
            ),
            array(
                'name'  = _x( 'Red', 'Name of the red color in the Gutenberg palette', 'baskerville' ),
                'slug'  = 'red',
                'color' = '#d70004',
            ),
        ) );