Menu - Top - Home - Donate to Me

Color Picker

Image of color picker

Download source code: ZIP file

If you like this software, consider donating to me at this link: http://peteroupc.github.io/


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

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:

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:

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

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 is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/

If you like this, you should donate to Peter O. at: http://peteroupc.github.io/