31:T686,## Why? I think that the standard color picker design doesn't make it easy enough to find a color. ${await FileAttachment('chrome-colorpicker@2.png').image()} _Common HSL color picker, from Chrome_ In an HSL colorpicker, you can only change hue, saturation, and luminance. The hue is usually confined to a bar, which is not very helpful because it is the most sensitive to small adjustments, making it very difficult to tweak precisely. Meanwhile, the main rectangular space only allows you to adjust saturation and luminance, which are not that interesting to change. No matter what your value of hue is, the Saturation-Luminance field always looks the same: a bold color in the top-right goes off to white towards the left and black towards the bottom. The HSL color picker design makes it difficult to compare colors of differing hue with the same saturation/luminance, or move between color representations. For example, how can I just add green to my color? Not possible: the HSL color picker design lets you _export_ to RGB, but it does not let you adjust RGB outside of entering values one at a time. This notebook is an attempt at a color picker that lets you explore the color space more freely, letting you move along the dimensions of RGB and HSL simultaneously. The tradeoff, however, is that you can only change one dimension at a time: changing one value affects all the others, so the typical "Saturation-Luminance field" isn't possible. I think this tradeoff is worth it, and it's more extensible: we can add more color dimensions (like CMYK) by just adding more bars! ### Acknowledgements Inspired by [colorizer.org](https://www.colorizer.org).32:T6a7,/** * Draw an interactive color bar * @param colorFn (t: number) => [number, number, number] Given a position on the bar (between 0 and 1), return its RGB * @param onSelect (t: number) => void Callback for when a position is selected on the bar */ function colorbar({colorFn, onSelect}) { const WIDTH = COLORBAR_WIDTH const HEIGHT = 32 const container = DOM.element('div') function handleSelect(coords) { const t = coords[0] / WIDTH onSelect(t) } let isDragging = false const canvas = d3.select(container).append('canvas') .attr('width', WIDTH) .attr('height', HEIGHT) .attr('style', 'cursor: crosshair; border: 1px solid black; border-radius: 2px;') .on('mousedown', function() { isDragging = true handleSelect(d3.mouse(this)) }) .on('mouseup', () => { isDragging = false; }) .on('mousemove', function() { const coords = d3.mouse(this) if (isDragging) { handleSelect(coords) } mutable hoverRGB = colorFn(coords[0] / WIDTH) }) const ctx = canvas.node().getContext('2d') const imgData = ctx.getImageData(0, 0, WIDTH, HEIGHT) // Possible optimization: cache d3.range so we're not recalculating it a million times d3.range(WIDTH).forEach(colIdx => { const t = colIdx / WIDTH const rgb = colorFn(t) d3.range(HEIGHT).forEach(rowIdx => { const screenIdx = rowIdx * WIDTH + colIdx const imgDataIdx = 4 * screenIdx imgData.data[imgDataIdx] = rgb[0] imgData.data[imgDataIdx + 1] = rgb[1] imgData.data[imgDataIdx + 2] = rgb[2] imgData.data[imgDataIdx + 3] = 255 }) }); ctx.putImageData(imgData, 0, 0) return container; }33:[{"id":"7dd7ef5dc34e0a859ae0a128926350c57dd5c02e3b3c73c33fb76097f784c5f5dde2d1e5ea8b3d0f548c8feb72443899bc847f17f26bc47b4d2912e8cdeb3048","href":"https://static.observableusercontent.com/files/7dd7ef5dc34e0a859ae0a128926350c57dd5c02e3b3c73c33fb76097f784c5f5dde2d1e5ea8b3d0f548c8feb72443899bc847f17f26bc47b4d2912e8cdeb3048","name":"chrome-colorpicker@2.png","type":"image/png","lastModified":1709861885313.822,"size":128050}] 2f:{"title":"Progressive Color Picker","cells":[{"id":0,"value":"md`# Progressive Color Picker\nI hope you'll find it easier to find colors with this notebook, compared to standard colorpickers.\n\n## Instructions\n**Hover** over the bars of color to preview a swatch. **Click** and **drag** the bars to move closer to the color you are looking for. All the other bars will react to your selection, letting you progressively refine your choice.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"md`\n# Colorpicker`","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"preview()","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"html`\n

\n Hex\n

\n #${parseInt(colorR).toString(16).padStart(2, 0)}${parseInt(colorG).toString(16).padStart(2, 0)}${parseInt(colorB).toString(16).padStart(2, 0)}\n

