WP_Customize_Color_Control omitting # symbol

I’m currently not able to write it all down for you but you can always use a sanitizer (WordPress has one build in) to add an # if its not present.
Also as far as i know u always need to create a setting and a control. Like under here:

$wp_customize->add_setting('Some_color', array(
    'default' => '#fffff',
    'sanitize_callback' => 'sanitize_hex_color',
));
    $wp_customize->add_control(
    new WP_Customize_Color_Control(
        $wp_customize,
        'Some_color',
        array(
            'label' => __('Some_color', 'DesignitMultistore'),
            'section' => 'Some Section',
            'priority' => 1,
        )
    ));

Code from sanitize_hex_color :
Codelink wordpress

So one example from you converted :

$wp_customize->add_setting('header_backgroundcolor', array(
'default' => '#f8f8f8',
        'sanitize_callback' => 'sanitize_hex_color',
));

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_backgroundcolor', array(
      'label'      => __( 'Header Background Color' ),
      'section'    => 'colors',
      'settings'   => 'header_backgroundcolor',
    ) ) );

Also are you working with Less or Sass or are you having a style html?