How to style a shortcode based on acf - html

Question

I want to combine the output of an acf field from my page with my shortcode. The text should be underlined with the color set via an acf field.
I tried to call the field color and set the text-decoration via an inline style. But this is not working. Any ideas what I am doing wrong?
function quote_func($atts, $content = null){
$color = get_field('color');
$output = '<div>';
$output .= '<span style="text-decoration-color:' . echo the_field('color'); . '">' . $content . '</span>';
$output .= '</div>';
return $output;
}
add_shortcode( 'quote', 'quote_func' );

Answer 1

You should echo the variable you set in the beginning of your function.
function quote_func($atts, $content = null){
$color = get_field('color');
$output = '<div>';
$output .= '<span style="text-decoration-color:' . $color . '">' . $content . '</span>';
$output .= '</div>';
return $output;
}
add_shortcode( 'quote', 'quote_func' );

Answer 2

get_field('color') isn't enough to get the value if you're not inside a post, you need a second parameter. You are in a shortcode then you need to use:
get_field('color', $postId);
To get the id of the post from within shortcode you can use:
global $post;
$postId = $post->ID;
If you use the same color for each post you may have the option page and in that case you need to use:
get_field('color', 'option');