2014-08-04 15:14:27 +02:00
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" / >
2016-03-23 23:22:09 +01:00
< meta name = "Description" content = "ColorPicker is a small (45.4KB, 19.5KB gZip) but very advanced framework independent javaScript color picker and color conversion / calculation tool that supports the following color spaces: rgb, hsv, hsl, hex, cmyk, cmy, XYZ, Lab but also alpha, WCAG 2.0 readability standards (based on opacity levels of all layers), contrast, color similarity, grayscale, 2-layer or 3-layer overlap mix, etc..." / >
< meta name = "Keywords" content = "ColorPicker, color picker, color chooser, color, picker, javaScript, java script, colors, rgb, hsv, hsl, hex, cmyk, cmy, XYZ, Lab, alpha, WCAG 2.0, grayscale, contrast, readability, realtime" / >
< meta name = "author" content = "Peter Dematté" / >
< meta http-equiv = "language" content = "en" / >
2014-09-13 18:32:51 +02:00
< link rel = "shortcut icon" type = "image/x-icon" href = "images/favicon.ico" / >
< link rel = "icon" type = "image/x-icon" href = "images/favicon.ico" / >
2014-08-05 17:16:42 +02:00
<!-- <link href="developer/colorPicker.sys.css" rel="stylesheet" type="text/css"> -->
<!-- <link href="developer/colorPicker.css" rel="stylesheet" type="text/css"> -->
2014-08-04 15:14:27 +02:00
< link href = "index.css" rel = "stylesheet" type = "text/css" >
< title > colorPicker_new< / title >
< / head >
< body >
2014-09-13 14:56:07 +02:00
< div id = "testPatch" > .< / div >
2014-08-04 15:14:27 +02:00
< div id = "contrastPatch" > < div > < / div > < i > -Test-< / i > < / div >
2014-09-13 14:56:07 +02:00
< div id = "colorValues" > .< / div >
2014-08-04 15:14:27 +02:00
< div id = "sliders" class = "sliders" >
2016-03-20 15:26:29 +01:00
< div id = "rgbr" > < div > < / div > < / div >
< div id = "rgbg" > < div > < / div > < / div >
< div id = "rgbb" > < div > < / div > < / div >
< div id = "hslh" > < div > < / div > < / div >
< div id = "hsls" > < div > < / div > < / div >
< div id = "hsll" > < div > < / div > < / div >
<!-- <div id="LabL"><div></div></div>
< div id = "Laba" > < div > < / div > < / div >
< div id = "Labb" > < div > < / div > < / div >
< div id = "cmyc" > < div > < / div > < / div >
< div id = "cmym" > < div > < / div > < / div >
< div id = "cmyy" > < div > < / div > < / div >
-->< / div >
2014-08-04 15:14:27 +02:00
< div id = "hsv_map" >
< canvas id = "surface" width = "200" height = "200" > < / canvas >
< div class = "cover" > < / div >
< div class = "hsv-cursor" > < / div >
< div class = "bar-bg" > < / div >
< div class = "bar-white" > < / div >
< canvas id = "luminanceBar" width = "25" height = "200" > < / canvas >
< div class = "hsv-barcursors" id = "hsv_cursors" >
< div class = "hsv-barcursor-l" > < / div >
< div class = "hsv-barcursor-r" > < / div >
< / div >
< / div >
< div id = "color_squares" >
< div > < / div >
< div > < / div >
< div > < / div >
< div > < / div >
< div > < / div >
< div > < / div >
< div > < / div >
< / div >
2014-09-07 17:49:36 +02:00
< div id = "description" > Demo patches: demonstrate how to build color pickers and how Colors' / ColorPicker's API work. Patches are linked to < select > < option value = "Colors" > Colors< / option > < option value = "ColorPicker" > ColorPicker< / option > < / select >
2014-10-05 18:20:02 +02:00
< p > See a simple jQuery implementation < a href = "jQuery_implementation/" > preview here< / a > or a simple javaScript implementation < a href = "javaScript_implementation/" > preview here< / a > < / p > < / div >
2014-08-04 15:14:27 +02:00
<!-- <div id="model_display"></div> -->
<!-- canvas style="position: absolute; left: 500px; width: 255px; height: 255px" id="canvas"></canvas -->
2014-08-05 17:16:42 +02:00
< script type = "text/javascript" src = "colors.js" > < / script >
2014-08-04 15:14:27 +02:00
<!-- script type="text/javascript" src="tools.js"></script -->
< script type = "text/javascript" src = "colorPicker.data.js" > < / script >
< script type = "text/javascript" src = "colorPicker.js" > < / script >
<!-- <script type="text/javascript" src="color.all.min.js"></script> -->
< script type = "text/javascript" src = "index.js" > < / script >
< / body >
< / html >
