SoftMoon WebWare’s MasterColorPicker package delivers five JavaScript™ powered professional quality interactive graphical color-pickers, plus a named-color-table based color-picker framework with seven named-color database files included: Brewer, common, Crayola, HTML, OpenOffice, universal, & X11. Your chosen colors can be returned in the most popular color-space models including hexadecimal-RGB, RGB, HSL, HSB-HSV, HCG, or CMYK, or when using named-colors their names can also be returned. The different graphical color-pickers each look at the different available color-spaces in a different way, giving you complete intuitive control over finding the exact color you want. Best of all, you can work with one color-space graphically, while outputting the corresponding conversion value from another color-space. The five interactive graphical color-pickers included are:
- RainbowMaestro Harmonic Color Picker™
- Specializes in color-harmony, shows light/dark tints/tones/shades (monochromatic) of a selected hue and its complement, triadic complements, split-complements, and analogous colors, all in one color-wheel. Includes a “websafe colors” setting; Colorblind assistant shows protan, deutan, & tritan simulations of the palette and selected color.
- Spectral Progressive Color Picker™
- Shows the progression of colors in steps based on the RGB color-space. Works with browsers as far back as Internet Exploder 6.
- BeezEye Color Picker™
- Classic color-wheel shows HSL, HSB-HSV, HCG, and CMYK color-spaces (one at a time) with user-controlled Lightness/Brightness-Value/Gray/Black.
- Simple² Color Picker™
- Works with the HSL and HSB-HSV color-spaces (both at once) to bring you simple access to the tints/tones/shades of any color (hue) from the “pure” (fully chromatic) color to →black, →white, and →gray.
- YinYang NíHóng Color Picker™
- Another classic style, delivers all of the 11,777,216 colors your 24-bit monitor can show within two easy clicks using either the HSL, HSB-HSV or HCG color-spaces.
All these graphical color pickers, except for the YinYang NíHóng color picker, are designed to show colors in definite “steps” of progression, allowing you to easily work with gradients (see our Rainbow-Maker projects) and find “matching” colors from other hues/tints/tones/shades. The number of steps, or variety of colors, is user-controllable in real-time, from just a few to “high resolution”. Plus! MasterColorPicker brings you these additional features:
- The MyPalette interface
- allows users to build their own color-table-palettes, give each color a descriptive name, organize them to your liking, group them into sub-palettes, and save/retrieve them for future use or export them to CSS & GIMP palette files, allowing complete and simple management of all colors used throughout an entire project. ¡Plus! the colorblind-assistant included within helps you select colors for your project that work for everyone.
- The Color-Space Lab
- gives you direct control of, and displays a color’s definitive values in the RGB, HSV/HSB, HSL, HSG, & CMYK color-spaces. It can update automatically as you hover over a color in a palette; or you can use it to manually make color-space conversions.
- The Color Thesaurus
- (Under Construction) shows you the nearest “named color” in any one of the color-table-palettes that you choose.
- The Gradientor
- (Under Construction) gives you measured color-stops in a gradient, so you can change the opacity at regular intervals when building complex translucent background or fill gradients; or to style individual elements (perhaps each element in a list, headlines, whatever) for a decorative gradient transitional effect.
- …
- And much more… … …
Now these ain’t your grandpa’s color pickers, mind you.
The MasterColorPicker project is of a cutting-edge design
that relies on a modern computer with a modern browser.
At the time of the first MasterColorPicker release back when dinosaur browsers still roamed the Earth, only
Google’s® Chrome®,
Apple’s® Safari®,
the Opera® browser,
and Microsoft’s® new Internet Exploder 10 had this capability natively.
A hack and polyfill support also gave MSIE9 a chance to play (see the legacy files on GitHub if you’re interested).
Presently (spring 2020) all modern browsers “should” support the MasterColorPicker with ease.
¡As of late October 2014 August 2015 February 14, 2019 spring 2020,
I have pre-released MasterColorPicker version 2.0.01-alpha 2.0.02-alpha 2.0.11(+) -alpha.
I have been revamping old support files to newer, modern standards, removing all old legacy browser support.
Browsers used must embrace “modern” standards in the year 2020, or at least to say the ECMAScript-2015 standard.
Unfortunately, Internet Exploder has this way of lingering on people’s desktops.
Given that Microsoft just released a statement saying:
♪♫♪♫ “Internet [Exploder] should no longer be considered a web browser” ♪♫♪♫ (¡music to my ears!)
and is unsafe and virtually unusable on today’s modern web, I’m not looking back, still forward ☺.
Desktop vs. Server
The package includes two versions: desktop (file://) and server (http://) -based.
The desktop version can be placed in a folder on your personal computer and used to find the colors of your dream’s desire.
But while the desktop version can also be incorporated into your own web page and served from your server, you guessed it,
the server-based version requires a server such as Apache for example
(you can always put a server on your home machine, of course,
and use the server version on your desktop without a network connection).
But the server-based version is much more convenient to use if you plan on adding or deleting
named-color database tables on a regular basis.
With the server-based version, you simply create the named-color database file and add it to the proper folder; that’s it.
Or you can use the MyPalette interface to create your named-color-table and save your file to the server,
and not even worry about which folders where … or about the file formatting details …
MasterColorPicker takes care of it all for you.
Remove it from the folder when you are done with it.
With the desktop (file://) version, you must manually add and remove links to each of the named-color tables
if you want them to auto-load when MasterColorPicker starts.
You can find info on doing such in MasterColorPicker’s ☺Help☺ panel while it is up-and-running.
You will find these two (2) files in the root folder that are tools for digital media developers:
MasterColorPicker_desktop.htm and
MasterColorPicker_desktop.php
With the .htm file, no server is needed;
just click on the file and it will open in your browser.
Use a server with the .php file,
and the same desktop tool is available,
but you can save MyPalette files that you create to the server
(a private local server; or with the correct security protocols set up, a shared public server;
either of which can be a team-shared project host center), and they can be automatically
loaded as a named-color-table-palette whenever MasterColorPicker starts
by simply clicking a checkbox when you save.
Both the server-version and desktop-version of these twin desktop-tools
allow you to create, save & load MyPalette and other named-color-table-palette files
to & from your computer’s local filesystem, so without a server you are not high-and-dry;
the advantage of the server-version is the simplified autoload feature, and the centralized project host center.
As a final note on these two different files: they actually both support being used with a server!
The .htm file simply adds hardcoded links to the named-color-table files;
both files recognize the environment they are active in, and if served from a server (via http://)
the .htm file will still allow you save & load to/from the server-host.
There is another factor in deciding whether to use the desktop or server version when incorporating the
MasterColorPicker into your own website.
The named-colors database files are JSON formatted.
With the server based version, these files are loaded using JavaScript™
to make HTTP calls back to the server (think ajax), whereas with the desktop version,
they are themselves JavaScript™ files loaded with an HTML
<script src='colors-filename.palette.js'> tag.
This means that the server version can interpret the files,
whereas in the desktop version the database files are required to be legal JavaScript™.
And this means that the server version has database files that can be used easier with server-side languages,
such as PHP.
PHP has a function, json_decode() that quickly and simply converts
JSON-encoded text-strings. But the desktop version requires that the
JSON Object is assigned to something right there in the .palette.js database file itself,
and PHP can not natively read this. Of course, with a little ingenuity, you could strip off
the “assignment” within the JavaScript™-based-database file and then parse it
natively using PHP;
more overhead on overworked servers is never a good thing, though, however small.
Named-color tables
Because the named-color database tables are required to be in only slightly different formats,
and many of the files are very long, these database files only come packaged in one format: for the desktop version.
There is an included PHP powered converter which will convert all the files to the server version format.
There is also an instruction file which explains the details on how to do this using the included converter,
and also how to do this by hand.
These two files, convert_palette_formats.php and converting_palette_formats.odt,
can be found in the color_palettes folder.
Building your own named-color-tables by hand is simple to do using any basic text-editor.
If you have a list/database of colors, they can easily be incorporated into MasterColorPicker.
Complete instructions on how to do this can be found in the README.odt file
in the color_palettes folder.
However, MasterColorPicker’s MyPalette interface makes creating them from scratch a snap!
Using MasterColorPicker in your own project
It’s very easy to incorporate the MasterColorPicker (or even any of its individual pickers) into your own project.
To limit download size, but maximize ease of use, three different but similar files are included.
The desktop version is built with pure HTML (file name MasterColorPicker_desktop.htm),
while the server version is built with embedded PHP (two files, named
MasterColorPicker_desktop.php and
color-pickers/SoftMoon-WebWare/MasterColorPicker.php).
Now it should be noted not to confuse the desktop “version” with the _desktop “files”.
The desktop version is a single complete HTML page with a head and body,
while the server version splits the head and body from
the needed HTML for the MasterColorPicker project itself, so it is ready to go in any web page as is.
The _desktop “files” both give you a browser-based desktop tool for use in digital media development.
The PHP generated HTML is essentially the same as the pure HTML,
except the PHP can keep track of the settings on the individual pickers, and keep them set the
way the user sets them, in between page invocations.
Doing this requires that the color-pickers HTML be either enclosed within a <form method='post'>
tag, or otherwise “attached” to a form, and submitted back to the server.
Generally, if you are picking a color, you will be sending form data anyway.
But you do not need to use the PHP file with the rest of the server version.
(What defines the server-version is the way named-color tables are used:
see Desktop vs. Server).
Simply “cut out” the proper section of HTML from the _desktop.htm file
(the file is commented so you can tell what to cut), and either make it a new file: MasterColorPicker.htm
or simply paste it into your own web-page file; either way you then incorporate the MaterColorPicker HTML
at whatever place in your document you desire.
To use the PHP file with your PHP webpage, simply place
<?php include "color-pickers/SoftMoon-WebWare/MasterColorPicker.php"; ?> in your document at the
appropriate place.
Or you can use your own HTML, with no restriction on the tags used, and minimal requirements on the
structure: just place a few ids on appropriate wrapper elements.
You can use and/or modify the supplied CSS files, or write your own
(see customizing MasterColorPicker below).
Link the main MasterColorPicker.css file in the head of your document if you plan on using it.
If you plan on using MasterColorPicker in your own HTML page, and want that page to be usable
as a desktop-version, in essence where the user clicks on the file saved in their local file-system
and it opens in their browser with the URL beginning with file://
you must include a <style id='MasterColorPicker_desktop_stylesheet'> tag
directly in the HTML page (¡not linked!) that includes the well-documented
snippet of CSS found at the end of the similar <style> tag
in the <head> of the MasterColorPicker_desktop.htm file.
This is because the stylesheet must be modified directly in real-time by JavaScript,
and browsers block JavaScript from reading files linked or loaded from the local file-system
unless the end-user specifically selects that file by hand.
Your HTML (web page) file must be encoded in UTF-8. You should already be using this encoding in all your web page files anyway. JavaScript™ is required to be encoded in UTF-8, and this project uses a character set beyond the standard ASCII characters. Remember, UTF-8 is the #1 international choice for character encoding.
Using the Picker interface
MasterColorPicker is built on an instance of SoftMoon-WebWare’s Picker interface,
which creates a new input “type:” picker.
Using this interface is easy.
The most simple way to use this project is to place anywhere within your document any number of
<input type='MasterColorPicker' /> tags and/or
<input type='text' pickerType='MasterColorPicker' /> tags.
The MasterColorPicker will find them when the document is fully loaded and automatically “register them,” i.e.
add the necessary event-handlers to interface with the Picker.
Using <input type='color' pickerType='MasterColorPicker' /> tags can work with the MasterColorPicker
also, and with browsers that already support this natively, you will get the native color-picker plus the MasterColorPicker;
but caution: the W3C specs say that <input type='color' /> should limit
the user’s input to basic ways of defining colors, which means that your MasterColorPicker implementation should limit
its output to hexadecimal RGB with a leading # symbol.
If you don’t like non-standard tag attributes, or you otherwise want to link an input tag to the MasterColorPicker,
after the MasterColorPicker.js file is loaded, you can use JavaScript™ to
link the input tag something like this:
<script type='text/javascript'>
myInput=document.getElementById('myMasterColorPickerInput');
MasterColorPicker.registerTargetElement(myInput);
</script>
A registered target element activates the Picker when the user clicks on it, or it otherwise receives “focus”.
Using the “color swatches”
When a color is clicked on, the target element’s value is changed to the color-value-text.
Also, the associated “color swatch” has its background-color changed to the user-selected color,
while its foreground-color becomes either black or white, opposing the background-color’s brightness.
The “color swatch” is either the target element itself when MasterColorPicker.showSwatchAs='background',
or when MasterColorPicker.showSwatchAs='swatch' the color swatch
is determined by the first valid condition in this list:
- If the target is as such:
<input swatchId='myDocumentId' />then the swatch is a document element with an id that matches “myDocumentId” if it exists. - If the target-object has a JavaScript™ property “swatch,” then the swatch is that property’s value.
- If the JavaScript™ Object property
MasterColorPicker.swatchis set, then the swatch is that property’s value. - The document Element that follows the target-input.
Be sure to read the end of the file MasterColorPicker.js
for more details on using the “color swatch”.
Targets other than text <input>s.
You don’t need to use an <input type='text' /> with MasterColorPicker.
<textarea>s, <select>s, <input type='text' list='datalistID' />s,
and even document text-nodes are automatically recognized by the MasterColorPicker.pick() method.
By default, the JavaScript™ value of
MasterColorPicker.dataTarget.value is set when a color is picked.
If no dataTarget is set then the MasterColorPicker.masterDataTarget is used, if any.
The dataTarget and masterDataTarget each may be any
JavaScript™ Object.
Or they may be <input type='hidden'> if you don't care to show the user the dirty color-code,
but want to send the value back to the server with a form-submittal.
To supplement this functionality, add a JavaScript™ function to the
Array of MasterColorPicker.pickFilters.
To replace this functionality, replace the MasterColorPicker.pick method with your own function.
See the file JS_toolbox/SoftMoon-WebWare/Picker.js for more details.
Structuring your own HTML and CSS
The visual presentation of the individual color-pickers is up to you.
There are a few comments within the supplied HTML/PHP files
which will not be repeated here; you should read them.
One general consideration concerns the <canvas> tag widths & heights;
you may modify them, keeping in mind that the color-pickers build their palettes based on the given width
of the <canvas>, so it is best to keep the width/height of the canvases equal
(excepting some of the canvases in the Simple² & YinYang NíHóng pickers).
The important requirements to follow are listed below for each of the color-pickers in the MasterColorPicker project:
RainbowMaestro Harmonic Color Picker™
HTML requirements:
- There must be a “wrapper” tag with an
id='RainbowMaestro'containing:- 4
<canvas>tags - all the corresponding
<input />tags found in the supplied files. - 4 tags with
class='subpalette_swatch'. They will show the color of the hovered-over color for each individual<canvas>.
- 4
- Each
<canvas>tag must be wrapped in its own “wrapper” tag. - The
<input />tags in your file must have the same names, types, & values found in the supplied files. - There should be a tag with
id='RainbowMaestro_indicator'. It will show the text-output for the hovered-over color. It should have text in it by default, if only a blank space, with no other tags, at the beginning. - There should be a “wrapper” tag with
id='RainbowMaestro_hueIndicator'. The last tag within this wrapper will show the hovered-over hue as a value in degrees. - There should be a tag with
id='RainbowMaestro_swatch'. It will show the color-output for the hovered-over color that matches the text-output.
CSS requirements:
none.- There must be a “wrapper” tag with an
Spectral Progressive Color Picker™
HTML requirements:
Do not alter the HTML for this picker.CSS requirements:
none.BeezEye Color Picker™
HTML requirements:
- There must be a “wrapper” tag with an
id='BeezEye'containing:- A
<canvas>tag - all the corresponding
<input />tags found in the supplied files.
- A
- The
<input />tags in your file must have the same names, types, & values found in the supplied files. - There should be a tag with
id='BeezEye_indicator'. It will show the text-output for the hovered-over color. It should have text in it by default, if only a blank space, with no other tags, at the beginning. - There should be a tag with
id='BeezEye_swatch'. It will show the color-output for the hovered-over color that matches the text-output.
CSS requirements:
none.- There must be a “wrapper” tag with an
Simple² Color Picker™
HTML requirements:
- Your file must be encoded in UTF-8.
- There must be a “wrapper” tag with an
id='Simple²'containing:- 5
<canvas>tags - all the corresponding
<input />tags found in the supplied files.
- 5
- The
<input />tags in your file must have the same names, types, & values found in the supplied files. - Each
<canvas>tag must be wrapped in its own “wrapper” tag, and each wrapper tag must have an id corresponding/matching the ones wrapping the canvas tags in the supplied files; be sure to use the proper combinations of caps/lowercase. Note some canvases are filled vertically, others horizontally, so set their height/width appropriately. - There should be a tag with
id='Simple²hue'. It will show the hue in degrees for the displayed colors. It should have text in it by default, if only a blank space, with no other tags, at the beginning. - There should be a tag with
id='Simple²saturation'. It will show the saturation level for the displayed colors. It should have text in it by default, if only a blank space, with no other tags, at the beginning. - There should be a tag with
id='Simple²lvl'. It will show the Brightness/Value/Lightness level for the displayed colors. It should have text in it by default, if only a blank space, with no other tags, at the beginning. - There should be a tag with
id='Simple²_indicator'. It will show the text-output for the hovered-over color. It should have text in it by default, if only a blank space, with no other tags, at the beginning. - There should be a tag with
id='Simple²_swatch'. It will show the color-output for the hovered-over color that matches the text-output.
CSS requirements:
none.YinYang NíHóng Color Picker™
HTML requirements:
- Your file must be encoded in UTF-8.
- There must be a “wrapper” tag with an
id='YinYangNíHóng'containing:- 3
<canvas>tags - all the corresponding
<input />tags found in the supplied files.
- 3
- The
<input />tags in your file must have the same names, types, & values found in the supplied files. - The first
<canvas>tag is the background with the rainbow-ring and main section of the Yin-Yang. The second<canvas>tag is the “hue swatches” (the animated disks of the Yin-Yang). The third<canvas>tag is the monochromatic gradient (the central part of the color-picker). For best results, if you modify the width/height of these canvases, keep them proportional in size to what is given in the supplied files. Also pay heed to the CSS positioning of these canvases, one over the other. - There should be a tag with
id='YinYangNíHóng_indicator'. It will show the text-output for the hovered-over color. It should have text in it by default, if only a blank space, with no other tags, at the beginning. - There should be a tag with
id='YinYangNíHóng_swatch'. It will show the color-output for the hovered-over color that matches the text-output.
CSS requirements:
- Pay heed to the CSS positioning of the 3 canvases, one over the other, based on their size.
When the user clicks on a registered target element or it otherwise receives “focus,”
the MasterColorPicker is activated.
When activated, the MasterColorPicker “main panel” and “options panel” (see the HTML),
as well as the currently selected color-picker,
all receive the classname “activePicker”.
There are other classnames added to various HTML elements in the MasterColorPicker under other various conditions.
For more detailed info on what classnames are applied and when, please see the comments in the
JS_toolbox/SoftMoon-WebWare/Picker.js file.
To modify these used classnames, modify the values of the JavaScript™
properties of MasterColorPicker.classnames.
By understanding when and why these classnames are applied,
you can create your own CSS file to control the dynamic display of the MasterColorPicker.
Adding & removing color-pickers
You may add your own color-pickers to, or remove individual color-pickers from the MasterColorPicker framework.
To remove one or more of the included color-pickers, simply remove its HTML
and JavaScript™ from the given files.
The sections are clearly deliminated with comments.
The x_ColorPicker JavaScript™ Class is universal to
all color-pickers in the MasterColorPicker framework, and should remain.
Don’t forget to lighten the weight of the CSS file, but that is not a requirement.
Adding your own (or someone else’s) color-picker is easy.
Its HTML should be included within the MasterColorPicker_mainPanel (see the supplied files),
and its id should match the choice offered in the palette_select.
You should of course add this choice to the palette_select.
The palette_select choice may have spaces to match the “display name” of your added color-picker,
and these will be removed when matching an id;
for example a choice of “YinYang NíHóng” corresponds to id “YinYangNíHóng”.
To interface another color-picker with the MasterColorPicker framework is easy,
but as powerful things go, this process has details that must be understood to fully utilize.
Most simply, when a color is selected, using JavaScript™,
simply call MasterColorPicker.pick(……colorChoiceText……);
however this bypasses the central x_ColorPicker framework which can
convert the choice to the user’s color-space preferences,
and set the color of “color swatches”.
Using the x_ColorPicker framework is a bit different, as it is “event” oriented.
Please read the comments in the MasterColorPicker.js file regarding the x_ColorPicker framework,
but here are some basic additional notes.
The x_ColorPicker framework offers
a handleMouse method for onmouseover, onmousemove, and onmouseout events,
and a handleClick method for onclick events.
They require two arguments passed in, yet browsers only pass in the first by default: the event object.
So you must either use your own event handler which calls these x_ColorPicker methods,
or, more conveniently, use the UniDOM framework that is included with this package to add these methods
as event handlers.
Take a close look (in the MasterColorPicker.js file at the end of each color-picker’s section)
at how the supplied color-pickers add their event handlers using the
UniDOM framework, and how the args object is passed on to the x_ColorPicker methods
by adding it as a final argument passed to UniDOM.addEventHandler(………).
Building your own color-pickers
SoftMoon-WebWare’s Picker Class framework
on which the MasterColorPicker is based is a powerful tool that creates
an <input /> “type = picker”.
Your color-picker can be as complex as you need it to be, with multiple “interface panels,”
interactive inputs that modify the picker and/or its choices, etc.
Please carefully read the JS_toolbox/SoftMoon-WebWare/Picker.js file and its comments
about “registering” these interface panels and interface elements.
Registering them adds the necessary event handlers for them to work correctly with the MasterColorPicker framework.
All HTML elements that require keyboard “focus”
(such as <input type='text|file|number|etc.' /> <select> <textarea>)
that are part of your picker must be registered
using MasterColorPicker.registerInterfaceElement(……element……).
Note how you can use this feature to replace the <input type='range' /> elements in the supplied files
with <input type='text' /> elements if you register them.
This will allow users to enter illegal or overwhelmingly large values, so to get this to work properly,
you should also add a plethora of JavaScript™ keyboard filters
to make sure that, say, the variety value on the RainbowMaestro isn’t set for 10,000 which would lock up the
display for a few minutes or so (multiply by 5 for MSIE)
while the millions upon millions of calculations are done.