text: var color;
  
  // Simple example, see optional options for more configuration.
  const pickr = Pickr.create({
      el: '.color-picker',
      theme: 'nano', // or 'monolith', or 'nano'
      default: '#9978D4',
  
      swatches: [
          'rgba(244, 67, 54, 1)',
          'rgba(233, 30, 99, 1)',
          'rgba(156, 39, 176, 1)',
          'rgba(103, 58, 183, 1)',
          'rgba(63, 81, 181, 1)',
          'rgba(33, 150, 243, 1)',
          'rgba(3, 169, 244, 1)',
          'rgba(0, 188, 212, 1)',
          'rgba(0, 150, 136, 1)',
          'rgba(76, 175, 80, 1)',
          'rgba(139, 195, 74, 1)',
          'rgba(205, 220, 57, 1)',
          'rgba(255, 235, 59, 1)',
          'rgba(255, 193, 7, 1)'
      ],
  
      components: {
  
          // Main components
          preview: true,
          opacity: false,
          hue: true,
  
          // Input / output Options
          interaction: {
              hex: false,
              rgba: false,
              hsla: false,
              hsva: false,
              cmyk: false,
              input: true,
              clear: false,
              save: true
          }
      }
  });
  
  pickr.on('init', (...args) => {
    color = pickr.getColor().toRGBA();
    // updatePageContent(1);
  }).on('save', (...args) => {
    color = args[0].toRGBA();
    document.getElementById('logo1').style.color = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
    document.getElementById('switchToImage').style.backgroundColor = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
    pickr.hide();
    updatePageContent(1);
  });