Use ACF color picker in css

I hope I can explain clearly about the problem I have. Have a wordpress loop to which I have added a picker color and an image per post to use the image as a hover, the structure is like this:

<section class="row card-container">
<div class="container">
    <?php

    $news = array(
        'post_type' => 'post',
        'category_name' => 'angebote',
        'order' => 'ASC',
        'posts_per_page' => -1
    );

    $wp_query = new WP_Query($news);
    if (have_posts()) : while (have_posts()) :
        the_post(); ?>

        <div class="main-columns">
            <div class="card-content">
                <div class="main-content liste"
                     style="background-image: url(<?php the_field('background-image'); ?>
                             )">
                    <h2><?php the_title(); ?></h2>
                    <div class="row"><?php the_content(); ?></div>
                    <div class="row content-button">
                        <a href="<?php the_permalink(); ?>">
                            <p>MEHR</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    <?php endwhile; ?>

    <?php endif; ?>
    <?php wp_reset_query();
    ?>
</div>

As you can see, main-content has the added image (which works), then to the css I added a hover (in the frontpage.php in principle) with the picker color as well;

.card-container .main-content:hover {
        background-color: <?php the_field('background-farbe'); ?>;
        background-blend-mode: multiply;
    }

The problem is that in the css the color picker gives me an error, it does not accept the php, however, if I substitute the background-image, by background-color with the color picker, it accepts it perfectly. Can someone tell me what is wrong with my code? Greetings and thanks