Elegant Color Picker for the Modern Web

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

Try Demo View on GitHub
Coloris color picker in light and dark themes

Why Choose Coloris?

Zero Dependencies

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

Easy to Use

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

Highly Customizable

Multiple themes, color formats, and configuration options.

Fully Accessible

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

Touch Support

Optimized for touch devices. Usable on tablets and smartphones.

Modern Browsers

Works on all modern browsers with JavaScript support.

Interactive Playground

Try different configurations and see Coloris in action

Configuration

Theme
Theme Mode
Format

Live Demo

Configuration Code

JavaScript 
Coloris({
  onChange: (color, inputEl) => {
   console.log(`The new color is ${color}`);
  }
});

Options with default values are omitted. More configuration options are detailed in the documentation.

Get Started

1. Include Coloris files

Download the latest version from GitHub and add the script and the style to your page.

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

Alternatively, you can include the script and the style from a CDN (not recommended in production).

HTML 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js"></script>

2. Designate input fields

Add the data-coloris attribute to the input fields you want to convert to color fields.

HTML 
<input type="text" data-coloris>

3. Configure Coloris (optional)

You can customize the appearance and behavior of the color picker.

JavaScript 
Coloris({
  onChange: (color, inputEl) => {
   console.log(`The new color is ${color}`);
  }
});