Open Source · MIT License

Elegant Color Picker
for the Modern Web

A lightweight and elegant JavaScript color picker written in vanilla JavaScript. Zero dependencies, fully customizable, and accessible.

Try Demo View on GitHub

Everything you need, nothing you don't.

⚡

Zero Dependencies

Written in vanilla ES6 with no external dependencies. Lightweight and fast.

🎨

Easy to Use

Just add a data-colorpicker attribute to any input field and you're ready to go.

⚙️

Highly Customizable

Multiple themes, color formats, swatches, and configuration options.

♿

Fully Accessible

Built with accessibility in mind, supporting keyboard navigation and screen readers.

📱

Touch Support

Optimized for touch devices. Works great on tablets and smartphones.

🌐

Modern Browsers

Works on all modern browsers with JavaScript support. No polyfills needed.

Interactive Playground

Try different configurations and see ColorPicker in action.

Configuration

Format Toggle
Alpha Channel
Swatches
Clear Button
Close Button

Live Demo

Configuration Code


          

        

      

    


    
    

      
Get Started

      
Add a color picker to your project in minutes.

      

        

          
1

          

            
Include ColorPicker files

            
Add the stylesheet and script to your page.

            
Browser (IIFE)

            

              
<link rel="stylesheet" href="colorpicker.css"/>
<script src="colorpicker.min.js"></script>

            

            
ES Module

            

              
<link rel="stylesheet" href="colorpicker.css"/>
<script type="module">
  import ColorPicker from 'colorpicker.js';
</script>

            

          

        


        

          
2

          

            
Designate input fields

            

              Add the data-colorpicker attribute to any input field you want to convert into a color
              picker.
            

            

              
<input type="text" data-colorpicker>

            

          

        


        

          
3

          

            
Configure ColorPicker (optional)

            
Customize the appearance and behavior of the color picker.

            

              
ColorPicker({
  theme: 'default',
  format: 'hex',
  alpha: true,
  onChange: (color, el) => {
    console.log(`New color: ${color}`);
  }
});