jscolor.js is a JavaScript color picker with opacity channel
Latest release:
jscolor-2.5.1.zip
(released 2022-10-18)
<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
♥
jscolor installed on them
♥
See also other examples of jscolor usage.
Testimonials
I really like jscolor, it's perfect for my little free web app!
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.
many thanks for the great work on the color picker tool! I really love it!