Do you want to let visitors choose their favorite color for your website? A simple color picker can do just that! This feature allows users to change the main color of your site, making it more engaging and fun. 🎨✨
Why Add a Color Picker?

✅ Makes your website look more interactive.
✅ Lets users personalize their experience.
✅ Saves the selected color even after refreshing the page.
✅ Works smoothly with Elementor.

How It Works:
We’ll add a color palette with some preset colors and an option to enter a custom color. When a user picks a color, it updates the main site color instantly and saves the choice.

What You Need
👉 A Toggle Button – Opens and closes the color picker.
👉 Preset Colors – Quick color options for users.
👉 Custom Color Input – For users who want to enter their own color.
👉 JavaScript to Save and Apply Color – Keeps the selected color even after page reload.

Step-by-Step Guide

1️⃣ Add This HTML:

<button id="togglePalette" class="palette-toggle">🎨 Pick a Color</button>
<div class="color-palette">
    <button class="color-btn" data-color="#ff6f49" style="background:#ff6f49"></button>
    <button class="color-btn" data-color="#FF00FF" style="background:#FF00FF"></button>
    <input type="text" id="customColor" placeholder="#000000">
    <button id="applyColor">Apply</button>
</div>

2️⃣ Style It with CSS:

.palette-toggle {
    background: var(--e-global-color-primary);
    color: white;
    padding: 10px;
    border-radius: 5px;
}

3️⃣ Add JavaScript to Make It Work:

document.getElementById('togglePalette').addEventListener('click', function() {
    document.querySelector('.color-palette').classList.toggle('active');
});

document.getElementById('applyColor').addEventListener('click', function() {
    let color = document.getElementById('customColor').value;
    document.documentElement.style.setProperty('--e-global-color-primary', color);
    localStorage.setItem('selectedColor', color);
});

Done! 🚀

Note: You can also take HTML widget and combine all the codes above and boom it will work fantasticly. You can also add some extra css to make that palette more awesome.

Now your visitors can choose their favorite color for your site, making it more interactive and fun. Try it out and let me know what you think! 💬