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 nine named-color database files included: ANSI, Brewer, common, Crayola, CSS, Material Design, OpenOffice, universal, & X11. Your chosen colors can be returned in the most popular color-space models including hexadecimal-RGB, RGB, HSL, HSB/HSV, HCG, HWB, 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, HCG, HWB, & CMYK color-spaces. It also allows you to add an Alpha (opacity) value to your selected color, automatically if you choose. 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
- shows you the nearest “named color” in any one of the named-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 relies on a modern computer with a modern browser. Browsers used must embrace “modern” standards in the year 2022. Also, MasterColorPicker was designed as a professional’s tool, not a toy to be used on an ity-bity laptop, or other portable device with a small monitor. While most of MasterColorPicker’s panels adjust to the monitor height, the Color-Space Lab is (for now at least) a fixed size, and can be trouble to drag and move on a smaller browser window. A wide screen is also preferable when multiple panels are open at once. But some smaller monitors may still be manageable.
file:// vs. http://
MasterColorPicker automatically adapts to the environment that it is used in.
It can be placed in a folder on your personal computer and
loaded into a browser using the file:// protocol
(you click on the file in your filesystem for example);
or it can be placed on a server and loaded into a browser using the http:// or https:// protocol.
The server may be remote, public or private (in “the cloud” or in a private network);
or be a localhost/ on your personal computer.
Both protocols offer similar functionality, but server-based usage is much more convenient
if you plan on adding or deleting named-color database tables on a regular basis.
With server-based (http:// or https:// protocol) usage,
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 and even lets you autoload them in the future.
Simply remove your database file from the folder when you are done with it.
With file:// protocol usage, 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.
Both file:// and http:// (& https://) protocol usages
allow you to create, save & load MyPalette and other named-color-table-palette files
to & from your computer’s local filesystem,
or the borwser’s private storeage database,
so without a server you are not high-and-dry;
the advantage of server usage is the simplified autoload feature,
and having a centralized project host center for multiple developers.
You will find these two (2) files in the root folder that are tools
for digital media developers to find the colors of their dream’s desire:
MasterColorPicker_desktop.html and
MasterColorPicker_desktop.php
With the .html file, no server is needed;
just click on the file and it will open in your browser.
With the .php file you of course need a server with PHP installed,
and the same desktop tool is available,
but it is an example of how you can incorporate MasterColorPicker into your own web page,
and also of the subtle differences in the CSS and how the palette files are loaded
(no HTML <script> tags needed to load them).
¡Note both files support being used with a server!
There are two simple, primary differences between the files:
First, the .html file adds hardcoded links to the named-color-table files;
(¡note both files recognize the environment they are active in, and if served from a server (via http:// or https://)
the .html file will still allow you save & load palette files to/from the server-host!)
Second, the .html file adds a copy of some of the CSS styling
directly into the HTML markup, which is needed for MasterColorPicker to work,
since, for security reasons, browsers prevent a web page
from reading any other files loaded from the local file system,
including its own CSS stylesheet file (unless the user selects them by hand).
The named-colors database files themselves need to be adapted to the protocol they are used in.
With server based (http:// or https:// protocol) usage,
these files are JSON formatted,
and loaded using JavaScript™
to make HTTP calls back to the server (think ajax);
whereas with file:// protocol usage,
they are themselves JavaScript™ files loaded with an HTML
<script src='colors-filename.palette.js'> tag.
Without a server, the palette files need to be hard-coded into the web page.
However, the server can tell MasterColorPicker what files are available
and MasterColorPicker can load what it wants.
Look at the difference in the two MasterColorPicker_desktop files
for an example of this principle.
See also the file color_palettes/index.php and note that
it is a relatively simple file that can be replaced with one in another programming language (Node.js, Perl, etc.);
using a server with MasterColorPicker is not limited to one with PHP installed.
Except for the “demo” MasterColorPicker_desktop.php file,
the palette index file is the only active file on the server
(except for some “utility files” that are not technically part of the project and are not required),
and even it can be replaced with a simple .txt file.
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 file:// protocol usage (extention .js).
There is an included PHP powered converter which will convert all the files
to the server (http:// or https:// protocol)
usage format (extention .json).
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 (which is remarkably simple) if you don't have PHP installed.
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 MasterColorPicker into your own project.
To limit download size, but maximize ease of use, the MasterColorPicker package comes with
only the _desktop “tool” file.
Simply “cut out” the proper section of HTML from the MasterColorPicker_desktop.html file
(the file is commented so you can tell what to cut), and either make it a new file:
color-pickers/SoftMoon-WebWare/MasterColorPicker.htm
that you can load into your webpage, for example using
<?php include "color-pickers/SoftMoon-WebWare/MasterColorPicker.htm"; ?>
in your web-page document at the appropriate place;
or simply paste the MasterColorPicker HTML you cut-out into your own web-page file;
either way you then incorporate the MaterColorPicker HTML
at whatever place in your document you desire.
Take a look at the “demo” MasterColorPicker_desktop.php file
and note that it “includes” the
color-pickers/SoftMoon-WebWare/MasterColorPicker.htm file,
and how the required JavaScript™ and CSS files are loaded.
Note that if you want your webpage to be loadable from the local filesystem
using the file:// protocol (you click on the file in your filesystem for example),
you must also include links to the named-color-table palette files
(see the MasterColorPicker_desktop.html file for that example).
To actually make the “demo” MasterColorPicker_desktop.php file
function as the MasterColorPicker tool, you will need to “cut-out” the proper section of HTML
from the MasterColorPicker_desktop.html file as described above,
just as you would for your own web-page.
This is to avoid duplication in the package to limit download size.
Link the main MasterColorPicker.css file
in the head of your document if you plan on using it.
Note how if you want your web-page to be able to be loaded in a browser
with the URL using the file:// protocol
(you click on the file in your filesystem for example),
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.html 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.masterTarget is used, if any.
The dataTarget and masterTarget 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.
MasterColorPicker’s™ file system structure.
The MasterColorPicker™ JavaScript™ codebase does not rely on
any particular file-system structure or filenames,
¡except! for the color_palettes/ folder
and its index.… file
when using http:// or https:// protocol to load your web-page (i.e. it is loaded from a server).
As noted above, the included index.php file may be replaced
by another index.… file in another programming language
or even a simple text file, but it must be named “index”
for the server to automatically find it.
The color_palettes/ folder may be renamed if need be;
however, you must then modify the value SoftMoon.colorPalettes_defaultPath
either directly (¡before the color-palettes load!)
or by modifying the file JS_toolbucket/SoftMoon-WebWare/RGB_Calc.js
(at the file’s beginning).
The color_palettes/html-indexer.php file is optional, but its name also must remain unchanged.
It will allow end-users the ability to get an HTML-based index with hyperlinks of the
color_palettes/ folder and its sub-folders by simply typing something like:
https://mywebsite.com/color_palettes/?html in their browser’s address bar.
Then the included color_palettes/index.php file
(which the server will automatically use when no filename is specified in the folder)
will call the color_palettes/html-indexer.php file
instead of generating a simple flat text-based index.
If you have sub-folders in your color_palettes/ folder,
you can then copy the html-indexer.php file
into those sub-folders, but then rename it index.php in those sub-folders
so the server will automatically use it.
Don’t copy the included color_palettes/index.php file into sub-folders;
it is not needed.
Other folders and filenames may be changed or moved to suit your filesystem arrangement and organization.
You simply need to modify the <script> tags that actually load the files to match your new filepaths.
¡The order the <script> files load is important!
You can defer them for faster page rendering.
As of 2022, the hard-coded <script> tag that defines the
SoftMoon.WebWare & SoftMoon.loaded_palettes namespace properties
should always go before any other MasterColorPicker™ files or Palette files.
Developers should note that the files in the folder +++JS/
modify standard JavaScript™ Objects and/or their prototypes.
That is why they have been given thier own folder — to make it easier to keep track of in case of conflicts.
Structuring your own HTML and CSS
The first releases of MasterColorPicker focused on separating the
JavaScript from the HTML and CSS as much as possible.
As the project evolved and bells and whistles were added,
these three aspects of the project became more and more intertwined.
Modifying any aspect of the project will require careful testing.
In particular, the MyPalette interface is pretty tight.
The end of the MasterColorPicker.js file
in particular relies on the standard HTML & CSS files.
Below you will find info on modifying older aspects of the project:
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.
Panels are registered using MasterColorPicker.registerInterfacePanel(……element……)
All HTML elements that require keyboard “focus”
(such as <input type='text|file|number|etc.' /> <select> <textarea>)
that are part of your picker but are not on a registered “interface panel” must be registered
using MasterColorPicker.registerInterfaceElement(……element……)