Icontem

File: MasterColorPicker_desktop.htm

Recommend this page to a friend!
  Classes of Joseph  >  JS Master Color Picker script  >  MasterColorPicker_desktop.htm  >  Download  
File: MasterColorPicker_desktop.htm
Role: Example script
Content type: text/plain
Description: color-picker desktop tool
Class: JS Master Color Picker script
Pick colors from a palette
Author: By
Last change: updated for latest release
Date: 4 years ago
Size: 43,576 bytes
 

Contents

Class file image Download
<!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.&nbsp;
			 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 →&nbsp; (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.&nbsp;
			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>”).&nbsp;
			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.&nbsp;
			Colors should be prefixed or wrapped with the appropriate color-table name.&nbsp;
			<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.&nbsp;
			RGB values may be rounded off to integers in the process yielding differences that are especially noticeable in Hue values.&nbsp;
			(More minor round off errors will always be possible due to floating-point mathematics used by computers.)&nbsp;
			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.&nbsp;
Triple-click on panel handles (or this message) to return the panel(s) to home position.&nbsp;
<!--[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'>&nbsp;<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>&nbsp;</span></label>
	</td></tr>
	<tr><td colspan='2' id='RainbowMaestro_swatch'><span id='RainbowMaestro_indicator'>&nbsp;</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: &nbsp;
		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'>&nbsp;</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'>&nbsp;</td></tr>
</tbody>
<tfoot>
<tr><td colspan='3'><dfn>YinYang:</dfn> balance of interplay between opposites (here: light &amp; dark, color &amp; 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>