Custom Web Software Development

JavaScript, HTML 5, CSS 4, & PHP 8: Innovative Enterprise level Scripting for interactive sites, SaaS, & cross-platform desktop apps
  • Home
  • Automotive Dealer Website Development
  • Free desktop apps
  • Rainbow-Maker
  • MasterColorPicker
  • Free libraries: JavaScript and PHP
  • <input type="picker">
  • RGB_Calc color-space converter
  • FormFieldGenie fieldset multiplier
  • UniDOM.js x-browser solution +
  • eMail address validation scripts
  • PHP Utility Functions
  • ActiveState Komodo Edit support
  • MasterColorPicker all the color you can handleSM




    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” ° symbol or by using the three letters “deg”.

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

    MasterColorPicker Palette Manager

    Browser DataBase
      All users
        Server Based: 
          All users:

            MasterColorPicker MyPalette

            (choose colors 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-Mixer

            Color-picker Filter

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

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


            Use this tool to experiment with partially-transparent colors to see how they blend with other colors or over a given image.  Choose swatch colors using any color picker or type directly; double-click a swatch to edit it.  Then drag the swatches into the “playground” area below.  Click on a swatch to bring it to the top of the stack.  You may also drag the swatch off this panel to experiment, where it will remain until you drag it back on.

            MasterColorPicker Color-Space Lab

            primarybyte value#hexpercent%
            HSL HSB/HSV HCG HWB

            MasterColorPicker Gradientor

            mix format:
            Enter gradient colors and offsets below

            You may use pixels or percents % or a mix as units for the offsets.  If you use pixels, your last color’s offset must be in pixels.  See ☺Help☺ for more info.

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

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

            MasterColorPicker Thesaurus

            This tool can help you identify the names of the closest colors in the chosen Palettes.

            Choose color using any color-picker, press CTRL+F7 from another color-input with a valid color, or type directly.
            Search these named-color Palettes:


            Colors with MasterColorPicker

            MasterColorPicker uses a color-specification based loosely on the CSS4 specs. It will always output colors according to those specs, with a few exceptions that can be activated using “options”:

            • It can define colors using some color-spaces that CSS does not recognize.
            • It can define “hue angles” using units and/or symbols that CSS does not recognize.
            • It can output more “named colors” than the basic CSS list of colors.
            • It can add non-standard Alpha (opacity) values to “named” colors.

            Valid values for color inputs are similar to “loose” CSS specifications and include:

            • RGB values in 6-digit hexadecimal (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.  You may mix byte and percent values in the same spec.  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
              • HWB
              • Hue ←  define only a hue-angle-value and see the full-color (fully chromatic) tone 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.  Each value may be separated by spaces/commas.  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, the symbol, or “rad”).
              • in gradians (0ᵍ—400ᵍ ← postfixed using the symbol or “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 ALT+C
              • The “radians” ᴿ symbol may be entered by typing ALT+R
              • The “gradians” symbol may be entered by typing ALT+G
              • The “turn” symbol may be entered by typing CTRL+1!
            • Any of the available “named-colors” found in the color-table-palettes.  Colors should be prefixed: or wrapped() with the appropriate color-table-palette name.  “Named color” palettes may have sub-palettes; you may or may not need to include the sub-palette name in your color-spec, depending on the palette.  Generally, if all the colors in the parent palette and its sub-palettes have different names, no sub-palette is required in the spec.  For examples: ANSI: 35 ANSI: 8-bit: shades and tones: 35 ANSI: Ubuntu: Cyan ANSI: 3-bit & 4-bit: Ubuntu: Cyan ANSI: Windows 10 Console: Cyan CSS is the “default” palette and its colors do not need to be prefixed or wrapped.  Hackers can change the default palette thought the value at: SoftMoon.defaultPalette

            Alpha (opacity):

            You may specify opacity (the opposite of transparency) in any of the color space models (RGB, CMYK, CMY, HSV, HSL, HCG, HWB, Hue) by adding an additional factor (0-1) or percent (0%-100% ← you must use the percent % sign).  The color-space model names may or may not end with an additional “A” (for example, RGB vs. RGBA). Per CSS4 specifications, the opacity value may also be separated with a / symbol that is itself preceded and followed by a space; for example RGBA(0, 153, 255 / 62%)  Note the “loose” interpretation of CSS specs allows commas with the / alpha separator. Hex-RGB values may have an additional 2 hex digits to specify the alpha; for example #ADDCAD80  Named colors may use the same Alpha specification for color space models described above, but it must end with either a semicolon ; or a space followed by opacity;  For examples:

            • Green 30%;
            • DodgerBlue, 78%;
            • ANSI: 35 / .84 opacity;

            • 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
              • CSS: 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
              • css (LiGHTSKyBLue)
              • X11:lIghtskYblUE

            A quick note about color-space conversions, and the CMYK and LCH color spaces

            The CMYK color space was designed for print-graphics using inks that “mix” on white paper.  It is supported herein to help those more familiar with how inks mix in the printing world, although in real-life situations, each printer will have its own “formula” for converting the image on your screen to a mix of inks, and these inks may include more than simply cyan, magenta, yellow, and black.  The other color-spaces supported herein are designed for screen-graphics using pixels of light; each pixel consists of a red, a green, and a blue light, (thus the standard RGB color space) each that illuminate to varying degrees and that “mix” together in our perceptual system to produce the specific color desired.  The two processes are very different.  Mixing different colored inks together can make a darker color; so can adding black ink.  To make screen-graphics darker, there is no "black" colored light; the pixels of light are dimmed.  The formulas to convert CMYK to/from RGB can yield very different results when converting CMYK to RGB and then back to CMYK, when the CMYK inks would produce a darker visual result.  Less “color” and more black will be the resulting CMYK specification; this is normal.

            The so-called “cylindrical” color-spaces (HSL, HSB, HCG, HWB) may also yield different results when converting to RGB and then back.  The reason for these differences is based on the geometry of the color-spaces, and how the same actual color is found at multiple “places” in the given space (especially, but not limited to grayscale); whereas the RGB color-space has a unique color at each “place”.  Note these reasons are in addition to “round-off” differences noted in the “Options” panel for the “keep precision” option (hover your mouse over it to read the note).  You may notice all these differences (including the note on CMYK above) if you use the Color-Space Lab and type in values manually.  You may also notice these differences if you use the Gradientor and choose to grade through one of these color-spaces when the color you choose is specified in the same color space, and the color-picker output is also specified in the same color-space.

            The LCH color-space is another "real-life" specification that is not directly compatible with current computer monitor screens or the color-spaces used within this software to specify colors.  This is because these other color-spaces are relative, whereas the LCH color-space is absolute.  Your monitor is fairly unique.  It has a maximum brightness that is different from other monitor makes/models.  Each colored light in the pixels has its own maximum brightness, which changes the overall color-mix.  Each monitor has a different “contrast ratio” which defines how dark the "black" is.  Compare a typical Apple® monitor to a nice ViewSonic® monitor with 20,000:1 contrast ratio, and the Apple® looks “washed out” in color and a bit “brighter” because the black is not as dark.  In addition, the ambient light that the monitor is in can effect the overall perception of the user viewing the screen.  Furthermore complicating this matter, the user can typically change the settings of the monitor to adjust the overall brightness, contrast ratio, and sometimes even the color-balance.  The color-spaces used to define colors for screen-graphics take these differences into account; They simply say "the brightest red is the brightest that whatever monitor with whatever settings used can make" and so forth for the other colors; the value given is relative to the monitor.  Therefore the exact same graphic will look different on different monitors.  The LCH color space says there is no limit to the brightness; it says “I want it exactly this bright” and that should look the same on any monitor.  At this time, there is no way for the JavaScript software to “know” the exact current specs of the monitor being used or its current user-adjusted settings (it is hardware dependent, and that spec would need to be “told” to JavaScript by the Operating System), so there is no way to adjust the mathematical formula for converting LCH to/from RGB to match the monitor.  One must also question the logic of allowing software, even at the level of the Operating System, to display an image with “absolutely-defined” brightness levels that are brighter than the user cares to view at the given moment, i.e. the user has the monitor’s brightness at or near minimum, especially if the user is in a dark environment; a photo of the rising sun may temporarily blind the user, like looking directly into a camera's flash-bulb at night.  A much smarter solution would be to expand the overall capacity of monitors to allow greater brightness, as well as the capacity of computer memory and graphics chips so that each color-channel has a greater resolution than 8-bits, while adding an additional spec to the “relative” color-spaces used within this software to define whether they describe a “standard” (the current 8-bit) or “expanded” brightness level.  The LCH color space may be good for photography when trying to capture a real-life image with the greatest fidelity; but for graphic & web-page design, where most visual aspects are better rendered relatively, it is a poor choice: the other color-spaces supported within this software are preferred.  Therefore the LCH color space is not supported by MasterColorPicker at this time.

            Keyboard shortcuts:

            These are defined for a QUERTY keyboard; other keyboards may be similar.  Hackers of JavaScript™ can redefine these keys:  MasterColorPicker.panelTabKey  and  MasterColorPicker.panelBacktabKey  if their keyboard normally generates different characters than > and < when the CTRL key is pressed.

            Note browsers usually keep (SHIFT)?+CTRL+TAB and F7 for themselves, but if not…you can use them!  See also the Hue-Angle Symbols shortcuts above.

            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 with keyboard-focus, pressing CTRL+F2 copies that color to the next open MyPalette entry.  If keyboard-focus is within MyPalette (you are typing in colors or their names, etc.), pressing CTRL+F2 creates a new sub-palette.
            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.  (usually is available even if F7 is not)
            Shows the Color Thesaurus panel, or hides it when pressed with the SHIFT key.  (this is the typical key for a thesaurus in many applications)
            If there is a valid color in the input-box, pressing CTRL+F7 syncs the Thesaurus with that color.
            Extended Characters
            key CTRL CTRL+SHIFT
            1! ¡
            2@ © ®
            5% °
            8* ×
            =+ ±
            /? ÷ ¿
            '" π φ
            key ALT
            R ᴿ

            Some specific “input-sliders” may be temporarily changed to text-based numeric inputs when using browsers for big boys & girls (here’s winkin’ at ►you, Apple®!). Focus the “slider” by clicking on it or by using the Tab key then press a numeric key (09) to modify the value directly, or NumLock to see the current value that you can then modify.

            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 use 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” Palette (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 name in the “main palette” or “sub-palette” it is in, among “color names” and “sub-palette 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.

            Palette and Sub-palette names may not contain the :( characters, as these are used to distinguish the palette name from the color/sub-palette name in the palette.  Color names may contain any characters, but two “hacks” are possible. First, you could name a color foo: bar, and if, in the same palette, there is a sub-palette named foo with a color named bar it will never be found.  Also, because of how MasterColorPicker interprets “add-on” Alpha (opacity) values when working with named colors, a color named foo 30%; will be interpreted as a color named “foo” and then try to add a 30% opacity to the color-value if it finds said color.

            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 CSS Palette includes both “Gray” and “GREY” but only “Gray” shows in the table; yet the user can type Grey or gray (note color-names are also case-insensitive) and expect the same color. 

            Saving/Exporting your Palettes

            You can save the Palettes you create in various formats at various locations.  Each format has a different use and each location has its benefits and drawbacks.

            The browser’s private storage

            When you don't have access to a friendly server, the browser’s private storage can be the option that gives you the fastest, easiest workflow for current projects, as it will allow you to save MyPalette files and have them “autoload” as a MasterColorPicker™ Palette Table.  Each browser has a private storage “sandbox” that is unique for each “website” and/or each HTML page.  The JavaScript™ code can not store or access data outside the sandbox, and the data stored is not accessible by any other website, nor, generally speaking, is it readily accessible by the user of the browser outside of using the website (it will be on your storage drive somewhere so hacks are possible).  MasterColorPicker™ uses the JavaScript™ IndexedDB database interface to store your MyPalette files.  The “sandboxed” ►storage has a limit that should, under most circumstances, handle all of your files.  However, you should be aware that the browser may delete them at any time, and that you may delete them at any time through the browser’s interface as described in the above link.  For that reason, you should save your Palette files in another more permanent location for long-term storage.

            Storage in a “localhost” server or a server “in the cloud”

            This requires that you (or your friends) have control of the server and requires the included color_palettes/index.php file or a similarly functioning file in another language (it’s a simple short file to translate).  A “localhost” server (a private server on your own computer) will offer you the most flexibility and convenience when saving/storing your MyPalette files, while a “shared central hub” server (possibly “in the cloud”) works great for teams that need to share files.

            Local file system storage

            You can always store your MyPalette files in any folder on your computer; however, this is the only option where MasterColorPicker™ does not have direct access to the file (JavaScript in a browser never has direct access to your file system) so it can not be simply autoloaded — you must manually add links to the HTML file containing MasterColorPicker™ — see below … … …

            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 with the file:// protocol (you click on the MasterColorPicker_desktop.html file in your file system, for example), save the Palette file as type .js and save the file in the same folder as the MasterColorPicker_desktop.html file or in a sub-folder, or the browser will prevent you from loading it.  Then open the MasterColorPicker_desktop.html 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 its filepath leads to the file you saved from “MyPalette.”  If it is in the same folder as MasterColorPicker_desktop.html 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 separators!  Browsers like forward-slashes / 
            Then save the MasterColorPicker_desktop.html 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; }

            Using the PaletteManager

            The PaletteManager will help you keep track of Palette files you save to your browser’s private storage DataBase as well as files you save to a server.  This is the only way you can manage your browser’s private storage without hacking your browser’s filesystem — or simply deleting all stored data through your browser’s “options” menu.  For a remote server, this gives you an opportunity to manage the files directly without having to pester Eugene in the I.T. department.

            Most functions are self-evident; to rename a file, you can:  •double-click, or •shift-click, or •right-click (the “menu click”), or when using browsers for big boys & girls (here’s winkin’ at ►you, Apple®!) from the MasterColorPicker color-input textbox (with the PaletteManager panel open), press SHIFT+CTRL+.> until focus is within the PaletteManager panel, then press TAB until focus is on the file you want to rename, then you can •double-press ENTER or •use SHIFT+ENTER or •use the “menu” key (looks kinda like this: ) when present.

            Using the Gradientor

            MasterColorPicker’s Gradientor can not only help you simply pick your color-of-choice from a gradient of mixed colors, it can help you break-down a gradient into equally-measured interval “steps”.  You can then choose colors from the gradient at these measured intervals with ease, for styling list elements or headlines or whatever, for example, using a small set of interval “steps”.  The colors of the gradient between steps are not shown, isolating the specific colors to choose.  Or, if you choose a larger number of interval steps, the gradient shown could be used for fine-art development.  A good old friend of mine, an old-school digital-graphics designer from the 1990s, and a fine-art oil-paint master who’s favorite style is pointalism, saw this and was quite intrigued about the lower number of interval steps…

            For triadic gradients, you can mix three (3) colors together.  Just choose the colors you want.  If you choose to mix them in a Hue-based color-space, keep in mind that the Hue-dimension is circular and is mapped on a polar-grid.  Progression from one hue to another happens either clockwise or counterclockwise depending on which is the shortest path.  Simply put, when the Hue of one of the colors is on the opposite side from the others, it can cause the triadic palette to be “split;” this is normal.

            For multistop-linear gradients, you can choose any number of colors.  The way these gradients are defined is similar to the way CSS gradients are defined but with some significant differences (more below); notably, CSS can only grade through the RGB color space whereas MasterColorPicker’s Gradientor can grade through several different color-spaces (one at a time), and note that we are only defining the stop-colors and their stop-points.  Note colors can be defined any way that MasterColorPicker recognizes (not just the CSS way), and that stop-points may only be defined in percents % and pixels.  Also note that CSS gradients have no “intrinsic” size – their size is derived from the natural size of the object they fill.  The Gradientor has no conception of a natural size or even an absolute size, only a relative size.  If you use pixels as a unit (which is an “absolute” unit) to describe any stop-point, the final stop-point must therefore be described in pixels.  The displayed gradient will not be made to fit your (“absolute”) pixel-length, but will remain a fixed-length, and the gradient will be relatively sized (either shrunk or expanded to fit).  In this way, you can work with gradients defined almost the way your CSS code is written, for ease of use.  If your CSS code used another “relatively-sized” unit such as ems, you can simply change the units to pixels, but only if you do not mix other units other than with percents %

            When defining stop-points of your linear-gradient, as with a CSS gradient, you may leave the stop-point “blank”, and it will be automatically positioned half-way between the previous and next points; or if you have more than one undefined stop-point in succession, they will be evenly spaced.  If you leave a stop-color blank, (CSS calls it a color-hint) it will be figured as the “half-way” color in the chosen color-space between the previous and next colors (more below).  Unlike stop-points, you may not leave the first or last stop-color blank, nor may you have more than one blank stop-color in succession.

            A major difference in the way the Gradientor can define gradients compared to how CSS does, is that the Gradientor can define an offset as relative to the preceding offset as well as from the gradient beginning, whereas the CSS specifications only allow offsets relative to the gradient beginning.  If you precede an offset with the + character (for example: +38.2%) it will be offset from the previous stop’s offset point (38.2% of the total gradient in the example).  The previous stop’s offset must be defined, not blank.  (note the exceptions described below for color-hints)  If the previous offset was 20%, the example equates to 20% + 38.2% = 58.2%.  This works with pixel-offsets as well, or even a mix of percents and pixels.

            Another major difference between the Gradientor and CSS is the way color-hints are defined.  With CSS they can only be percents, and they define the point between two adjacent colors; the percent is relative to the first color.  With the Gradientor, they may be defined as percents or pixels, and you must precede them with a + sign if you want the value to be relative to the preceding color, similar to CSSWithout the + sign, the color-hint position is relative to the gradient beginning.  Unlike additive color-stops for defined colors, additive color-stops may be used for color-hints even when they follow a color without a defined color-stop (an auto-positioned one).  Note that if you use an “absolute” positional value (without the + sign), and the color-hint is in the midst of a series of color-stops without positional values (automatically positioned), the color-hint’s stop-point will “anchor” the auto-positioning before and after the color-hint.  For example, a gradient defined as: “red, yellow, green, cyan, blue” (with no stop-positions) will put red at 0%, yellow at 25%, green at 50%, cyan at 75%, and blue at 100%.  If you add an “anchored” color-hint, that will change things: “red, yellow, green, 45%, cyan, blue” (only the color-hint has a stop-position) will put red at 0%, yellow at 15%, green at 30%, color-hint at 45%, cyan at 72.5%, and blue at 100%.  If you use an “additive” color-hint instead, you get the result similar to CSS: “red, yellow, green, +45%, cyan, blue” (only the color-hint has a stop-position) will put red at 0%, yellow at 25%, green at 50%, color-hint at 61.25%. cyan at 75%, and blue at 100%.

            If you are having problems with getting your gradient specs to work, you can get feedback on the errors (and successes!) found with the following steps:

            1. Open the browser’s console by pressing the F12 key, or go to the browser’s main-menu and open “developer tools” and choose the console tab.
            2. Focus the cursor in the console and type in: SoftMoon.WebWare.Gradientor.doLog=true↵Enter
            3. Keep the console open, and watch for error messages to appear as you use the Gradientor.  Processed gradient data is also presented, with stop-positions all converted to factors from 0–1 (i.e. 0%–100%), and colors presented as Arrays of values in the chosen color-space.  (click on the Arrays to expand them and see all the values within)  Keep in mind that colors are interpreted and converted to RGB, then to your chosen color-space; and if you defined a color in the same color-space, the back-and-forth conversion to/from RGB may seem to alter the values you choose — this is normal.  You may need to dock the console to the bottom of the browser’s window, or better yet, keep it in its own window and move it to another screen (if you have 2).
            4. Note that as you hover your mouse over the displayed gradient, the color-stops are interpreted every time you move and this will fill up the console.  For the best performance, after you find your errors, type into the console: SoftMoon.WebWare.Gradientor.doLog=false↵Enter

            MasterColorPicker™ by SoftMoon-WebWare

            Copyright © 2011, 2012, 2013, 2014, 2015, 2018, 2019, 2020, 2021, 2022, 2023 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 ( ).

            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
            99.99% Chroma
            99.99% 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.
            Eye-Dropper color picker


            Loading Palettes:

            Please Wait

            SoftMoon-WebWare’s MasterColorPicker package delivers five JavaScript powered professional quality interactive graphical color-pickers, an EyeDropper color-picker, 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
            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.  Or use it in “high-resolution” for fine-art, or whatever!
            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 _desktoptool” 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:

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

            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……)