Color Picker

Download source code: ZIP file

---

A color picker in JavaScript. Supports adapters for integrating other popular color pickers, and can use native color selection controls. In the public domain.

Demo

See: http://peteroupc.github.io/colorpicker/demo.html

The homepage is: http://peteroupc.github.io/colorpicker

How to use:

In general, include the scripts “cbox.js” to your HTML:

<script type="text/javascript" src="cbox.js"></script>

When the page is ready, it will convert certain textboxes into color pickers:

• Textboxes with IDs or class names starting with “color_”. and input elements with type “color”, will be converted into normal color pickers.
• Textboxes with IDs or class names starting with “rgbahex_” will be converted into alpha color pickers that use the color format RRGGBBAA, with no “#” character, and with hexadecimal components.
• Textboxes with IDs or class names starting with “argbhex_” will be converted into alpha color pickers that use the color format AARRGGBB, with no “#” character, and with hexadecimal components.
• Textboxes with IDs or class names starting with “acolor_” will be converted into alpha color pickers.

For more advanced features, use the following functions.

Available Functions

PDColorPicker.setColorPicker( input, extra) - sets up a color picker for the given textbox. The input parameter is the HTML element for the input text box. The extra parameter takes the following keys:

1. usealpha - whether this color picker should use the alpha channel or not.
2. info - the color model used. If null, the default color model is used, which is initially PDColorPicker.HueSatVal.

3. flat - if true, shows the color selection control in-line rather than in the form of a text box and button. Default is false.

4. rgbahex - if true, the color format used is RRGGBBAA, with hexadecimal components.
5. argbhex - if true, the color format used is AARRGGBB, with hexadecimal components. PDColorPicker.getDefaultColorModel() - gets the default color model used by the color picker. The model is a JavaScript object with the following keys:

• fromrgbcolor - a function that takes an RGB color as an input and returns a converted form of the color as output. The RGB color is a three-element array consisting of the red (0-255), green (0-255), and blue (0-255) components.
• torgbcolor - a function that takes a converted form of the color and returns an RGB color.
• maxes - an array containing maximum values for each component of the converted color.
• reversed - an array containing boolean values for each component of the converted color. Each value indicates whether the value goes down to up in the display rather than up to down.
• indexes - an array that determines which axes of the display correspond to which color component. 0 refers to the X-axis, 1 to the Y-axis, and 2 to the sidebar.

Two color models are included: PDColorPicker.HueLumSat and PDColorPicker.HueSatVal.

PDColorPicker.setDefaultColorModel() - sets the default color model used by the color picker.

PDColorPicker.getColorChangeEvent().add( handler ) - adds a function to call when a color picker’s color changes. The function takes two parameters: a four-element array representing the color (red/green/blue/alpha, each 0-255) and the HTML element (the text box) whose value changed.

PDColorPicker.getColorChangeEvent().remove( handler ) - removes an event handler for a color change event.

PDColorPicker.getColorPreviewEvent().add( handler ) - adds a function to call when a color picker’s color is being previewed. The function takes the same parameters as for color change events.

PDColorPicker.getColorPreviewEvent().remove( handler ) - removes an event handler for a color preview event.

PDColorPicker.addColorPickerAdapter( handler, extra ) - adds a function to call when setting up a color picker. This is used mainly to support third-party JavaScript color pickers; the function should include code that links the text box with the third-party color picker. If this function returns true, the code was linked to the third-party color picker successfully. The input parameter is the HTML element for the input text box. The extra parameter takes the following keys:

1. usealpha - whether this color picker should use the alpha channel or not.
2. info - the color model used.
3. flat - if true, shows the color selection control in-line rather than in the form of a text box and button.
4. rgbahex - if true, the color format used is RRGGBBAA, with hexadecimal components.
5. argbhex - if true, the color format used is AARRGGBB, with hexadecimal components.

The following methods are generally only useful when making color picker adapters:

PDColorPicker.createColorPickerButton( input, extra ) - adds a color picker button next to the color text box. This is a helper function used within functions called via addColorPickerHandler(). input and extra have the same meaning as in ` addColorPickerAdapter()`. Returns the HTML element for the button just added.

PDColorPicker.doColorChange( input, extra, button) - triggers the color change event, using the current value of the color text box. input and extra have the same meaning as in ` addColorPickerAdapter(). button should be the button returned from createColorPickerButton`.

PDColorPicker.doColorPreview( input, extra, button ) - triggers the color preview event, using the current value of the color text box. input and extra have the same meaning as in ` addColorPickerAdapter(). button should be the button returned from createColorPickerButton`.

History

Version 1.0

• First CodeProject release

Server-Side Processing

Every form sent to the server should be validated on the server side. The color boxes accept a wide variety of values for colors, which need to be validated and converted to a common format. Use the server-side scripts in another of my projects:

https://github.com/peteroupc/colorvalidator

That project contains scripts for five popular server-side languages: PHP, Python, Ruby, C#, and Java. These scripts are also released to the Public Domain.

About

Written in 2012-2016 by Peter O.

Any copyright to this work is released to the Public Domain. In case this is not possible, this work is also licensed under the Unlicense: https://unlicense.org/