eastdesire / jscolor

JavaScript color picker with opacity (alpha channel) and customizable palette. Single file of plain JS with no dependencies.

jscolor - JavaScript Color picker with Opacity (alpha)

jscolor.js is a web color picker with opacity (alpha channel) and customizable palette.

• Single file of plain JS with no dependencies
• Supports CSS colors such as rgba() and hex, including #rrggbbaa notation.
• Download includes minified jscolor.min.js
• Mobile friendly

Installation in two lines

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

Color: <input value="#3399FF80" data-jscolor="{}">

Run example >

Configuration & Custom palette (swatch)

<script>
// These options apply to all color pickers on the page
jscolor.presets.default = {
	width: 201,
	height: 81,
	position: 'right',
	previewPosition: 'right',
	backgroundColor: '#f3f3f3',
	borderColor: '#bbbbbb',
	controlBorderColor: '#bbbbbb',
	palette: [
		'#000000', '#7d7d7d', '#870014', '#ec1c23', '#ff7e26',
		'#fef100', '#22b14b', '#00a1e7', '#3f47cc', '#a349a4',
		'#ffffff', '#c3c3c3', '#b87957', '#feaec9', '#ffc80d',
		'#eee3af', '#b5e61d', '#99d9ea', '#7092be', '#c8bfe7',
	],
	paletteCols: 10,
	hideOnPaletteClick: true,
}
</script>

Screenshot

Links

• Online Configurator tool
• Sandbox
• Examples
• Download including minified jscolor.min.js

Features

• No framework needed
  jscolor.js is a completely self-sufficient JavaScript library consisting of only one file of vanilla JavaScript. 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 many 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.

License

• GNU GPL v3 for open source use
• Commercial license for commercial use

Website

For more info on jscolor project, see jscolor website

jscolor's Issues

[Fix provided] TypeError: Illegal constructor at triggerEvent() in Chrome 14 and IE9

Hello. This error occurs at file jscolor.js at line 407:

if (typeof Event === 'function') {
	ev = new Event(eventName, { // Error is here
		bubbles: bubbles,
		cancelable: cancelable
	});
}

It happens because typeof Event === 'function' returns true in old browsers, but they don't actually support Event constructor.

Please, consider using following solution which works in both old and new browsers (even in IE):

triggerEvent: function (el, eventName, bubbles, cancelable) {
	var event = document.createEvent("Event");
	event.initEvent(eventName, bubbles, cancelable);
	el.dispatchEvent(event);
}

Suggestions for website

Please increase the size of the color space to around 200 pixels in height and 200 pixels in width, and make it a gray checkered background for 3/4 of the space, and for the remaining bottom right quadrant, the color should be the same as the text in the text box. This is a suggestion that would make me happy.

Suggestion

It would be really useful if when in in HEX or RGB mode, the input was split (again) so that:

on the left you could the colour value - as you can now ;)

on the right your could type the alpha value

