jscolor.js is a JavaScript color picker with opacity channel

Just add data-jscolor attribute…

<input data-jscolor="{ format: 'rgba', required: false, palette: '#C00 #0C0 #00C', previewPosition: 'right' }">
Color:
<input data-jscolor="{ preset: 'dark', closeButton: true, closeText: 'OK' }">
Color:
<input data-jscolor="{ value: '#33AACC80', backgroundColor: '#333', shadowColor: '#FFFFFF80', width: 121, height: 121 }">
Color:

No framework needed

jscolor.js is a self-sufficient JavaScript library consisting of only one file of plain JavaScript.

It doesn't need any frameworks (jQuery, Dojo, MooTools, etc.)
but it is friends with them all.

Cross-browser

Wide compatibilty across modern desktop & mobile browsers, including:

Edge, Firefox, Chrome, Safari, Opera, and others…

Highly customizable

jscolor provides variety of configuration options.

Whether you need to change color picker's size or colors, or attach a function to its onchange event, the configuration can be fine-tuned for your web project.

Mobile friendly

With a built-in support for touch events, jscolor is designed to be easy to use on touch devices such as tablets and smartphones.

Assistance with implementation

Should you need assistance incorporating color-related features into your project, do not hesitate to email for advice.

Typical scenarios solved:

  • Customizing jscolor configuration to suit your project
  • Building color-related user interfaces, e.g. for generating colorized prints or product variants
  • Dynamic page layouts based on user-specified colors and other parameters
  • Color space calculations and conversions
  • AJAX integration, server-side processing of color data, etc.

jscolor example

RGBA
HEX
R
G
B
H °
S %
V %
A
RGBA
HEX
R
G
B
° H
% S
% V
A
The side buttons have
jscolor installed on them

Testimonials

Great work! Searching the web I found your picker very elegant and easy to use.
— Aleksandar
Our project has been using jscolor.js for a long while to full satisfaction.
— Thijs
I just wanted to send a personal thanks for saving me a lot of time and bother. […]
You've provided the cleanest solution with copy/paste of 2 lines and it's running.
— Greg