Boone Putney bio photo

Boone Putney

Software Development
Random Musings
Austin, Texas

HumanPlanet Soleer

Email LinkedIn Github

jQuery Hex Colorpicker

Hex Colorpicker Screenshot

##What? A simple color picker that allows discrete (as opposed to analog) RGB hex color values to be visually selected and entered into a designated input field.

##How? Simple!

Include jQuery as well as the javascript and stylesheet files:

1 <script src="/pathto/jquery-hex-colorpicker.js"></script>
2 <link rel="stylesheet" href="/pathto/jquery-hex-colorpicker.css" />

Then, all you have to do is attach the hexColorPicker function to any input:

1 $('#myinputid').hexColorPicker();

You can also add options to customize to your needs:

1 jQuery(".color-picker").hexColorPicker({
2   "container":"dialog",
3   "colorModel":"hsv",
4   "pickerWidth":300,
5   "size":7,
6   "style":"hex",
7 });

#jQuery Hex Picker Demo

Demo 1:

jquery-hex-colorpicker default implementation

1 jQuery("#color-picker1").hexColorPicker();

Demo 2:

jquery-hex-colorpicker using the jquery-ui "dialog" container. Note: jQuery UI must be included for this option to work. Also, the function is applied to two inputs with the same class.

1 jQuery(".color-picker").hexColorPicker({
2   "container":"dialog",
3 });

Demo 3:

jquery-hex-colorpicker using the HSL color map, also adjusting the number of boxes, size of picker, and using the "box" style.

1 jQuery("#color-picker2").hexColorPicker({
2   "container":"dialog",
3   "colorModel":"hsl",
4   "pickerWidth":400,
5   "size":15,
6   "style":"box",
7 });

##More Information

For more information on how to setup a rules and customizations, check the documentation.


Copyright (c) 2014 Boone Putney Licensed under the MIT license. Submit a bug report above or here: