what is stored in the term meta?
a full hex color code like #123edf
?
your $color
line seems to be inserted too early, and needs to be adapted;
try:
function the_category_colors() {
$categories = get_the_category();
$separator="";
$output="";
if($categories){
foreach($categories as $category) {
$output .= '<div class="cat-span" style="background-color: '. get_term_meta($category->term_id, 'color', true) . '; "><a href="'.get_category_link($category->term_id ).'" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) ) . '">'.$category->cat_name.'</a></div>'.$separator;
}
echo trim($output, $separator);
}
}
what is the html output of the code in the browser?