Colors are displayed in Gutenberg, but not in the live page

First of all: i read a lot of other topics like

https://generatepress.com/forums/topic/add-theme-support-editor-color-palette/
https://generatepress.com/forums/topic/customizing-generateblocks-color-palette/

But unfortunately, somehow it doesn't work out.

My function.php:

add_action( 'after_setup_theme', function() {
    add_theme_support( 'editor-color-palette', array(
        array(
            'name'  => __( 'Orange' ),
            'slug'  => 'orange',
            'color' => '#F2C42E',
        ),
        array(
            'name'  => __( 'Red' ),
            'slug'  => 'red',
            'color' => '#FD5A5C',
        ),
        array(
            'name'  => __( 'Light Brown' ),
            'slug'  => 'lightbrown',
            'color' => '#877F7A',
        ),
        array(
            'name'  => __( 'Brown' ),
            'slug'  => 'brown',
            'color' => '#423733',
        ),
		array(
            'name'  => __( 'Black' ),
            'slug'  => 'black',
            'color' => '#3d3d3d',
        ),
		array(
            'name'  => __( 'Grey' ),
            'slug'  => 'grey',
            'color' => '#7F7F7F',
        ),
		array(
            'name'  => __( 'Light Grey' ),
            'slug'  => 'lightgrey',
            'color' => '#E2E2E2',
        ),
		array(
            'name'  => __( 'White' ),
            'slug'  => 'white',
            'color' => '#ffffff',
        ),
    ) );
}, 50 );

And style.css

.has-orange-color {color: #F2C42E;}
.has-orange-background-color {color: #F2C42E;}

I've tried the orange one, but unfortunately it doesn't work. In the editor the selected object is displayed in orange, but not in the Live Page.