Java-Scripts.net

User Color Customizer

Personalization power. Use the standard HTML5 color picker to let users define the style of your page elements in real-time.

#0d6efd

Sample Heading

This box background will change.

Copy the Script

<input type="color" oninput="changeColor(this.value)">

<script>
function changeColor(color) {
    // Option 1: Change specific elements
    document.getElementById("myHeader").style.color = color;
    
    // Option 2: Change CSS Variable (Best Practice)
    document.documentElement.style.setProperty('--primary-color', color);
}
</script>

<style>
:root { --primary-color: #000; }
h1 { color: var(--primary-color); }
</style>

Frequently Asked Questions

Almost all modern browsers (Chrome, Firefox, Edge, Safari on iOS 12.2+) support the `` element natively.

It depends on your CSS. If you use CSS Variables (e.g., `:root { --primary: red; }`), you can update that one variable with JavaScript to repaint the entire site instantly.

No. To save the user's choice, you would need to save the color value to `localStorage` or a cookie and load it when the page starts.