JavaScript Color picker with opacity channel

jscolor.js is a HEX and RGBA color picker that aims to stay super easy both for developers to install and for web users to use.

See the following two-liner example. That's how simple the installation can be…

HTML

<script src="jscolor.js"></script>

Color: <input value="rgba(40,170,255,0.5)" data-jscolor="">

Result

Color:

Example app

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

No framework needed

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

It doesn't need any frameworks (jQuery, Dojo, MooTools etc.)
But it can certainly coexist alongside them.

Cross-browser

All modern browsers are supported, including:

Edge, Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above, 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 jscolor into your project or website, the author provides a programming and consultancy service (subject to time availability).
Typical scenarios solved are:
  • Building user interfaces around jscolor, e.g. for generating colorized images of prints or product variants
  • Colorizing page elements with user-specified color
  • AJAX integration, server-side processing of picked colors, etc.
  • Process:

    Client describes their idea and provides corresponding webpage(s) or their link, if needed. The work is estimated and, upon mutual agreement, the result is emailed back to the client within a few days according to the complexity of the task.
  • Price:

    Quick advice comes free. When programming is involved, the price depends on complexity of the task.
  • Contact:

    Please email the author at with a brief description of your intended use. It is helpful to attach a link/screenshot of your project, so that we can better estimate the amount of work involved.

Testimonials

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
I really like jscolor, it's perfect for my little free web app!
— Alan
I find JSColor easy to use, easy to integrate and easy to personalize options. I think you did a nice work. Thank you very much.
— Dweius