diff options
| -rw-r--r-- | README.md | 11 | ||||
| -rw-r--r-- | index.html | 87 |
2 files changed, 79 insertions, 19 deletions
diff --git a/README.md b/README.md new file mode 100644 index 0000000..9085f36 --- /dev/null +++ b/README.md @@ -0,0 +1,11 @@ +cielab color picker +=================== + +Haha well that certainly is a misnomer... This is actually a Hunter Lab color picker. CieL\*a\*b\* has gamut issues that make it more difficult to work with. Lab color is more appealing in a picker than RGB or HSL, if only for the reason that it is not full of desaturated grays. + +Very little to note about this, except if you click in one place and then shift-click in another, it will generate a 6-part gradient. + +Uses the functions from [http://www.easyrgb.com/index.php?X=MATH](http://www.easyrgb.com/index.php?X=MATH) + +Gradient idea from [http://davidjohnstone.net/pages/lch-lab-colour-gradient-picker](http://davidjohnstone.net/pages/lch-lab-colour-gradient-picker) + @@ -1,9 +1,18 @@ <style> -#cursor { position: fixed; top: -100px; left: -100px; margin-left: -5px; margin-top: -5px; width: 5px; height: 5px; border: 2px solid black; border-radius: 20px; +#cursor_to,#cursor { position: fixed; top: -100px; left: -100px; margin-left: -5px; margin-top: -5px; width: 5px; height: 5px; border: 2px solid black; border-radius: 20px; pointer-events: none; } +#cursor_to { border-color: #888; } +#gradients { visibility: hidden; } +.swatch { display: inline-block; width: 16px; height: 16px; border: 1px solid black; margin-right: 10px; } +label { font-size: 90%; } </style> -<canvas id="hunterlab"></canvas> <div id="cursor"></div> +<div id="cursor_to"></div> + +<table border="0"> +<tr><td> +<canvas id="hunterlab"></canvas> +</td><td> <br> L <input type="range" min="0" max="100" value="100" id="hunter_L"> @@ -15,6 +24,19 @@ b <input type="range" min="-107.863" max="94.482" id="hunter_b"> <br> <input type="text" id="selected"> <input type="text" id="hex"> +<br> +<br> + +<div id="gradients"> + <div class="swatch"></div><label></label><br> + <div class="swatch"></div><label></label><br> + <div class="swatch"></div><label></label><br> + <div class="swatch"></div><label></label><br> + <div class="swatch"></div><label></label><br> + <div class="swatch"></div><label></label><br> +</div> +</td></tr> +</table> <script> var xyz = [0,0,0] @@ -31,46 +53,73 @@ b_range = [-107.863, 94.482] ctx = hunterlab.getContext('2d') ii = jj = -100 +iii = jjj = -100 down = false +hunter_a.value = hunter_b.value = 0 + +mode = "L" +imageData = ctx.createImageData(w,h) +data = imageData.data +axis('L')() + hunter_L.oninput = axis('L') hunter_a.oninput = axis('a') hunter_b.oninput = axis('b') hunterlab.onmousedown = function (e){ e.preventDefault() down = true - ii = e.clientX - hunterlab.offsetLeft - jj = e.clientY - hunterlab.offsetTop + read(e) pick() } hunterlab.onmousemove = function(e){ if (! down) return - ii = e.clientX - hunterlab.offsetLeft - jj = e.clientY - hunterlab.offsetTop + read(e) pick() } document.body.onmouseup = function (e){ down = false } +function read(e) { + if (e.shiftKey) { + iii = e.clientX - hunterlab.offsetLeft + jjj = e.clientY - hunterlab.offsetTop + } + else { + ii = e.clientX - hunterlab.offsetLeft + jj = e.clientY - hunterlab.offsetTop + } +} function pick () { - x = mix( ii/ww, x_range[0], x_range[1] ) - y = mix( jj/hh, y_range[0], y_range[1] ) - rgb = xyz2rgb(fn(val, x, y)) - selected.value = "rgb(" + rgb.map(Math.round).join(",") + ")" - hex.value = "#" + rgb.map(Math.round).map(function(n){ var s = n.toString(16); return s.length == 1 ? "0"+s : s }).join("") + if (ii > -1) { + x = mix( ii/ww, x_range[0], x_range[1] ) + y = mix( jj/hh, y_range[0], y_range[1] ) + rgb = xyz2rgb(fn(val, x, y)) + selected.value = rgb_string(rgb) + hex.value = hex_string(rgb) + } cursor.style.left = (ii + hunterlab.offsetTop) + "px" cursor.style.top = (jj + hunterlab.offsetTop) + "px" + cursor_to.style.left = (iii + hunterlab.offsetTop) + "px" + cursor_to.style.top = (jjj + hunterlab.offsetTop) + "px" + gradient() } - -hunter_a.value = hunter_b.value = 0 - -mode = "L" -imageData = ctx.createImageData(w,h) -data = imageData.data -axis('L')() +function gradient () { + if (ii < -1 && iii < -1) return + swatches = document.querySelectorAll('.swatch') + labels = document.querySelectorAll('label') + for (var k = 0; k < 6; k++) { + x = mix( mix(k/5, ii, iii)/w, x_range[0], x_range[1] ) + y = mix( mix(k/5, jj, jjj)/h, y_range[0], y_range[1] ) + rgb = xyz2rgb(fn(val, x, y)) + swatches[k].style.backgroundColor = labels[k].innerHTML = hex_string(rgb) + } + gradients.style.visibility = "visible" +} +function rgb_string (rgb) { return "rgb(" + rgb.map(Math.round).join(",") + ")" } +function hex_string (rgb) { return "#" + rgb.map(Math.round).map(function(n){ var s = n.toString(16); return s.length == 1 ? "0"+s : s }).join("") } function axis (c) { return function(){ mode = c; paint() } } - function paint () { var fn_body = (hunterlab2xyz + "").split("{")[1].split("}")[0] var fn_body = (hunterlab2xyz + "").split("{")[1].split("}")[0] |