Output category color option to each li item

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?