Color module

Follow the below steps

Enable the core's color module :

Enable the core's color module by navigating to modules overview page 

Create subdirectory under theme root directory :

• Create a directory called "color" under theme root directory
• Under color directory create four files - "color.inc", "preview.css", "preview.html", "preview.js" (refer screenshot beside) 
• color.inc - This file contains the associative array representing the set of fields which will be configurable through color module settings see the code snippet below

• <?php
  
  /**
   * @file
   * Lists available colors and color schemes for the IITB DJ theme.
   */
  
  $info = [
    // Available colors and color labels used in theme.
    'fields' => [
      'topnav' => t('Header and Footer Text color'),
      'header_bg' => t('Header background'),
      'footer_bg' => t('Footer background'),
      'text' => t('Default Text color'),
      'link' => t('Link color'),
    ],
    // Pre-defined color schemes.
    'schemes' => [
      'default' => [
        'title' => t('CHE IITB DJ (default)'),
        'colors' => [
          'topnav' => '#ffffff',
          'header_bg' => '#444444',
          'footer_bg' => '#414141',
          'text' => '#343536',
          'link' => '#337ab7',
        ],
      ],
      'orange' => [
        'title' => t('Orange color'),
        'colors' => [
          'topnav' => '#ffffff',
          'header_bg' => '#f86a00',
          'footer_bg' => '#f86a00',
          'text' => '#343536',
          'link' => '#a14500',
        ],
      ],
      'green' => [
        'title' => t('Green color'),
        'colors' => [
          'topnav' => '#ffffff',
          'header_bg' => '#163D23',
          'footer_bg' => '#163D23',
          'text' => '#343536',
          'link' => '#047e65',
        ],
      ],
    ],
   
  
    // CSS files (excluding @import) to rewrite with new color scheme.
    'css' => [
      'css/colors.css',
    ],
  
    // Files to copy.
    'copy' => [
      'logo.png',
    ],
  
  
    // Preview files.
    'preview_library' => 'che_iitb_dj/color.preview',
    'preview_html' => 'color/preview.html',
  
    // Attachments.
    '#attached' => [
      'drupalSettings' => [
        'color' => [
          // Put the logo path into JavaScript for the live preview.
          'logo' => theme_get_setting('logo.url', 'che_iitb_dj'),
        ],
      ],
    ],
  ];

in the color.css only add the color value which are defined in the default schema (see below code snippet)

    'default' => [
      'title' => t('CHE IITB DJ (default)'),
      'colors' => [
        'topnav' => '#ffffff',
        'header_bg' => '#444444',
        'footer_bg' => '#414141',
        'text' => '#343536',
        'link' => '#337ab7',
      ],
    ],

•   preview.html- html file which will be shown on the theme setting page

• preview.css -  css file which will be used to style preview.html file
• preview.js - this file changes the color value in the "preview.css" file with the color value picked from color palatte in theme setting page.

/**
* https://www.drupal.org/node/2815083
* @preserve
**/

(function ($, Drupal, drupalSettings) {
  Drupal.color = {
    logoChanged: false,
    bgChanged: false,
    callback: function callback(context, settings, $form) {
     
      var $colorPreview = $form.find('.color-preview');
      var $colorPalette = $form.find('.js-color-palette');


      $colorPreview.find('.color-preview-top-head *, .color-preview-footer-wrapper *').css('color', $colorPalette.find('input[name="palette[topnav]"]').val());
      $colorPreview.find('.color-preview-top-head').css('background-color', $colorPalette.find('input[name="palette[header_bg]"]').val());      
      $colorPreview.find('.color-preview-footer-wrapper').css('background-color', $colorPalette.find('input[name="palette[footer_bg]"]').val());
      $colorPreview.find('.color-preview-main h2, .color-preview .preview-content, .color-preview-content h1, .preview-content ').css('color', $colorPalette.find('input[name="palette[text]"]').val());
      $colorPreview.find('.color-preview-content a, .color-preview-main-menu-links a, .color-preview-main-menu-links a:hover').css('color', $colorPalette.find('input[name="palette[link]"]').val());
      $colorPreview.find('.color-preview-site-name').css('color', $colorPalette.find('input[name="palette[footer]"]').val());


    }
  };
})(jQuery, Drupal, drupalSettings);

Add libraries in in <theme_name>.libraries.yml file

add below entries in the <theme_name>.libraries.yml file

color.preview:
  version: VERSION
  css:
    theme:
      color/preview.css: {}
  js:
    color/preview.js: {}
  dependencies:
    - color/drupal.color

also add the path of css fille which contains only color value that need to be modified (see below code snippet for example)

global-styling:
  css:
    theme:
      css/style.css: {}
      css/colors.css: {}
  js:
    js/custom_subtheme.js: {}
  dependencies:
    - core/jquery