I know you can have a separate input for alpa value as it is now - but clicking on it closes the colour picker :(

Importing via npm seems to break in safari

I noticed this bug while working on Cookie Monster, a mod for the game Cookie Clicker, and a bug report there.

We import jscolor through npm and our mod functions fine on chrome (and I believe firefox).
However, Safari does not load and indicates a faulty regex expression. When loading our code into the console correct colour coding of the input stops when it reaches the code produced by lines 874-876 in jscolor.js:

	parsePaletteValue : function (mixed) {
		var vals = [];

		if (typeof mixed === 'string') { // input is a string of space separated color values
			// rgb() and rgba() may contain spaces too, so let's find all color values by regex
			mixed.replace(/#[0-9A-F]{3}([0-9A-F]{3})?|rgba?\(([^)]*)\)/ig, function (val) {
				vals.push(val);
			});
		} else if (Array.isArray(mixed)) { // input is an array of color values
			vals = mixed;
		}

After mini-fication through webpack this becomes:

parsePaletteValue:function(e){var t=[];"string"==typeof e?e.replace(/#[0-9A-F]{3}([0-9A-F]{3})?|rgba?\(([^)]*)\)/gi,(function(e){t.push(e)})):Array.isArray(e)&&(t=e);

I think Safari is struggling to understand this regex? I don't immediately see why it would not understand this and a quick search on google also did not indicate any obvious compatibility problems with Safari and regex.
Is this something that could be fixed on your end? Or do we need to do something to make the code work on Safari. It is strange that this does seem to work on chrome and other browsers.

Can jscolor work with multi intances?

I have jscolor within a form that can be dublicated/cloned by the end user. When that happens, jscolor stop working. Please advise. Here is the code i'm using.

HTML

<button type="button" id="button" onlick="duplicate()">Clone</button>
<input name="color[]" id="duplicater" data-jscolor="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">

JS

<script src='jscolor.js'></script>
<script>
	jscolor.presets.default = {
		format:'rgb', 
		previewPosition:'right', 
		closeButton:true,
	};
</script>

<script>
	document.getElementById('button').onclick = duplicate;

	var i = 0;
	var original = document.getElementById('duplicater');

	function duplicate() {
		var clone = original.cloneNode(true); // "deep" clone
		clone.id = "duplicetor" + ++i; // there can only be one element with an ID
		original.parentNode.appendChild(clone);
	}
</script>

api function to check if picker is being displayed.

I want the button that opens the picker, meaning the target element in the following code:

var myPicker = new JSColor(<targetElement>, <options>)

to also close the picker when is open.
I think that a isShown method on the instance can be handy for this.

Ideas

Please make this available on the App Store as an iPad app! Also, add the ability to make wallpapers for each color with the Hex Alpha code, and make the background stay checkered! Make the random color generator and initiating color picker tools Hex Alpha, too!

Class Bindings Incorrectly Adding jscolor to <input>

jscolor will bind to a class that has color in it's className, it should only bind to a string that has a className of only "color" or a string that has color but is properly delimited by a space.

For example:

• <input class = "colorStopContainer"> matches, but it shouldn't
• <input class = "colorStopContainer color"> matches, but for the wrong reason

In some projects, people don't have control over their class names, I can submit a pull request with the appropriate fixes if you think this is a good thing to add to the project.

Container option breaking on resize

First of all, thank you for making an awesome color picker!

I'm using it on a project where the picker is shown on a sliding panel, so it's bound to a node in the sliding panel's DOM. It appears to be working well, except that when I use the browser's emulator to change devices/sizes, the color picker appears to get disconnected from its node container and just jumps off screen to the right. Screenshots attached -- the second was taken right after stretching the right border by a few pixels.

Is there a way for the picker to handle resize events?

Missing minified version since 2.0.4

Hello,

The minified version of the library added in 2.0.4 is missing in all recents versions since 2.0.4.

Thank you!

Thank you!

Used jscolor.js at
to override bgcolor ace editor

https://plnkr.co/edit/Digj5Fw7D6hxaTU4

Suggested fixes to npm install

Change name entry in package.json file to a valid npm name

Try the tool validate-npm-package-name to validate it

"name": "@EastDesire/jscolor", -> change to "name": "@eastdesire/jscolor", - note: must be all lowercase

Add node module exports

Copy jscolor.js file to jscolor-node.js file and add module exports:

module.exports = window.jscolor // default export
exports.jscolor = window.jscolor // named export

Now point the main entry in package.json to jscolor-node.js

This will make it available for NodeJS projects in a compatible way (See https://stackoverflow.com/questions/30241729/how-do-i-perform-an-export-that-is-compatible-with-es5-and-es6). The compatibility is handled by a transpiler such as Babel for pure javascript or in TypeScript by the compiler itself.

ES6 module usage example (using import)

import * as JsColor from "@eastdesire/jscolor";
const element = document.createElement("x");
const picker = new JsColor(element);

Old style NodeJs usage example (using require)

const JsColor = require("@eastdesire/jscolor")
const element = document.createElement("x");
const picker = new JsColor(element);

Since jscolor is also exported as a name constant (via export.jscolor) you can also import as follows:

const { jscolor } = require("@eastdesire/jscolor")

Similarly for ES5 import

import { jscolor } from "@eastdesire/jscolor";

You can then export more named constants as needed to make it easier to use.

You might want to have a look at my TypeScript conversion for how to convert it to a proper Javascript class, if that is the direction you want to take it... Makes it much easier to extend and customise for the end user.

JSColor doens't play nice with some UI frameworks (e.g. - Ionic)

If the INPUT element is contained inside a DIV that has a position: fixed, JSColor doesn't allow any mouse interaction. Some frameworks like Ionic use a backdrop for modal dialogs that use fixed position, and prevents JSColor from working properly in the dialog.

can not work in the dynamic input tag

Thanks to develop the great tool,
I had a dialog to set the color, the dialog would show when use click the button,and then can click the input tag to select the color,
but the jscolor can not work in this situation. the dynamic html append Color:
can not work

how to fix this issue?
best,
hanhuihong

Actual version in bower repo

It would be really useful to have actual version in bower repo. Currently there is 1.4.2 :(

version number

I know the release is tagged with the version number, but would you please include the version number inside the code.

In the zip that is downloaded from http://jscolor.com/, it is included in the non-minified version:

/**
 * jscolor - JavaScript Color Picker
 *
 * @link    http://jscolor.com
 * @license For open source use: GPLv3
 *          For commercial use: JSColor Commercial License
 * @author  Jan Odvarko
 * @version 2.0.4
 *
 * See usage examples at http://jscolor.com/examples/
 */

It would be nice to include the version in the minified file as well 😉
Thanks!

jscolor does not init automatically (jQuery)

Hi,
I new user of jscolor and it everything looks like it should to be initialized automatically on all inputs with the data-jscolor attribute, but it does not.

Actually I have no idea why, but it works correctly on jscolor 2.0.4, but not works with next versions.
jQuery 3.5.1 (if it matter)
No any errors in console (no any actions by jscolor at all)

Request: Return old default functionality from 2.1.1 to now

The most recent versions (later than 18th Jun) do not work on my userscripts anymore, I had to try to work around this but it never ended up working the same.

Please return it to how it deploys in the old version or maintain this function on a separate branch.
For now I have changed the require to use a specific version from the old commit in order to keep things working.

How does it not work?:
The input with class jscolor no longer does anything but show ffffff instead of FFFFFF and doesn't bring up a picker at all
then if I use the apparently new method of initialising the thing by doing inputElement.jscolor = new jscolor(inputElement)
it works inside the element but doesn't look right and it also doesn't deploy the onFineChange anymore

I don't know any more specifics, it just doesn't work, and working around it comes with so many drawbacks I was only able to do it successfuly for one of my projects

Project that fails to work now and I can't rework the new version to make it work: https://github.com/MagicGonads/MagicGonads.github.io/blob/master/SketchfulPicker.js

Project that fails to work now but I was able to rework the new version to make it work:
https://github.com/AEFGP/AEFGP.github.io/blob/master/Userscripts/Desmos/ColourPicker.js

Click and drag handlers not registered in module mode

Hi @EastDesire, I've been reorganising my code in Webpack and am dynamically fetching javascript from the server whenever particular elements appear on the page. One of these is a colour picker controller (via stimulus.js).

https://webpack.js.org/guides/lazy-loading/
https://github.com/danieldiekmeier/stimulus-controller-resolver

For some reason when jscolor is loaded in this way it doesn't register the click and drag handlers on the control. There are also no errors emitted. When I import jscolor in the main javascript pack it then works fine. I think there's an incompatibility with the way you're registering those handlers.

The colour palate shows up for selection, and is cross haired on the right place if an existing colour is supplied, but it's unable to be changed via clicking.

Just quickly checking if you have any ideas on what the problem might be.

Add it to npm or bower

how can I trigger jscolor open and close by js code

I didn't want to operate the jscolor with that input, maybe from another button, what should I do?

Dynamic content generation

Hi,

On previous jscolor version, there was a function jscolor.bind(); where this function enables the support of dynamically generated content. Is there the similar function like that?