\n RGB\n

rgb(${formatColor(colorR)}, ${formatColor(colorG)}, ${formatColor(colorB)})

\n HSL\n

hsl(${formatColor(colorH)}, ${formatPct(colorS)}, ${formatPct(colorL)})

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"md`### Controls`","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"md`#### Red`","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"redBar = colorbar({\n colorFn: t => ([t * 255, colorG, colorB]),\n onSelect: t => {\n const red = t * 255\n set(viewof colorR, red)\n onUpdateRGB(red, colorG, colorB)\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"{\n const input = Inputs.range([0, 255], {\n value: 255,\n step: 1,\n })\n input.value = initialRGB[0]\n input.oninput = (evt) => onUpdateRGB(evt.currentTarget.value, colorG, colorB)\n return Inputs.bind(input, viewof colorR)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"md`#### Green`","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"greenBar = colorbar({\n colorFn: t => ([colorR, t * 255, colorB]),\n onSelect: t => {\n const green = t * 255\n set(viewof colorG, green)\n onUpdateRGB(colorR, green, colorB)\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"{\n const input = Inputs.range([0, 255], {\n value: 0,\n step: 1, \n })\n input.value = initialRGB[1]\n input.oninput = (evt) => onUpdateRGB(colorR, evt.currentTarget.value, colorB)\n return Inputs.bind(input, viewof colorG)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":623,"value":"md`#### Blue`","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"blueBar = colorbar({\n colorFn: t => ([colorR, colorG, t * 255]),\n onSelect: t => {\n const blue = t * 255\n set(viewof colorB, blue)\n onUpdateRGB(colorR, colorG, blue)\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"{\n const input = Inputs.range([0, 255], {\n value: 0,\n step: 1, \n })\n input.value = initialRGB[2]\n input.oninput = (evt) => onUpdateRGB(colorR, colorG, evt.currentTarget.value)\n return Inputs.bind(input, viewof colorB)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"md`#### Hue`","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"hueBar = colorbar({\n colorFn: t => hslToRgb(t, colorS, colorL),\n onSelect: t => {\n set(viewof colorH, t * 255)\n onUpdateHSL(t * 255, colorS, colorL)\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"{\n const input = Inputs.range([0, 255], {\n value: 0,\n step: 1, \n })\n input.value = initialHSL[0]\n input.oninput = (evt) => onUpdateHSL(evt.currentTarget.value, colorS, colorL)\n return Inputs.bind(input, viewof colorH)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"md`#### Saturation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"saturationBar = colorbar({\n colorFn: t => hslToRgb(colorH / 360, t, colorL),\n onSelect: t => {\n set(viewof colorS, t)\n onUpdateHSL(colorH / 360, t, colorL)\n },\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"{\n const input = Inputs.range([0, 1], {\n value: 0,\n step: 0.01, \n })\n input.value = initialHSL[1]\n input.oninput = (evt) => onUpdateHSL(colorH, evt.currentTarget.value, colorL)\n return Inputs.bind(input, viewof colorS)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"md`#### Luminance`","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"luminanceBar = colorbar({\n value: viewof colorL,\n colorFn: t => hslToRgb(colorH / 360, colorS, t),\n onSelect: t => {\n set(viewof colorL, t)\n onUpdateHSL(colorH / 360, colorS, t)\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"{\n const input = Inputs.range([0, 1], {\n value: 0,\n step: 0.01, \n })\n input.value = initialHSL[2]\n input.oninput = (evt) => onUpdateHSL(colorH, colorS, evt.currentTarget.value)\n return Inputs.bind(input, viewof colorL)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"preview()","pinned":false,"hidden":false,"mode":"ojs"},{"id":996,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"// Show preview swatches of color\npreview = () => {\n const container = DOM.element('div')\n d3.select(container).attr('style', 'display: flex;')\n \n d3.select(container)\n .append('div')\n .text('Selected')\n .style('font-weight', 'bold')\n .append('div')\n .classed('swatch', true)\n .style('background-color', `rgb(${colorR}, ${colorG}, ${colorB}`);\n \n d3.select(container)\n .append('div')\n .text('Preview')\n .style('font-style', 'italic')\n .append('div')\n .classed('swatch', true)\n .style('background-color', `rgb(${hoverRGB[0]}, ${hoverRGB[1]}, ${hoverRGB[2]}`)\n \n d3.select(container).selectAll('div.swatch')\n .style('width', '100px')\n .style('height', '100px')\n .style('margin-right', '8px')\n .style('padding', '4px')\n \n return container\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":582,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"// The currently hovered color\nmutable hoverRGB = [255, 0, 0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":690,"value":"### Constants","pinned":false,"hidden":false,"mode":"md"},{"id":555,"value":"COLORBAR_WIDTH = 512","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"### Components","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":744,"value":"### Data","pinned":false,"hidden":false,"mode":"md"},{"id":821,"value":"initialRGB = [255, 0, 0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":910,"value":"initialHSL = rgbToHsl(...initialRGB)","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"viewof colorR = Inputs.input(initialRGB[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":896,"value":"viewof colorG = Inputs.input(initialRGB[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"viewof colorB = Inputs.input(initialRGB[2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":761,"value":"viewof colorH = Inputs.input(initialHSL[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":758,"value":"viewof colorS = Inputs.input(initialHSL[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":727,"value":"viewof colorL = Inputs.input(initialHSL[2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"### Helpers","pinned":false,"hidden":false,"mode":"md"},{"id":347,"value":"/**\n * Update all color values based on current HSL\n */\nonUpdateHSL = function(h, s, l) {\n const rgb = hslToRgb(h / 255, s, l)\n console.log(h)\n set(viewof colorR, rgb[0])\n set(viewof colorG, rgb[1])\n set(viewof colorB, rgb[2])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"/**\n * Update all color values based on current RGB\n */\nonUpdateRGB = function(r, g, b) {\n const hsl = rgbToHsl(r, g, b)\n set(viewof colorH, hsl[0] * 255)\n set(viewof colorS, hsl[1])\n set(viewof colorL, hsl[2])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":832,"value":"set = function(view, value) {\n view.value = value\n view.dispatchEvent(new CustomEvent(\"input\"))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"### Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":201,"value":"/**\n * Credit to github.com/mjackson Source: https://gist.github.com/mjackson/5311256\n * Converts an RGB color value to HSL. Conversion formula\n * adapted from http://en.wikipedia.org/wiki/HSL_color_space.\n * Assumes r, g, and b are contained in the set [0, 255] and\n * returns h, s, and l in the set [0, 1].\n *\n * @param Number r The red color value\n * @param Number g The green color value\n * @param Number b The blue color value\n * @return Array The HSL representation\n */\nfunction rgbToHsl(r, g, b) {\n r /= 255, g /= 255, b /= 255;\n\n var max = Math.max(r, g, b), min = Math.min(r, g, b);\n var h, s, l = (max + min) / 2;\n\n if (max == min) {\n h = s = 0; // achromatic\n } else {\n var d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n\n switch (max) {\n case r: h = (g - b) / d + (g < b ? 6 : 0); break;\n case g: h = (b - r) / d + 2; break;\n case b: h = (r - g) / d + 4; break;\n }\n\n h /= 6;\n }\n\n return [ h, s, l ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"/**\n * Credit to github.com/mjackson Source: https://gist.github.com/mjackson/5311256\n * Converts an HSL color value to RGB. Conversion formula\n * adapted from http://en.wikipedia.org/wiki/HSL_color_space.\n * Assumes h, s, and l are contained in the set [0, 1] and\n * returns r, g, and b in the set [0, 255].\n *\n * @param {number} h The hue\n * @param {number} s The saturation\n * @param {number} l The lightness\n * @return {Array} The RGB representation\n */\nfunction hslToRgb(h, s, l){\n let r, g, b;\n\n if(s == 0){\n r = g = b = l; // achromatic\n } else {\n let q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n let p = 2 * l - q;\n r = hue2rgb(p, q, h + 1/3);\n g = hue2rgb(p, q, h);\n b = hue2rgb(p, q, h - 1/3);\n }\n\n return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"/**\n * Credit github.com/mjackson. Source: https://gist.github.com/mjackson/5311256\n */\nfunction hue2rgb(p, q, t) {\n if (t < 0) t += 1;\n if (t > 1) t -= 1;\n if (t < 1/6) return p + (q - p) * 6 * t;\n if (t < 1/2) return q;\n if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"formatPct = d3.format(\".0%\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":961,"value":"formatColor = d3.format('.0f')","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":289,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}