php concatenation - inserting value as class in html

I am trying to adapt a line of php code in a while loop, but something I do breaks how it is written to the html. When I query the datasbase for the value of my_product and insert it between the div-tags everything works, like so:

while ( $the_query->have_posts() ) {
        $the_query->the_post();
        echo '<div>' . the_field('my_product') . '</div>';
}

But when I try to query for my_colour and insert the value as a class inside the first div-tag, the value of my_colour is written to the html before the div-tags:

while ( $the_query->have_posts() ) {
        $the_query->the_post();
        echo '<div class="' . the_field('my_colour') . '"></div>';
}

What am I doing wrong here? (If you are wondering about the_field()it is a function belonging to teh plugin Advanced Custom Fields in Wordpress)

via Chebli Mohamed