<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name='author' content='Joe Golembieski, SoftMoon-WebWare' />
<meta name='copyright' content='Copyright © 2013,2014,2015 Joe Golembieski, SoftMoon-WebWare' />
<title>MasterColorPicker desktop from SoftMoon WebWare</title>
<link rel='stylesheet' type='text/css' media="screen, projection" href='color-pickers/SoftMoon-WebWare/MasterColorPicker2.css' title='MasterColorPicker' />
<style type="text/css">
body, section, div {
margin: 0;
padding: 0; }
body {
color: white;
background: black;
position: absolute; /* This keeps the very small body sized to the full window. We need this for the panel-drag 'mouseover' which is on the body. */
width: 100%;
height: 100%; }
#MasterColorPicker_mainPanel,
#MasterColorPicker_mainPanel table.selectedPicker {
display: block; }
body > input {
display: block;
width: 24em;
font-size: 1.618em;
color: black;
background-color: white; }
.help {
position: relative;
display: inline-block;
padding: 0;
color: black;
background-color: white;
border-radius: .618em;
z-index: 6180; }
.help > div {
display: none;
position: absolute;
top: 0;
bottom: auto;
left: 0;
right: auto;
width: 37em;
padding: 0 .618em .618em .618em;
text-align: left;
color: black;
background-color: white;
border-radius: .618em;
z-index: 618; }
.help:hover > div {
display: block; }
.help ul,
.help dl {
list-style-type: disc;
list-style-position: outside;
margin: 0 1.618em; }
.help ul ul {
list-style-type: circle; }
.help p {
margin: .618em 0 0 0; }
.help dd {
margin: 0 1.168em; }
.help kbd {
display: inline-block; }
.help li:nth-child(3) li kbd {
padding-left: 1.382em; }
kbd span {
display: inline-block;
position: static;
color: white;
background-color: #202040;
text-align: center;
margin: 0 .382em;
padding: 0 .618em;
border: 1px solid #8080FF;
border-bottom: 2px solid #404080;
border-right: 2px solid #404080;
border-radius: 1.618em / 2em; }
p img {
display: block; }
.numerance {
font-size: .618em;
vertical-align: .618em;
line-height: 100%; }
.macronym {
display: inline;
font-size: .763924em;
vertical-align: .236076em;
line-height: 100%; }
acronym.macronym {
font-size: .382em;
vertical-align: 1.1618em;
border-bottom: none; }
mark {
background-color: inherit; }
#tester1 {white-space: pre;}
</style>
<!--[if lt IE 10]>
<script type='text/javascript' src="JS_toolbucket/freqdec-fd-slider-01084d3/js/fd-slider_SM-enhanced.js"></script>
<link rel="stylesheet" type="text/css" media="screen, projection" href="JS_toolbucket/freqdec-fd-slider-01084d3/css/fd-slider_SM-enhanced-compatible.css" />
<link rel="stylesheet" type="text/css" media="screen, projection" href="color-pickers/SoftMoon-WebWare/MasterColorPicker_MSIE9-patch.css" />
<style type="text/css">
#MasterColorPicker_mainPanel {
top: 2.618em;
padding-top: 0; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
#MasterColorPicker_options.activePickerPanel > div div {display: block;}
#MasterColorPicker_mainPanel table {border-top: none;}
#MasterColorPicker_mainPanel table caption {
border: 1px solid;
border-bottom: none; }
#MasterColorPicker_mainPanel table#BeezEye caption {
border-right: none; }
legend {color: inherit;}
</style>
<![endif]-->
<script type='text/javascript' src='JS_toolbucket/SoftMoon-WebWare/UniDOM.js'></script><!-- !! ESSENTIAL !! -->
<script type='text/javascript' src='JS_toolbucket/HTTP.js'></script><!-- ESSENTIAL for server version, NOT for desktop use -->
<!-- script type='text/javascript' src='JS_toolbucket/Log.js'></script><!-- only if you plan on logging to debug -->
<script type='text/javascript' src='JS_toolbucket/SoftMoon-WebWare/Picker.js'></script><!-- !! ESSENTIAL !! -->
<script type='text/javascript' src='JS_toolbucket/Math+++.js'></script><!-- !! ESSENTIAL !! -->
<script type='text/javascript' src='JS_toolbucket/SoftMoon-WebWare/rgb.js'></script><!-- !! ESSENTIAL !! -->
<script type="text/javascript" src="color-pickers/Rigden_colorblind-convert_table.js"></script><!-- supports RainbowMaestro -->
<script type='text/javascript' src='JS_toolbucket/SoftMoon-WebWare/FormFieldGenie.js'></script><!-- supports MyPalette & ColorFilter -->
<script type='text/javascript' src='JS_toolbucket/Stylesheet.js'></script><!-- supports ColorFilter -->
</head>
<body>
<input type='MasterColorPicker' id='color-picker_input' />
<script>
UniDOM.addEventHandler(document.getElementById('color-picker_input'), 'onkeypress', function(event) {
if (event.charCode==37 /*5% key*/ && event.shiftKey && event.ctrlKey && this.value.match( /°/ )==null) { var m;
if (m=this.value.match( /[0-9]+(?:\.[0-9]*)?\b/ )) this.value=this.value.substr(0, m.index+m[0].length)+'°'+this.value.substr(m.index+m[0].length);
else this.value=this.value+'°'; } } );
</script>
<div class='help'>☺help☺
<div>
<p class='_1D'>Valid values for colors include:</p>
<ul class='_1D'>
<li>RGB values in hexadecimal (<acronym title='also known as'>a.k.a.</acronym> <abbr>hex</abbr>) with or without the leading <kbd>#</kbd> symbol.</li>
<li>RGB values as:
<ul>
<li>integer byte values (<kbd>0-255</kbd>)</li>
<li>decimal ratios (<kbd>0-0.999… ‖ 1</kbd> → depending on whether “byte” or “factor” is chosen in the options,
“1” may be =100% or “1” of “0-255”)</li>
<li>percent ratios (<kbd>0%-100%</kbd> – be sure to use the percent <kbd>%</kbd> symbol)</li>
</ul>
Each value may be separated by spaces/commas/semicolons.
You may wrap or prefix the values with <kbd>rgb( )</kbd> or <kbd>rgb:</kbd> but that is not necessary.</li>
<li>various different color-space models including:
<ul>
<li>CMYK (does not need to be wrapped or prefixed)</li>
<li>CMY</li>
<li>HSB / HSV</li>
<li>HSL</li>
<li>HCG</li>
<li>XYZ → (Observer = 2°, Illuminant = D65) <kbd>0 ≤ X ≤ 95.047</kbd>, <kbd>0 ≤ Y ≤ 100</kbd>, <kbd>0 ≤ Z ≤ 108.883</kbd></li>
</ul>
Use models by wrapping or prefixing their given values.
Values may be given as decimal ratios (<kbd>0-1</kbd> except see XYZ) or percent ratios (<kbd>0%-100%</kbd>),
or for Hue values, in degrees (<kbd>0°-360°</kbd> – using the <kbd>°</kbd> symbol or “<kbd>deg</kbd>”).
The “degrees” <kbd>°</kbd> symbol may be entered by typing <kbd><span>SHIFT</span><span>CTRL</span><span>5</span></kbd></li>
<li>Any of the available color-table colors.
Colors should be prefixed or wrapped with the appropriate color-table name.
<acronym>HTML</acronym>–<acronym>CSS</acronym> colors do not need to be wrapped or prefixed.</li>
</ul>
</div>
</div><!-- close help -->
<p>created by:
<img src='images/SoftMoonWebWare.gif' alt='SoftMoon WebWare' />
</p>
<!-------------- cut here to use the MasterColorPicker HTML (below) in your own page ---------------->
<!-- MasterColorPicker 2 Copyright © 2012, 2013, 2014, 2015 Joe Golembieski, SoftMoon-WebWare
release 2.0.01 alpha
Note that these color charts and palettes will work without an enclosing <form>,
but to retain the settings this file may be included inside an existing web <form></form>
-->
<!-- div id='MasterColorPicker_debugLog'></div>
<button onclick="MasterColorPicker.debug.clear();" style='position: relative; z-index: 10000'>Clear Log</button><!-- -->
<section id='MasterColorPicker'>
<div id='MasterColorPicker_options' class='pickerPanel'>
<header><h1>MasterColorPicker™</h1> by <address>SoftMoon-WebWare</address></header>
<div><h3>Options▼</h3>
<div>
<fieldset id='x_ColorPicker_options' class='pickerOptions'><legend>RainbowMaestro mode:</legend>
<label>output<select id='MasterColorPicker_outputMode' name='MasterColorPicker_outputMode'>
<option selected='selected'>hex</option>
<option title='Red, Green, Blue'>RGB</option>
<option>native</option>
<option>HSB</option>
<option>HSL</option>
<option>HCG</option>
<option>CMYK</option>
</select></label>
<label>¿<input type='checkbox' id='keepPrecision' name='keepPrecision' value='true' checked="checked"
onchange='SoftMoon.WebWare.rgb.keepPrecision=this.checked;' />keep precision?
<p>Hex and RGB values are calculated from the native format, and others are calculated from the RGB values.
RGB values may be rounded off to integers in the process yielding differences that are especially noticeable in Hue values.
(More minor round off errors will always be possible due to floating-point mathematics used by computers.)
Note RGB values will always be shown as integers, and are always used internally by the computer’s hardware
as integers, so by <strong>not</strong> keeping precision, resulting conversions from the RGB values reflect
the “used RGB” values.</p></label>
<fieldset id='MasterColorPicker_showLocator'>
<label>¿<input type='checkbox' name='MasterColorPicker_showLocator' value='true' checked="checked" />show locator?</label>
<fieldset id='MasterColorPicker_locatorStyle'>
<label><input type='radio' name='MasterColorPicker_locatorStyle' value='X' checked="checked" /><strong>×</strong> marks the spot</label>
<label><input type='radio' name='MasterColorPicker_locatorStyle' value='O' /><strong><big>○</big></strong> marks the spot</label>
<label><input type='radio' name='MasterColorPicker_locatorStyle' value='o' /><strong>○</strong> marks the spot</label>
</fieldset>
<fieldset id='MasterColorPicker_locatorColor'>
<label><input type='radio' name='MasterColorPicker_locatorColor' value='b/w' checked="checked" />black/white</label>
<label><input type='radio' name='MasterColorPicker_locatorColor' value='spinning' />spinning rainbow</label>
<label><input type='radio' name='MasterColorPicker_locatorColor' value='transforming' />transforming rainbow</label>
</fieldset>
</fieldset>
<label id='MasterColorPicker_interlink'
title='Choosing a color points to the same color in all interlinked palettes.'>¿<input
type='checkbox' name='MasterColorPicker_doInterlink' value='true' checked="checked" />interlink?</label>
<label id='MasterColorPicker_applyToAll'>¿<input type='checkbox' name='MasterColorPicker_applyToAll' value='true' checked="checked" />apply to all?</label>
</fieldset>
<div>
<p id='MasterColorPicker_returnPanelsOn3'>Drag panels by their handles.
Triple-click on panel handles (or this message) to return the panel(s) to home position.
<!--[if IE gt 9] -->
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.
<!--[endif] -->
</p>
<fieldset class='pickerOptions'>
<label>¿<input type='checkbox' name='MasterColorPicker_showMyPalette' id='MasterColorPicker_showMyPalette' value='true'
onchange='UniDOM.disable(document.getElementById("MasterColorPicker_MyPalette"), !this.checked);'
checked="checked" />show/use MyPalette?</label>
<label>¿<input type='checkbox' name='MasterColorPicker_showFilter' id='MasterColorPicker_showFilter' value='true'
onchange='UniDOM.disable(document.getElementById("MasterColorPicker_Filter"), !this.checked);' checked="checked" />show/use Color-Filter?</label>
<label>¿<input type='checkbox' name='MasterColorPicker_showLab' id='MasterColorPicker_showLab' value='true'
onchange='UniDOM.disable(document.getElementById("MasterColorPicker_Lab"), !this.checked);' checked="checked" />show Color-Space Lab?</label>
<label>¿<input type='checkbox' name='MasterColorPicker_showGradientor' id='MasterColorPicker_showGradientor' value='true'
onchange='UniDOM.disable(document.getElementById("MasterColorPicker_Gradientor"), !this.checked);' checked="checked" />show Gradientor?</label>
<label>¿<input type='checkbox' name='MasterColorPicker_showThesaurus' id='MasterColorPicker_showThesaurus' value='true'
onchange='UniDOM.disable(document.getElementById("MasterColorPicker_Thesaurus"), !this.checked);' checked="checked" />show Librarian/Thesaurus?</label>
</fieldset>
</div>
<fieldset>
<label>¿<input type='checkbox' name='RGB_autoconvert' id='RGB_autoconvert' value='true' checked="checked" />auto-convert?
<span> Clicking a choice below can auto-convert your selected colors to the chosen color-space-model format.</span></label>
<fieldset id='RGB_by'><legend>Enter <acronym>RGB</acronym> color-space values as:</legend>
<label><input type='radio' name='RGB_by' value='byte' onclick='SoftMoon.WebWare.rgb.valuesAsByte= this.checked' checked="checked" />Byte value (integer 0↔255)</label>
<label><input type='radio' name='RGB_by' value='factor' onclick='SoftMoon.WebWare.rgb.valuesAsByte= !this.checked' />Percent or Factor</label>
<p>All <acronym>RGB</acronym> values entered between <span>0↔0.999…</span> when the default mode is “byte” will be considered factors.</p>
</fieldset>
<fieldset id='RGB_convertFrom'><legend>Enter color-space values as:</legend>
<label><input type='radio' name='RGB_convertFrom' value='percent' onclick='SoftMoon.WebWare.rgb.valuesAsPercent= this.checked' checked="checked" />Percent (0.0%↔100.0%)</label>
<label><input type='radio' name='RGB_convertFrom' value='factor' onclick='SoftMoon.WebWare.rgb.valuesAsPercent= !this.checked' />Factor (0.0↔1.0)</label>
<p>Percent values may be forced using values <span>0.0%↔100.0%</span> entered with a trailing “percent” sign.</p>
</fieldset>
<fieldset id='RGB_convertHue'><legend>Enter Hue values as:</legend>
<label><input type='radio' name='RGB_convertHue' value='degrees' onclick='SoftMoon.WebWare.rgb.huesByDegrees= this.checked' checked="checked" />Degrees (0.0°↔360.0°)</label>
<label><input type='radio' name='RGB_convertHue' value='factor' onclick='SoftMoon.WebWare.rgb.huesByDegrees= !this.checked' <?php
if ($_POST['RGB_convertHue']==='factor') echo 'checked="checked" '; ?>/>Percent or Factor</label>
<p>Hue values may be forced to degrees using values <span>0.0°↔360.0°</span> entered with a trailing “degrees” sign or by using the three letters “deg”.</p>
</fieldset>
</fieldset>
</div></div>
<label>palette: <select id='palette_select' name='palette_select' tabToTarget='true'>
<option selected='selected'>RainbowMaestro</option>
<option>Spectral</option>
<option>BeezEye</option>
<option>Simple²</option>
<option>YinYang NíHóng</option>
</select></label>
</div><!-- close MasterColorPicker_options -->
<div id='MasterColorPicker_MyPalette' class='pickerPanel expanding'>
<h2>MasterColorPicker<mark class='macronym'>™</mark> <span>MyPalette</span></h2>
<p>(choose color(s) using any color-picker or type directly)</p>
<fieldset>
<button name='MasterColorPicker_MyPalette_makeSub'>create sub-palette</button>
<button name='MasterColorPicker_MyPalette_delete'>delete selected</button>
<button name='MasterColorPicker_MyPalette_save'>save palette</button>
<label>Auto-add to MyPalette: <select name='MasterColorPicker_addToMyPalette'>
<option>double-click</option>
<option>shift-click</option>
<option>all selected</option>
<option>single-click</option>
<option>never</option>
</select></label>
</fieldset>
<table>
<thead>
<tr><th></th>
<th><label for='MasterColorPicker_MyPalette_[0][0][definition]'>color definition:</label></th>
<th><label for='MasterColorPicker_MyPalette_[0][0][name]'>name:</label></th></tr>
</thead>
<tbody>
<tr>
<th colspan='3'>
<label><input type='checkbox' name='MasterColorPicker_MyPalette_selectAll' />select all</label>
<button name='MasterColorPicker_MyPalette_addSelected'>add selected</button>
<label><input type='radio' name='MasterColorPicker_MyPalette_addToHere' checked='checked' />Auto-add new Colors below</label></th></tr>
<tr class='MyColor'>
<td><input type='checkbox' name='MasterColorPicker_MyPalette[0][0][selected]' value='true' /></td>
<td><input type='text' name='MasterColorPicker_MyPalette[0][0][definition]'
interfaceTarget='true' swatch='this.parentNode.previousElementSibling' value='' /><span class='dragHandle' title='drag from here or right-click for menu'>↕</span></td>
<td><input type='text' name='MasterColorPicker_MyPalette[0][0][name]' tabToTarget='true' value='' /></td></tr>
</tbody>
<tbody class='subPalette'><!-- note these names below are indexed properly for the FormFieldGenie -->
<tr>
<th colspan='3'>
<label>Sub-palette name: <input type='text' name='MasterColorPicker_MyPalette[0][subPalette][name]' /></label>
<button name='MasterColorPicker_MyPalette_addSelected'>add selected</button>
<label><input type='checkbox' name='MasterColorPicker_MyPalette_selectAll' />select all</label>
<label><input type='checkbox' name='MasterColorPicker_MyPalette_selectThis' />select this</label>
<label><input type='radio' name='MasterColorPicker_MyPalette_addToHere' />Auto-add new Colors below</label></th></tr>
<tr class='MyColor'>
<td><input type='checkbox' name='MasterColorPicker_MyPalette[0][0][selected]' value='true' /></td>
<td><input type='text' name='MasterColorPicker_MyPalette[0][0][definition]'
interfaceTarget='true' swatch='this.parentNode.previousElementSibling' value='' /><span class='dragHandle' title='drag from here or right-click for menu'>↕</span></td>
<td><input type='text' name='MasterColorPicker_MyPalette[0][0][name]' tabToTarget='true' value='' /></td></tr>
</tbody>
</table>
<ul class="MyPalette_ColorGenieMenu">
<li>insert new color</li>
<li>copy to:<ul><li>new clip</li></ul></li>
<li>cut to:<ul><li>new clip</li></ul></li>
<li>paste from:<ul><li>all clips</li></ul></li>
<li>delete</li>
</ul>
</div><!-- close MyPalette -->
<div id='MasterColorPicker_Filter' class='pickerPanel'>
<h2>MasterColorPicker<mark class='macronym'>™</mark> <span>Color-Filter</span></h2>
<p>(choose color(s) using any color-picker or type directly)</p>
<fieldset>
<label><span>¿Average all filter-colors and apply the result, or apply each filter-color individually and progressively?</span>
<select name='MasterColorPicker_Filter_average'><option selected='selected'>average</option><option>progressive</option></select></label>
<label><span>¿Add/subtract the filters’ average to the picked color, or grade the picked color to the filters’ average?</span>
<select name='MasterColorPicker_Filter_applyToAverage'><option selected='selected'>add to</option><option>grade to</option><option>sub from</option></select></label>
</fieldset>
<table>
<thead>
<tr><th><label for='MasterColorPicker_Filter_color[0]'>color:</label></th>
<th><label for='MasterColorPicker_Filter_factor[0]'>rate:<span> factor (0.0-1.0) or percent (0%-100%)</span></label></th>
<th><label for='MasterColorPicker_Filter_apply[0]'>apply:<span> ¿Add/subtract each filter to the picked color, or grade the picked color to each filter?</span></label></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type='text' name='MasterColorPicker_Filter_color[0]'
interfaceTarget='true' swatch='this.nextSibling' value='' /><span class='swatch'></span></td>
<td><input type='text' name='MasterColorPicker_Filter_factor[0]' title='factor (0.0-1.0) or percent (0%-100%)'
value='50%'
tabTo='s=this.parentNode.parentNode.lastElementChild.firstChild, (s.disabled && s.getAttribute("tabToTarget")==="true") ? MasterColorPicker.dataTarget : ""' /></td>
<td><select name='MasterColorPicker_Filter_apply[0]' tabToTarget='true'><option selected='selected'>add to</option><option>grade to</option><option>sub from</option></select></td>
</tr>
</tbody>
</table>
</div><!-- close MasterColorPicker_Filter -->
<div id='MasterColorPicker_Lab' class='pickerPanel'>
<h2>MasterColorPicker<mark class='macronym'>™</mark> <span>Color-Space Lab</span></h2>
<table class='primaries'><caption><acronym>RGB</acronym></caption>
<tr><th>primary</th><th>byte value</th><th>#hex</th><th>percent%</th><td></td></tr>
<tr class='red'><th><label for='MasterColorPicker_Rgb_byte' style="color:red">Red:</label></th>
<td><input type='number' name='MasterColorPicker_Rgb_byte' min='0' max='255' value='0' /></td>
<td><input type='text' class='hex' name='MasterColorPicker_Rgb_hex' maxlength='2' size='2' value='00' /></td>
<td><input type='number' name='MasterColorPicker_Rgb_percent' min='0' max='100'step='any' value='0' /></td>
<td><input type='range' name='MasterColorPicker_Rgb_range' min='0' max='255' value='0' style="color:red" tabindex='-1' /></td>
</tr>
<tr class='green'><th><label for='MasterColorPicker_rGb_byte' style="color:green">Green:</label></th>
<td><input type='number' name='MasterColorPicker_rGb_byte' min='0' max='255' value='0' /></td>
<td><input type='text' class='hex' name='MasterColorPicker_rGb_hex' maxlength='2' size='2' value='00' /></td>
<td><input type='number' name='MasterColorPicker_rGb_percent' min='0' max='100'step='any' value='0' /></td>
<td><input type='range' name='MasterColorPicker_rGb_range' min='0' max='255' value='0' style="color:lime" tabindex='-1' /></td>
</tr>
<tr class='blue'><th><label for='MasterColorPicker_rgB_byte' style="color:blue">Blue:</label></th>
<td><input type='number' name='MasterColorPicker_rgB_byte' min='0' max='255' value='0' /></td>
<td><input type='text' class='hex' name='MasterColorPicker_rgB_hex' maxlength='2' size='2' value='00' /></td>
<td><input type='number' name='MasterColorPicker_rgB_percent' min='0' max='100'step='any' value='0' /></td>
<td><input type='range' name='MasterColorPicker_rgB_range' min='0' max='255' style="color:blue" tabindex='-1' value='0' /></td>
</tr>
</table>
<table><caption><acronym>HSL</acronym> <acronym>HSB</acronym>/<acronym>HSV</acronym> <acronym>HCG</acronym></caption>
<tr><th></th><th>degrees°</th><th>percent%</th><td></td></tr>
<tr class='hue'>
<th><label for='MasterColorPicker_Hue_degrees'>Hue:</label></th>
<td><input type='number' name='MasterColorPicker_Hue_degrees' min='0' max='360'step='any' value='0' /></td>
<td><input type='number' name='MasterColorPicker_Hue_percent' min='0' max='100'step='any' value='0' /></td>
<td><input type='range' name='MasterColorPicker_Hue_range' min='0' max='360' value='0' tabindex='-1' /></td>
</tr>
<tr class='even'>
<th><label for='MasterColorPicker_hSl_percent'>Saturation:</label></th>
<td></td>
<td><input type='number' name='MasterColorPicker_hSl_percent' min='0' max='100'step='any' value='0' /></td>
<td><input type='range' name='MasterColorPicker_hSl_range' min='0' max='100' value='0' tabindex='-1' /></td>
</tr>
<tr>
<th><label for='MasterColorPicker_hsL_percent'>Lightness:</label></th>
<td></td>
<td><input type='number' name='MasterColorPicker_hsL_percent' min='0' max='100'step='any' value='0' /></td>
<td><input type='range' name='MasterColorPicker_hsL_range' min='0' max='100' value='0' tabindex='-1' /></td>
</tr>
<tr class='even'>
<th><label for='MasterColorPicker_hSb_percent'>Saturation:</label></th>
<td></td>
<td><input type='number' name='MasterColorPicker_hSb_percent' min='0' max='100'step='any' value='0' /></td>
<td><input type='range' name='MasterColorPicker_hSb_range' min='0' max='100' value='0' tabindex='-1' /></td>
</tr>
<tr>
<th><label for='MasterColorPicker_hsB_percent'>Brightness:</label></th>
<td></td>
<td><input type='number' name='MasterColorPicker_hsB_percent' min='0' max='100'step='any' value='0' /></td>
<td><input type='range' name='MasterColorPicker_hsB_range' min='0' max='100' value='0' tabindex='-1' /></td>
</tr>
<tr class='even'>
<th><label for='MasterColorPicker_hCg_percent'>Chroma:</label></th>
<td></td>
<td><input type='number' name='MasterColorPicker_hCg_percent' min='0' max='100'step='any' value='0' /></td>
<td><input type='range' name='MasterColorPicker_hCg_range' min='0' max='100' value='0' tabindex='-1' /></td>
</tr>
<tr>
<th><label for='MasterColorPicker_hcG_percent'>Gray:</label></th>
<td></td>
<td><input type='number' name='MasterColorPicker_hcG_percent' min='0' max='100'step='any' value='0' /></td>
<td><input type='range' name='MasterColorPicker_hcG_range' min='0' max='100' value='0' tabindex='-1' /></td>
</tr>
</table>
<table class='primaries'><caption><acronym>CMYK</acronym></caption>
<tr><th>primary</th><th>percent%</th><td></td></tr>
<tr class='cyan'>
<th><label for='MasterColorPicker_Cmyk_percent' style="color:cyan">Cyan</label></th>
<td><input type='number' name='MasterColorPicker_Cmyk_percent' min='0' max='100'step='any' value='0' /></td>
<td><input type='range' name='MasterColorPicker_Cmyk_range' min='0' max='100' value='0' style="color:cyan" tabindex='-1' /></td>
</tr>
<tr class='magenta'>
<th><label for='MasterColorPicker_cMyk_percent' style="color:magenta">Magenta</label></th>
<td><input type='number' name='MasterColorPicker_cMyk_percent' min='0' max='100'step='any' value='0' /></td>
<td><input type='range' name='MasterColorPicker_cMyk_range' min='0' max='100' value='0' style="color:magenta" tabindex='-1' /></td>
</tr>
<tr class='yellow'>
<th><label for='MasterColorPicker_cmYk_percent' style="color:yellow">Yellow</label></th>
<td><input type='number' name='MasterColorPicker_cmYk_percent' min='0' max='100'step='any' value='0' /></td>
<td><input type='range' name='MasterColorPicker_cmYk_range' min='0' max='100' value='0' style="color:yellow" tabindex='-1' /></td>
</tr>
<tr class='black'>
<th><label for='MasterColorPicker_cmyK_percent' style="color:black">Black</label></th>
<td><input type='number' name='MasterColorPicker_cmyK_percent' min='0' max='100'step='any' value='100' tabToTarget='true' /></td>
<td><input type='range' name='MasterColorPicker_cmyK_range' min='0' max='100' value='100' style="color:black" tabindex='-1' /></td>
</tr>
</table>
<label>¿<input type='checkbox' name='MasterColorPicker_updateLabOnMouseMove' checked='checked' />update on Mouse move?</label>
<span class='swatch'>Click here to Choose</span>
</div><!-- close MasterColorPicker_Lab -->
<div id='MasterColorPicker_Gradientor' class='pickerPanel'>
<h2>MasterColorPicker<mark class='macronym'>™</mark> <span>Gradientor</span></h2>
<fieldset><legend>(choose colors using any color-picker or type directly)</legend>
<label>color 1
<input type='text' name='MasterColorPicker_Gradientor_color1'
interfaceTarget='true' swatch='this.nextSibling' value='blue' /><span class='swatch'></span></label>
<label>↔through color-space↔
<select name='MasterColorPicker_Gradientor_colorSpace'>
<option selected='selected'>RGB</option>
<option>HSB</option>
<option>HSL</option>
<option>HCG</option>
<option>CMYK</option>
</select></label>
<label>color 2
<input type='text' name='MasterColorPicker_Gradientor_color2'
interfaceTarget='true' swatch='this.nextSibling' value='red' /><span class='swatch'></span></label>
<label id='MasterColorPicker_Gradientor_color3'>color 3
<input type='text' name='MasterColorPicker_Gradientor_color3'
interfaceTarget='true' swatch='this.nextSibling' value='lime' /><span class='swatch'></span></label>
</fieldset>
<div><canvas width='256' height='38'></canvas></div>
<label title='2 — 256'>steps: <input type='number' id='testMe' name='MasterColorPicker_Gradientor_steps' min='2' max='256' step='1' value='16' /></label>
<label>¿<input type='checkbox' name='MasterColorPicker_Gradientor_tricolor' value='tricolor'
onchange='with (SoftMoon.WebWare) {UniDOM.disable(document.getElementById("MasterColorPicker_Gradientor_color3"), !this.checked);}' />
tri-color?</label>
</div><!-- close MasterColorPicker_Gradientor -->
<div id='MasterColorPicker_Thesaurus' class='pickerPanel'>
<h2>MasterColorPicker<mark class='macronym'>™</mark> <span>Librarian/Thesaurus</span></h2>
<p>This tool can help you identify the name of the closest color(s) in the chosen color-space geometry.</p>
<fieldset><legend>(choose color using any color-picker or type directly)</legend>
<label>color:
<input type='text' name='MasterColorPicker_Thesaurus_color'
interfaceTarget='true' swatch='this.nextSibling' value='' /><span class='swatch'></span></label>
<label>color-space:
<select name='MasterColorPicker_Thesaurus_colorSpace'>
<option selected='selected'>RGB</option>
<option>HSB</option>
<option>HSL</option>
<option>HCG</option>
<option>CMYK</option>
</select></label>
</fieldset>
<fieldset id='MasterColorPicker_Thesaurus_references'><legend>search these named-color tables:</legend>
</fieldset>
<div></div><!-- this will receive the matching-color text -->
</div><!-- close MasterColorPicker_Thesaurus -->
<div id='MasterColorPicker_mainPanel' class='pickerPanel expanding init'><!-- class “init” is removed after the color-tables are generated - they need to be shown while this process occurs -->
<table class='picker palette' id='Spectral'><caption><h6>Spectral Progressive Color-Picker™</h6>click to choose<span id='SpectralIndicator'> <span id='SpectralSwatch'></span></span></caption>
<thead><tr><td colspan='100'><table>
<tr>
<td colspan='6'><label>hue variety: <input type='range' name='hue_variety' value='30' max='100' min='10' step='1' onchange='SoftMoon.WebWare.buildSpectralPalette()' /></label>
<label>mix variety: <input type='range' name='mix_variety' value='7' max='20' min='5' step='1' onchange='SoftMoon.WebWare.buildSpectralPalette()' /></label><br />
<label>x-shift: <input type='range' name='x_shift' value='0' max='6.28' min='0' step='0.01' onchange='SoftMoon.WebWare.buildSpectralPalette()' /></label>
<label>y-shift: <input type='range' name='y_shift' value='0' max='1' min='0' step='0.01' onchange='SoftMoon.WebWare.buildSpectralPalette()' /></label>
<label>mix shift: <input type='range' name='phase_shift' value='4.71' max='9.42' min='0' step='0.01' onchange='SoftMoon.WebWare.buildSpectralPalette()' /></label></td><!-- Opera limits the number of digits in the value,min,max fields -->
</tr>
<tr><th></th><th>channel</th><th>intensity</th><th>variation</th><th>shift</th><th>frequency</th></tr>
<tr style='color:red'><td>RED</td>
<td>
<input type='radio' name='red_c' value='1' checked='checked' onchange='SoftMoon.WebWare.buildSpectralPalette()' />
<input type='radio' name='red_c' value='2' onchange='SoftMoon.WebWare.buildSpectralPalette()' />
<input type='radio' name='red_c' value='3' onchange='SoftMoon.WebWare.buildSpectralPalette()' />
</td>
<td><input type='range' name='red_i' value='128' max='255' min='0' step='1' onchange='SoftMoon.WebWare.buildSpectralPalette()' /></td>
<td><input type='range' name='red_v' value='128' max='255' min='0' step='1' onchange='SoftMoon.WebWare.buildSpectralPalette()' /></td>
<td><input type='range' name='red_s' value='0' max='6.28' min='0' step='0.01' onchange='SoftMoon.WebWare.buildSpectralPalette()' /></td>
<td><input type='range' name='red_f' value='1' max='2' min='0.01' step='0.01' onchange='SoftMoon.WebWare.buildSpectralPalette()' /></td>
</tr>
<tr style='color:lime'><td>GREEN</td>
<td>
<input type='radio' name='grn_c' value='1' onchange='SoftMoon.WebWare.buildSpectralPalette()' />
<input type='radio' name='grn_c' value='2' checked='checked' onchange='SoftMoon.WebWare.buildSpectralPalette()' />
<input type='radio' name='grn_c' value='3' onchange='SoftMoon.WebWare.buildSpectralPalette()' />
</td>
<td><input type='range' name='grn_i' value='128' max='255' min='0' step='1' onchange='SoftMoon.WebWare.buildSpectralPalette()' /></td>
<td><input type='range' name='grn_v' value='128' max='255' min='0' step='1' onchange='SoftMoon.WebWare.buildSpectralPalette()' /></td>
<td><input type='range' name='grn_s' value='0' max='6.28' min='0' step='0.01' onchange='SoftMoon.WebWare.buildSpectralPalette()' /></td>
<td><input type='range' name='grn_f' value='1' max='2' min='0.01' step='0.01' onchange='SoftMoon.WebWare.buildSpectralPalette()' /></td>
</tr>
<tr style='color:#4040FF'><td>BLUE</td>
<td>
<input type='radio' name='blu_c' value='1' onchange='SoftMoon.WebWare.buildSpectralPalette()' />
<input type='radio' name='blu_c' value='2' onchange='SoftMoon.WebWare.buildSpectralPalette()' />
<input type='radio' name='blu_c' value='3' checked='checked' onchange='SoftMoon.WebWare.buildSpectralPalette()' />
</td>
<td><input type='range' name='blu_i' value='128' max='255' min='0' step='1' onchange='SoftMoon.WebWare.buildSpectralPalette()' /></td>
<td><input type='range' name='blu_v' value='128' max='255' min='0' step='1' onchange='SoftMoon.WebWare.buildSpectralPalette()' /></td>
<td><input type='range' name='blu_s' value='0' max='6.28' min='0' step='0.01' onchange='SoftMoon.WebWare.buildSpectralPalette()' /></td>
<td><input type='range' name='blu_f' value='1' max='2' min='0.01' step='0.01' onchange='SoftMoon.WebWare.buildSpectralPalette()' /></td>
</tr>
</table></td></tr></thead>
<tbody>
</tbody>
</table>
<table class='picker palette' id='BeezEye'>
<caption><h6>BeezEye Color Picker™</h6>click to choose</caption>
<tbody>
<tr>
<td><label id="BeezEye_twist_value_transformer" data-fd-slider-rotate="330">Twist<input type='range' name='BeezEye_twist_value' value='50' min='0' mmax='100' data-fd-slider-transformer="BeezEye_twist_value_transformer" /></label></td>
<td><fieldset><legend>color space</legend>
<dl>
<dt>CMYK</dt>
<dd>Cyan, Magenta, Yellow, Black</dd>
<dt>HSB / HSV</dt>
<dd>Hue, Saturation, Brightness a.k.a Value</dd>
<dt>HSL</dt>
<dd>Hue, Saturation, Lightness</dd>
<dt>HCG</dt>
<dd>Hue, Chroma, Gray</dd>
<dt>Curve</dt>
<dd>modulates the saturation rate</dd>
<dt>Twist</dt>
<dd>twists the color-disk at its center to make it easier to find progressive color-series</dd>
</dl>
<label><input type='radio' name='BeezEye_model' value='cmyk' />CMYK</label>
<label><input type='radio' name='BeezEye_model' value='hsb' />HSB / HSV</label>
<label><input type='radio' name='BeezEye_model' value='hsl' checked='checked' />HSL</label>
<label><input type='radio' name='BeezEye_model' value='hcg' />HCG</label>
<label>¿<input type='checkbox' name='BeezEye_curve' value='curve' />curve?</label>
<label>¿<input type='checkbox' name='BeezEye_twist' value='twist' />twist?</label>
</fieldset>
</td>
</tr>
<tr>
<td rowspan='2'><canvas width='360' height='360'></canvas></td>
<td><label id="BeezEye_value_transformer" data-fd-slider-rotate="270">Brightness <span>Value</span><input type='range' name='BeezEye_value' value='50' min='0' max='100' data-fd-slider-transformer="BeezEye_value_transformer" /></label></td>
</tr>
<tr>
<td valign='bottom'><fieldset>
<label id="BeezEye_curve_value_transformer" data-fd-slider-rotate="315">Curve<input type='range' name='BeezEye_curve_value' value='50' min='1' max='100' data-fd-slider-transformer="BeezEye_curve_value_transformer" /></label>
<label><input type='checkbox' name='BeezEye_curve_midring' value='midring' /> Mid–Ring</label>
</fieldset>
</td>
</tr>
<tr>
<td><label>Hue Variety<input type='range' name='BeezEye_variety' value='15' min='5' max='89' step='2' /></label></td>
<td rowspan='2' id='BeezEye_swatch'></td>
</tr>
<tr><td id='BeezEye_indicator'> </td></tr>
</tbody>
</table>
<table class='picker palette' id='RainbowMaestro'><caption><h6>RainbowMaestro Harmonic Color Picker™</h6>click to choose</caption>
<thead>
<tr><td colspan='2'>
<label><input type='checkbox' name='RainbowMaestro_websafe' value='true' checked='checked' />websafe</label>
<label><input type='checkbox' name='RainbowMaestro_splitComplement' value='true' />split-compliments</label>
<label><input type='checkbox' name='RainbowMaestro_lock' value='true' />lock focal hue</label>
<label><input type='checkbox' name='RainbowMaestro_colorblind' value='true' checked='checked' />colorblind assist<mark class='footmark'>‡</mark></label>
</td></tr>
<tr><td colspan='2'>
<label>variety<input type='range' name='RainbowMaestro_variety' value='6' min='6' max='32' /></label>
<label>¿focals only<input type='checkbox' name='RainbowMaestro_focalsOnly' value='true' />?</label>
<input type='hidden' name='RainbowMaestro_focalHue' value='0' />
<label id='RainbowMaestro_hueIndicator'>using focal hue:<input type='number' min='0' max='360' value='0'
name='RainbowMaestro_focalHue_degrees' size='13' maxlength='9' title='Hue given in degrees (0.0°–360.0°).' /><span> </span></label>
</td></tr>
<tr><td colspan='2' id='RainbowMaestro_swatch'><span id='RainbowMaestro_indicator'> </span></td><tr>
</thead>
<tbody>
<tr><th>full color</th>
<th class='colorblind'>Protan simulation<mark class='footmark'>‡</mark></th></tr>
<tr><td><div class='subpalette_swatch'></div><canvas width='360' height='360'></canvas></td>
<td class='colorblind'><div class='subpalette_swatch'></div><canvas width='360' height='360'></canvas></td></tr>
<tr><th class='colorblind'>Deutan simulation<mark class='footmark'>‡</mark></th>
<th class='colorblind'>Tritan simulation<mark class='footmark'>‡</mark></th></tr>
<tr><td class='colorblind'><div class='subpalette_swatch'></div><canvas width='360' height='360'></canvas></td>
<td class='colorblind'><div class='subpalette_swatch'></div><canvas width='360' height='360'></canvas></td></tr>
</tbody>
<tfoot>
<tr class='colorblind'><td colspan='2'><mark class='footmark'>‡</mark>simulations are approximate, and may vary between individuals and monitors</td></tr>
<tr class='colorblind'><td colspan='2'><mark class='footmark'>‡</mark>special thanks to:
http://safecolours.rigdenage.com/colours2.html</td></tr>
</tfoot>
</table>
<table class='picker palette' id='Simple²'><caption><h6>Simple² Color Picker™</h6>click to choose</caption>
<tbody>
<tr>
<td colspan='3'><div class='indicator' id='Simple²saturation'>99.99%</div></td>
<td colspan='2' style='border: 1px solid; border-bottom: none'
>Chroma (Saturation)<br /><span class='lft'>0→</span>←‖1‖→<span class='rt'>←0</span></td>
<td colspan='2'><div class='indicator' id='Simple²hue'>359.999°</div></td>
</tr>
<tr>
<td style='border-top: 1px solid; border-bottom: 1px solid;'
><div><span class='lft'>0→</span>←←Saturation→→<span class='rt'>←1</span></div></td>
<td id="Simple²hSl"><canvas width='18' height='360'></canvas></td>
<td id="Simple²hSv" style='border-left: 1px solid;'
><canvas width='18' height='360'></canvas></td>
<td id="Simple²wrapper" colspan='2' style='border-left: 1px solid'
><canvas width='360' height='360'></canvas></td>
<td style='border: 1px solid; border-left: none'
><div><span class='lft'>«0°→→</span>←←Hue→→<span class='rt'>←←360°»</span></div></td>
<td id="Simple²interface"><label id='Simple²_variety_transformer' data-fd-slider-rotate="90">variety<input type='range' name='Simple²_variety' value='12' min='12' max='360' step='2' data-fd-slider-transformer="Simple²_variety_transformer" /></label></td>
</tr>
<tr>
<td rowspan='5' style='border-bottom: 1px solid' valign='bottom'
><label for='Simple²_lock'>← lock ↑</label><input type='checkbox' name='Simple²_lock' value='locked' /></td>
<td style='border-left: 1px solid'><div>HSL</div></td>
<td style='border-left: 1px solid'><div>HSB</div></td>
<td style='border: 1px solid; border-top: none'>Gray=0</td><td style='border: 1px solid; border-top: none'>Gray=1</td>
<td id="Simple²swatch" colspan='2' rowspan='6' style='border: 1px solid white'></td>
</tr>
<tr>
<td style='border-left: 1px solid'></td>
<td style='border-left: 1px solid'></td>
<td id="Simple²hsV" colspan='2'><canvas width='360' height='18'></canvas></td>
</tr>
<tr>
<td style='border-left: 1px solid'></td>
<td style='border-left: 1px solid; border-bottom: 1px solid'></td>
<td colspan='2' style='border-bottom: 1px solid'
><span class='lft'>0→</span>←←Brightness / Value→→<span class='rt'>←1</span></td>
</tr>
<tr>
<td style='border-left: 1px solid'></td>
<td></td>
<td id="Simple²hsL" colspan='2'><canvas width='360' height='18'></canvas></td>
</tr>
<tr>
<td style='border-left: 1px solid; border-bottom: 1px solid'><div class='indicator' id='Simple²lvl'>99.99%</div></td>
<td style='border-bottom: 1px solid'></td>
<td colspan='2' style='border-bottom: 1px solid'
><span class='lft'>0→</span>←←Lightness→→<span class='rt'>←1</span></td>
</tr>
<tr>
<td id="Simple²indicator" colspan='5'> </td>
</tr>
</tbody>
</table>
<table class='picker palette' id='YinYangNíHóng'><caption><h6>YinYang NíHóng<span>the Tao of Color Pickers™</span></h6>click to choose</caption>
<thead><tr>
<td><label><input type='radio' name='YinYang NíHóng' value='HSB' />HSB / HSV<dfn>Hue, Saturation, Brightness/Value</dfn></label></td>
<td><label><input type='radio' name='YinYang NíHóng' value='HSL' checked='checked' />HSL<dfn>Hue, Saturation, Lightness</dfn></label></td>
<td><label><input type='radio' name='YinYang NíHóng' value='HCG' />HCG<dfn>Hue, Chroma, Gray</dfn></label></td>
</tr></thead>
<tbody>
<tr><td colspan='3' id='YinYangNíHóng_swatch'><canvas width='421' height='421'></canvas></td></tr>
<tr><td colspan='3' id='YinYangNíHóng_indicator'> </td></tr>
</tbody>
<tfoot>
<tr><td colspan='3'><dfn>YinYang:</dfn> balance of interplay between opposites (here: light & dark, color & gray).</td></tr>
<tr><td><dfn>NíHóng:</dfn> Neon.</td><td><dfn>Ní:</dfn> Rainbow; You.</td><td><dfn>Hóng:</dfn> Rainbow; Great.</td></tr>
<tr><td colspan='3'><dfn>Tao:</dfn> all-encompassing unity with balance of the most simple way.</td></tr>
<tr><td colspan='3'>All 16,777,216 different colors the modern computer can show within 2 clicks.</td></tr>
</tfoot>
</table>
<div id='MasterColorPicker_paletteTables'></div>
</div><!-- close MasterColorPicker_mainPanel -->
</section><!-- close MasterColorPicker HTML -->
<script type="text/javascript" src="color-pickers/SoftMoon-WebWare/MasterColorPicker2.js"></script>
<script type="text/javascript" src="color-pickers/SoftMoon-WebWare/color-space_autoReformatter.js"></script>
<!-------------- cut here to use the MasterColorPicker HTML in your own page ---------------->
<!-- use the scripts below if don’t want to use the server-version for palette table files -->
<script type="text/javascript">
SoftMoon.loaded_palettes=new Array; // each palette file should push its palette(s) onto this Array
UniDOM.addEventHandler(window, 'onload', function() {
SoftMoon.WebWare.initPaletteTables(SoftMoon.loaded_palettes);
SoftMoon.WebWare.activateColorSpaceFormatConverters(function() {return MasterColorPicker.registeredTargets});
MasterColorPicker.showColorAs='background';
MasterColorPicker.enablePanelDrag=true;
MasterColorPicker.enableStickyPanels=false;
MasterColorPicker.masterTarget=MasterColorPicker.registeredTargets[0];
MasterColorPicker.registeredTargets[0].focus(); } );
</script>
<script type="text/javascript" src="color_palettes/desktop_palettes/HTML.desktop_palette.js"></script>
<script type="text/javascript" src="color_palettes/desktop_palettes/common.desktop_palette.js"></script>
<script type="text/javascript" src="color_palettes/desktop_palettes/Brewer.desktop_palette.js"></script>
<script type="text/javascript" src="color_palettes/desktop_palettes/Crayola.desktop_palette.js"></script>
<script type="text/javascript" src="color_palettes/desktop_palettes/OpenOffice.desktop_palette.js"></script>
<script type="text/javascript" src="color_palettes/desktop_palettes/universal.desktop_palette.js"></script>
<script type="text/javascript" src="color_palettes/desktop_palettes/X11.desktop_palette.js"></script>
</body>
</html>
|
Download
