Custom Web Software Development for the 21st CenturySM

PHP, SQLs, JavaScript, Ajax, HTML5, XHTML, & CSS3: Innovative Enterprise level Scripting for interactive sites, SaaS, & cross-platform desktop apps
  • Home
  • Automotive Dealer Website Development
  • Free software: PHP and JavaScript
  • PHP Rainbow-Maker
  • JavaScript MasterColorPicker
  • UniDOM.js x-browser solution +
  • JavaScript <input type="picker">
  • FormFieldGenie Text-Input Auto-Pop-Up
  • JavaScript <input type="range">
  • Form Input eMail Validation Script
  • PHP eMail Validation Script
  • PHP Utility Functions
  • Web Developer Resources
  • MasterColorPicker all the color you can handleSM





    RainbowMaestro mode:

    Under Construction: no functionality

    Drag panels by their handles.  Triple-click on panel handles (or this message) to return the panel(s) to home position.  Right-click or Shift-click to: pin a panel to the page when it is pinned to the window, or pin it to the window when it is pinned to the page.

    Hue angle unit values may be forced at any time when entered with a trailing unit; for example a “degrees” ° sign or by using the three letters “deg”.

    Color-blind simulations are approximate, and may vary between individuals and monitors

    MasterColorPicker MyPalette

    (choose color(s) using any color-picker or type directly)

    ▼ Options
    import from:save to:
    import merge mode
    palette headers:
    palette footers:
    save as type:
    protan deutan tritan
  • insert: new color
    • all clips
  • copy to:
    • new clip
  • cut to:
    • new clip
  • paste from:
  • delete
  • clear clipboard
  • MasterColorPicker Color-Filter

    The colors selected within this tool will mix with future colors selected from the color palettes.

    (choose color(s) using any color-picker or type directly)

    MasterColorPicker Color-Space Lab

    primarybyte value#hexpercent%
    Click here to Choose

    MasterColorPicker Gradientor

    Under Construction: no functionality

    (choose colors using any color-picker or type directly)

    MasterColorPicker Thesaurus

    Under Construction: no functionality

    This tool can help you identify the name of the closest color(s) in the chosen color-space geometry.

    (choose color using any color-picker or type directly)
    search these named-color tables:
    Spectral Progressive Color-Picker™
    click to choose 

    BeezEye Color Picker™
    click to choose
    color space
    Cyan, Magenta, Yellow, Black
    HSV / HSB
    Hue, Saturation, Value a.k.a. Brightness
    Hue, Saturation, Lightness
    Hue, Chroma, Gray
    modulates the saturation rate
    twists the color-disk at its center to make it easier to find progressive color-series
    RainbowMaestro Harmonic Color Picker™
    click to choose
    full color Protan simulation
    Deutan simulation Tritan simulation
    simulations are approximate, and may vary between individuals and monitors
    Simple² Color Picker™
    click to choose
    Chroma (Saturation)
    0→←←Brightness / Value→→←1
    YinYang NíHóngthe Tao of Color Pickers™
    click to choose
    YinYang: balance of interplay between opposites (here: light & dark, color & gray).
    NíHóng: Neon.Ní: Rainbow; You.Hóng: Rainbow; Great.
    Tao: all-encompassing unity with balance of the most simple way.
    All 16,777,216 different colors the modern computer can show within 2 clicks.


    Valid values for colors include:

    • RGB values in hexadecimal (a.k.a. hex) with or without the leading # symbol.
    • RGB values as:
      • integer byte values (0—255)
      • percent ratios (0%—100% – be sure to use the percent % symbol)

      Each value may be separated by spaces/commas/semicolons.  You may wrap() or prefix: the values with rgb( ) or rgb: but that is not necessary.

    • various different color-space models including:
      • CMYK
      • CMY
      • HSV / HSB
      • HSL
      • HCG
      • Hue ←  define only a hue-angle-value and see the full-color (fully chromatic) shade of the hue.
      • XYZ →  (Observer = 2°, Illuminant = D65) 0 ≤ X ≤ 95.047, 0 ≤ Y ≤ 100, 0 ≤ Z ≤ 108.883

      Use models by wrapping() or prefixing: their given values.  Values are given as percent ratios (0%—100% with or without the percent sign %); except Hue values are given in angular values (starting at 3:00 and going counter-clockwise) using one of the following units: (the default unit used when none is specified is found on the MasterColorPicker “options” panel)

      • in degrees (0°—360° ← postfixed using the ° symbol or “deg”).
      • in radians (0ʳ—2π≈6.28319ʳ ← postfixed using the ʳ symbol or “rad”).
      • in gradians (0grad—400grad ← postfixed using “grad”).
      • in % of a turn (0%—100% ← postfixed using the % symbol).
      • of a turn (0●—1● ← postfixed using the symbol or “turn”).
      • The “degrees” ° symbol may be entered by typing SHIFT+CTRL+5%
      • The “radians” ʳ symbol may be entered by typing CTRL+R
      • The “turn” symbol may be entered by typing CTRL+1!
    • Any of the available color-table colors.  Colors should be prefixed: or wrapped() with the appropriate color-table name.  HTMLCSS colors do not need to be wrapped or prefixed.

    Keyboard shortcuts:

    See also the Hue-Angle Symbols shortcuts above.

    CTRL+TAB |or| CTRL+.>
    Tab to the first input box in the top panel or next panel.
    Tab to the first input box in the bottom panel or previous panel.
    Shows the ☺Help☺ panel, or hides it when pressed with the SHIFT key.
    Shows the MyPalette panel, or hides it when pressed with the SHIFT key.  If there is a valid color in the input-box, pressing CTRL+F2 copies that color to the next open MyPalette entry.
    Shows the Color-Space Lab panel, or hides it when pressed with the SHIFT key.  If there is a valid color in the input-box, pressing CTRL+F3 syncs the Color-Space Lab with that color.
    Shows the Color Thesaurus panel, or hides it when pressed with the SHIFT key.
    If there is a valid color in the input-box, pressing CTRL+F7 syncs the Thesaurus with that color.
    Extended Characters
    1! ¡
    2@ © ®
    5% °
    8* ×
    =+ ±
    /? ÷ ¿
    '" π φ
    r ʳ

    • These all give the same red color:
      • 255 0 0
      • rgb (255 0 0)
      • rgb(255, 0; 0)
      • #FF0000
      • ff0000
      • HCG(0deg, 100, 50)
      • HSL: 0°, 100%, 50%
      • HSV: 0° 100% 100
      • red
      • HTML: red
      • X11( RED )
    • These all give the same blueish color:
      • 135; 206; 250
      • RGB (135, 206 250)
      • RGB: 135; 206; 250
      • #87cefa
      • 87ceFA
      • hcg(202.96deg, 45.098% 96.429%)
      • hsl:56.3768%,92,75.49
      • hsv ( .563768turn ; 46% ; 98.039% )
      • lightSkyBlue
      • html (LiGHTSKyBLue)
      • X11:lIghtskYblUE

    Using MyPalette

    You can use the “MyPalette” interface to create your own Color Palette Tables, give each color a descriptive name if you choose (i.e. what you you it for in your project) organize them into sub-palettes and give each sub-palette a descriptive name, and save the Palette Table in various formats.  You can then later reload your saved Palette Table back into the “MyPalette” interface, or as a standard MasterColorPicker™ “color-picker table” (automatically if you like).  This allows you to create projects that use the same color-set in many different images (for logos and product branding, etc.), as well as having a reference to the colors used in a design/image for later editing.  If you plan on creating final bit-map images with high-compression using a paletted-image format (such as .png), you can begin by creating and saving your palette of choice colors using MasterColorPicker’s™ MyPalette.

    When you save the palette you create, your colors and sub-palettes can be named or not or a mix, and if named it must have unique names for each color in the “main palette” as well each “sub-palette.”  Also, each “sub-palette” must have a unique name among “sub-palette names” as well as a unique name among “main palette color names.”  Names that are duplicates will be (depending on options set) either:

    • automatically appended with an index number,
    • overwritten by colors later in the palette with the same name;
    • or you will be notified of the conflict.

    When the palette you create is loaded as a MasterColorPicker™ Palette Table, colors that you leave un-named will show in the table with the color-definition next to the color-swatch; whereas colors that you do name show up in the table with the name next to the color swatch, and the color definition will pop-up when the mouse-pointer hovers over the swatch.

    Alternative color names

    Alternative spellings for color names can be included, but hidden when listed as a MasterColorPicker Palette Table.  You do this by choosing lowercase or UPPERCASE for “Alternatives” in the Export File dialog.  Then colors you name with all lowercase or UPPERCASE letters (based on your choice) become “alternatives”.  For instance, the HTML Palette includes both “Gray” and “grey” but only “Gray” shows in the table; yet the user can type Grey or gray (since color-names are case-insensitive) and expect the same color. 

    Auto-loading your palettes

    If you save your palette to your “localhost” server, the server cloud, or in the browser’s private storage (when available), it can be auto-loaded in the future when you use MasterColorPicker™.  Simply select that option when you save your palette, and that’s it.

    If you are using MasterColorPicker™—desktop, save the file as type .js and save the file in the same folder as the MasterColorPicker_desktop.htm file or in a sub-folder, or the browser will prevent you from loading it.  Then open the MasterColorPicker_desktop.htm file in your favorite text-editor and scroll down about a page or so to the bottom of the HTML document head (see the line with: </head> just above the line with: <body> ).  Just above the bottom of the head you will see multiple lines that begin with <script type="… … … — duplicate one of them and change the src="… … …" so it’s filepath leads to the file you saved from “MyPalette.”  If it is in the same folder as MasterColorPicker_desktop.htm you only need the filename: for example src="your_colors.palette.js"  If it is in a sub-folder, only include that subpath and filename: for example
    If you are using a Windows® system, don’t confuse folder seperators!  Browsers like forward-slashes / 
    Then save the MasterColorPicker_desktop.htm file.

    Exporting to CSS files

    When you export your palette to a CSS file, the Palette & Sub-Palette names and Color names take on a special meaning:  they become CSS selectors.  Color names may also instead become CSS variables.  When you save the file, the export dialog offers an option to automatically convert the Color names into a variable or a type of CSS selector, or simply let you manage all that by hand.  If any of your names begin with a valid CSS selector, it will be recognized and and the name will not be auto-converted.  If you begin a name with the $ character, the $ will be removed from the beginning of the name, and the name will not then be auto-converted;  this is a “custom-selector” for an element-name, or any other special selector that may emerge.

    When MyPalette then exports to a CSS file, the (Sub-)Palette names chain together according to their “parent Palette” and recursively its “parent Palette” to create one long CSS selector.  (Note that MyPalette does not validate your CSS, it only chains together what you create.)  If any of your Color names are — or are automatically converted to — a CSS selector, then it is appended to the selector chain of the palette it is in, and the color it defined is set as a “color: ” property/value pair for that appended chain’s resulting CSS selector.  If your Color name begins with ¡bg! (use SHIFT+CTRL+1! for the ¡ character) then it is stripped from the beginning of your colorname and the above said property/value pair is instead a “background-color: ”.  If your Color name begins with ! then it is stripped from the beginning of your colorname and the above said property/value pair is marked as “!important”.  Use ¡bg!! to do both.  For example, if your Palette name is “body” and a Sub-Palette name is “div.foobar” and a Color name in the “div.foobar” Sub-Palette is “¡bg!!warning” and “auto-convert” is set for “classes”, and the color you define is “#401000” then the output line in the CSS file would be: body div.foobar .warning { background-color: #401000 !important; }

    If your Color name is — or is automatically converted to — a CSS variable (it begins with --) then it is assigned as a property/value pair to the selector defined by the (Sub-)Palette name and its hierarchy.  Similarly, if a color has no name (after processing out “background-color” and “!important” markers) then it is assigned as a property/value pair (including its background and important properties) to the selector defined by the (Sub-)Palette name and its hierarchy.  Given the example in the above paragraph, if the Color name is simply ¡bg!! then the output is: body div.foobar { background-color: #401000 !important; } and if another Color name in the same Sub-Palette is --bazbuz with the color-definition #1000A0 then the output is: body div.foobar { background-color: #401000 !important; --bazbuz: #1000A0; }

    MasterColorPicker™ by SoftMoon-WebWare

    Copyright © 2011, 2012, 2013, 2014, 2015, 2018, 2019, 2020 by Joe Golembieski, SoftMoon-WebWare ( ):  All rights reserved.

    The Rigden Websafe Colorblind data was compiled by Christine Rigden, published circa 1997, updated 2010 ( ).  The Websafe-Color Interpolator color-blind filter function Copyright © 2019 by Joe Golembieski, SoftMoon-WebWare.

    The Wickline Color Blindness Simulation algorithmic filter function is Copyright © 2000-2001 by Matthew Wickline and the Human-Computer Interaction Resource Network.  It is used with the permission of Matthew Wickline and HCIRN, and is freely available for non-commercial use.  For commercial use, please contact the Human-Computer Interaction Resource Network ( ).

    Loading Palettes:

    Please Wait

    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 PHPPHP 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:

    1. 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.
    2. If the target-object has a JavaScript property “swatch,” then the swatch is that property’s value.
    3. If the JavaScript Object property is set, then the swatch is that property’s value.
    4. 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:

    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.