See the demo and docs: http://bgrins.github.io/spectrum.
I wanted a colorpicker that didn't require images, and that had an API that made sense to me as a developer who has worked with color in a number of applications. I had tried a number of existing plugins, but decided to try and make a smaller, simpler one.
I started using canvas, then switched to CSS gradients, since it turned out to be easier to manage, and provided better cross browser support.
I updated the styles of the buttons to be more aesthetically pleasing.
Head over to the docs for more information. There is a visual demo of the different options hosted at: http://bgrins.github.io/spectrum.
<script src='spectrum.js'></script>
<link rel='stylesheet' href='spectrum.css' />
<input id='colorpicker' />
<script>
$("#colorpicker").spectrum({
color: "#f00"
});
</script>
Spectrum is registered as package with npm. It can be installed with:
npm install spectrum-colorpicker
Spectrum is registered as a package with Bower, so it can be pulled down using:
bower install spectrum
CDN provided by cdnjs
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.7.0/spectrum.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.6.1/spectrum.min.css">
Visit https://travis-ci.org/bgrins/spectrum to view the status of the automated tests.
If you'd like to download and use the plugin, head over to http://bgrins.github.io/spectrum/ and click the 'Download Zip' button.
If you'd like to run the development version, spectrum uses Grunt to automate the testing, linting, and building. Head over to http://gruntjs.com/getting-started for more information. First, clone the repository, then run:
npm install -g grunt-cli
npm install
# runs jshint and the unit test suite
grunt
# runs jshint, the unit test suite, and builds a minified version of the file.
grunt build
If you are able to translate the text in the UI to another language, please do! You can do so by either filing a pull request or opening an issue with the translation. The existing languages are listed at: https://github.com/bgrins/spectrum/tree/master/i18n.
For an example, see the Dutch translation.