2c:null 2d:["$","title",null,{"children":"Color picker | Bernelle Verster | Observable"}] 32:T4b9,lightness = { const canvas = DOM.canvas(width, 1); const context = canvas.getContext("2d"); canvas.style.width = `${width}px`; canvas.style.height = `${Math.round(width / 16)}px`; let mousedown = false; context.canvas.onmousedown = event => { mousedown = true; context.canvas.onmousemove(event); }; context.canvas.onmousemove = event => { if (!mousedown) return; const rect = event.target.getBoundingClientRect(); render(event.clientX - rect.left); }; context.canvas.onmouseup = event => { mousedown = false; }; function render(x) { x = Math.min(x, width); context.clearRect(0, 0, width, 1); for (let l = 0; l < width; ++l) { context.fillStyle = l === x ? isReadable( contrastRatio(luminance(createRgb(xy[0], xy[1], l / width)), 0) ) ? "black" : "white" : `hsl(${viewof hsl.value[0]}, ${viewof hsl.value[1] * 100}%, ${(l / width) * 100}%)`; context.fillRect(l, 0, 1, 1); } viewof hsl.value = [viewof hsl.value[0], viewof hsl.value[1], x / width]; } render(viewof hsl.value[2] * width); return context.canvas; }33:[] 30:{"id":"986bf6a016b24576","slug":"color-picker","title":"Color picker","thumbnail":"266c8b47ecda56dfc9013addc91d26a7dcd0e846c046f7591fa026db045490f1","access_level":"public","create_time":"$D2020-11-19T18:06:20.529Z","update_time":"$D2020-11-19T18:12:36.877Z","view_time":null,"first_public_time":"$D2020-11-19T18:13:18.176Z","has_unpublished_edits":null,"fork":{"id":"d8c4fbfd2719b83a","slug":"yes-mum-its-a-color-picker","title":"Color picker","owner":{"id":"03836a98946da550","login":"toja","name":"Torben Jansen"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c541497cff836eea","login":"indiebio","name":"Bernelle Verster","avatar_url":"https://avatars-next.observableusercontent.com/fedcddbb6765401599d26ba8fdfa8eb86c4b8df1e7ab2549c5df493f8c26c80b","tier":"starter_2024"},"version":841,"publish_version":841,"role":null,"authored":false,"authors":[{"type":"individual","id":"8554c6b5c13ab331","login":"indiebio","name":"Bernelle Verster","avatar_url":"https://avatars-next.observableusercontent.com/fedcddbb6765401599d26ba8fdfa8eb86c4b8df1e7ab2549c5df493f8c26c80b","tier":null}],"members":[{"type":"individual","id":"8554c6b5c13ab331","login":"indiebio","name":"Bernelle Verster","avatar_url":"https://avatars-next.observableusercontent.com/fedcddbb6765401599d26ba8fdfa8eb86c4b8df1e7ab2549c5df493f8c26c80b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Color picker","cells":[{"id":0,"value":"md`# Color picker\n\nForked from [@toja](https://observablehq.com/@toja/yes-mum-its-a-color-picker), but added names to cells so I can import this in other projects.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"viewof xy = {\n const context = DOM.context2d(width, height, 1);\n let mousedown = false;\n\n context.canvas.onmousedown = event => {\n mousedown = true;\n context.canvas.onmousemove(event);\n };\n\n context.canvas.onmousemove = event => {\n if (!mousedown) return;\n const rect = event.target.getBoundingClientRect();\n render(event.clientX - rect.left, event.clientY - rect.top);\n context.canvas.dispatchEvent(new CustomEvent(\"input\"));\n };\n\n context.canvas.onmouseup = event => {\n mousedown = false;\n };\n\n function render(x, y) {\n context.clearRect(0, 0, width, height);\n context.putImageData(imageData, 0, 0);\n\n context.beginPath();\n context.arc(x, y, 4, 0, 2 * Math.PI);\n context.stroke();\n\n viewof hsl.value = [\n interpolateHue(x / width),\n 1 - y / height,\n viewof hsl.value[2]\n ];\n context.canvas.value = [x, y];\n }\n\n render(width / 2, height / 2);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"viewof color = {\n const rgb = hsl2rgb(hsl);\n const hex = rgb2hex(rgb);\n const div = html`\n

\n ${hex}\n

`\n div.value = hex;\n return div;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"width = 120","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"height = Math.round(width / 3 * 2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"imageData = {\n const data = new Uint8ClampedArray(width * height * 4);\n for (let y = 0, index = -1; y < height; ++y) {\n for (let x = 0; x < width; ++x) {\n const [r, g, b] = createRgb(x, y);\n data[++index] = r || 0;\n data[++index] = g || 0;\n data[++index] = b || 0;\n data[++index] = 255;\n }\n }\n return new ImageData(data, width, height);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"function createRgb(x, y, l = 0.5) {\n return hsl2rgb([\n interpolateHue(x / width),\n 1 - y / height,\n l\n ]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"interpolateHue = lerp(0, 360)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"function lerp(a, b) {\n return t => a * (1 - t) + b * t;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"// https://www.w3.org/TR/WCAG20-TECHS/G18.html\nfunction luminance([r, g, b]) {\n let R = r / 255,\n G = g / 255,\n B = b / 255;\n if (R <= 0.03928) R = R / 12.92; else R = Math.pow((R + 0.055) / 1.055, 2.4);\n if (G <= 0.03928) G = G / 12.92; else G = Math.pow((G + 0.055) / 1.055, 2.4);\n if (B <= 0.03928) B = B / 12.92; else B = Math.pow((B + 0.055) / 1.055, 2.4);\n return 0.2126 * R + 0.7152 * G + 0.0722 * B;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"// https://www.w3.org/TR/WCAG20-TECHS/G18.html\nfunction contrastRatio(l1, l2) {\n if (l1 < l2) [l1, l2] = [l2, l1];\n return (l1 + 0.05) / (l2 + 0.05);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"// https://www.w3.org/TR/WCAG20-TECHS/G18.html\nfunction isReadable(contrastRatio) {\n return contrastRatio >= 4.5;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"// https://en.wikipedia.org/wiki/HSL_and_HSV#From_HSL\nfunction hsl2rgb([h, s, l]) {\n const C = (1 - Math.abs(2 * l - 1)) * s,\n H = h / 60,\n X = C * (1 - Math.abs(H % 2 - 1)),\n m = l - C / 2;\n let rgb;\n switch(Math.floor(H)) {\n case 0: rgb = [C, X, 0]; break;\n case 1: rgb = [X, C, 0]; break;\n case 2: rgb = [0, C, X]; break;\n case 3: rgb = [0, X, C]; break;\n case 4: rgb = [X, 0, C]; break;\n case 5: rgb = [C, 0, X]; break;\n default: rgb = [0, 0, 0];\n }\n return rgb.map(v => Math.round((v + m) * 255));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"function rgb2hex([r, g, b]) {\n const i = r << 16 | g << 8 | b;\n return \"#\" + (\"000000\" + i.toString(16)).slice(-6);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"viewof hsl = new View([180, 0.5, 0.5])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"class View {\n constructor(value) {\n Object.defineProperties(this, {\n _list: { value: [], writable: true },\n _value: { value: value, writable: true }\n });\n }\n\n get value() {\n return this._value;\n }\n set value(value) {\n this._value = value;\n this.dispatchEvent({ type: \"input\", value });\n }\n \n addEventListener(type, listener) {\n if (type != \"input\" || this._list.includes(listener)) return;\n this._list = [listener].concat(this._list);\n }\n removeEventListener(type, listener) {\n if (type != \"input\") return;\n this._list = this._list.filter(l => l !== listener);\n }\n dispatchEvent(event) {\n const p = Promise.resolve(event);\n this._list.forEach(l => p.then(l));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"