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?