2b:null 2c:["$","title",null,{"children":"Color Picker | Jeremy Stucki | Observable"}] 31:T470,html`

Adjust brightness ${button({ value: '🌚', buttonStyle: { background: 'white', border: '1px solid #ccc' }, onclick: (objs) => { const [ r, g, b ] = chroma(colorPicker.value.gradientColor).darken(0.25)._rgb; colorPicker.setGradientColor(`rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`);3 d3.select(objs.button).interrupt().style('background', '#ccc').transition().duration(150).style('background', 'white'); }, initialize: false }) } ${button({ value: '🌞', divStyle: { marginLeft: '5px' }, buttonStyle: { background: 'white', border: '1px solid #ccc' }, onclick: (objs) => { const [ r, g, b ] = chroma(colorPicker.value.gradientColor).brighten(0.25)._rgb; colorPicker.setGradientColor(`rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`); d3.select(objs.button).interrupt().style('background', 'orange').transition().duration(150).style('background', 'white'); }, initialize: false }) }

`32:T590,ColorOverview = () => { const root = html`

Reference color

Contrast

Selected color

`; const referenceColorEl = root.querySelector('#ref'); // referenceColorEl.onclick = () => root.dispatchEvent(new CustomEvent('referenceColorClick')); const selectedColorEl = root.querySelector('#sel'); // selectedColorEl.onclick = () => root.dispatchEvent(new CustomEvent('selectedColorClick')); const contrastEl = root.querySelector('#con'); return Object.assign(root, { setReferenceColor(color) { referenceColorEl.style.backgroundColor = color; }, setSelectedColor(color) { selectedColorEl.style.backgroundColor = color; }, setContrast(value) { contrastEl.textContent = value; } }); }33:T1a72,Canvas = () => { const canvas = DOM.canvas(w, h); const ctx = canvas.getContext('2d'); let gradientColor = '#fff', backGradient, frontGradient, selectedColor, referenceColor = '#000', currentContrast = 0, imageData; const dragHandleCoords = { x: w * 0.5, y: h * 0.5 }; d3.select(canvas) .on('click', handleDrag) .on('mousemove', (e) => { const { x, y } = dragHandleCoords; if (Math.hypot(e.layerX - x, e.layerY - y) < dragHandleRadius) { ctx.canvas.style.cursor = 'move'; } else { ctx.canvas.style.cursor = 'default'; } }) .call( d3.drag() .clickDistance(dragHandleRadius) .subject((e) => { const { x, y } = dragHandleCoords; if (Math.hypot(e.x - x, e.y - y) < dragHandleRadius) { return dragHandleCoords; } }) .on('drag', handleDrag) ); visibility().then(() => render()); function getContrastLineCoords(k, imageData) { const pathData = []; const step = w > 512 ? 512 : 256; const nOfPixels = w * h * 4; let lastLuminance, lastLuminanceRatio, lastRow = 0, addedInThisRow = false; for (let i = 0; i < nOfPixels; i += step) { const currentRow = Math.floor((i / 4) / w); if (currentRow !== lastRow) { lastLuminanceRatio = undefined; addedInThisRow = false; } if (currentRow % Math.floor(h / 100) !== 0) { addedInThisRow = true; } const [r, g, b] = [imageData.data[i], imageData.data[i + 1], imageData.data[i + 2]]; const luminanceRatio = Math.round(10 * getColorContrast(`rgb(${[r, g, b].join(',')})`, referenceColor)) / 10; if (((luminanceRatio <= k && lastLuminanceRatio > k) || (luminanceRatio > k && lastLuminanceRatio <= k)) && !addedInThisRow) { pathData.push({ x: (i / 4) % w, y: currentRow }); addedInThisRow = true; } lastLuminanceRatio = luminanceRatio; lastRow = currentRow; } return pathData; } function drawContrastLine(k, pathData) { const line = d3.line() .x(d => d.x) .y(d => d.y) .curve(d3.curveBasis) .context(ctx); const getSlopeAndIntercept = (a, b) => { const slope = (b.y - a.y) / (b.x - a.x); const intercept = a.y - a.x * slope; return { slope, intercept }; } const drawLineAndText = (a, b) => { ctx.beginPath(); line([a, b]); ctx.strokeStyle = 'white'; ctx.stroke(); ctx.fillStyle = 'white'; ctx.fillText(k, a.x + 5, a.y + 15); } if (pathData.length) { if (k === 1 || k === 4.5) { ctx.lineWidth = 1; } else { ctx.lineWidth = 3; } let oneLine = true; for (let i = 1; i < pathData.length; i++) { if (pathData[i].y - pathData[i - 1].y > h * 0.25) { oneLine = false; } } if (oneLine) { let [a, b] = [pathData[0], pathData[pathData.length - 1]]; if (a.x !== 0) { const { slope, intercept } = getSlopeAndIntercept(a, b); a = { x: 0, y: intercept }; b = { x: w, y: slope * w + intercept }; } drawLineAndText(a, b); } else { const firstLineData = [], secondLineData = []; let addToFirstData = true; let i = 1; while (addToFirstData) { if (pathData[i].x - pathData[i - 1].x > w * 0.25) { break; } firstLineData.push(pathData[i - 1]); i++; } secondLineData.push(...pathData.slice(i)); const drawOneOfTwoLines = (a, b) => { let { slope, intercept } = getSlopeAndIntercept(a, b); drawLineAndText({ x: 0, y: intercept }, { x: w, y: slope * w + intercept }); } drawOneOfTwoLines(firstLineData[0], firstLineData[firstLineData.length - 1]); drawOneOfTwoLines(secondLineData[0], secondLineData[secondLineData.length - 1]); return true; } } } function updateGradients() { backGradient = ctx.createLinearGradient(w * 0.5, h, w * 0.5, 0); backGradient.addColorStop(0, '#000'); backGradient.addColorStop(1, 'transparent'); frontGradient = ctx.createLinearGradient(0, h, w, 0); frontGradient.addColorStop(0, 'white'); frontGradient.addColorStop(0.2, 'white'); frontGradient.addColorStop(1, gradientColor); } function drawDragHandle() { const { x, y } = dragHandleCoords; ctx.beginPath(); ctx.arc(x, y, 10, 0, 2 * Math.PI); // ctx.fillStyle = selectedColor; ctx.fillStyle = referenceColor; ctx.fill(); ctx.strokeStyle = 'white'; ctx.stroke(); // ctx.fillStyle = 'white'; ctx.fillText(Math.round(currentContrast * 10) / 10, x + 12.5, y - 7.5); } function updateCurrentContrast() { const { x, y } = dragHandleCoords; const [r, g, b] = ctx.getImageData(x, y, 1, 1).data; currentContrast = getColorContrast(`rgb(${[r, g, b].join(',')})`, referenceColor); } function handleDrag(e) { dragHandleCoords.x = Math.max(1, Math.min(w - 1, e.type === 'click' ? e.layerX : e.x)); dragHandleCoords.y = Math.max(1, Math.min(h - 1, e.type === 'click' ? e.layerY : e.y)); render(); } function updateSelectedColor() { const { x, y } = dragHandleCoords; const { data } = ctx.getImageData(x, y, 1, 1); selectedColor = `rgb(${data.slice(0, 3).join(',')})`; updateCurrentContrast(); ctx.canvas.dispatchEvent(new CustomEvent('input')); } function fillCanvas() { ctx.clearRect(0, 0, w, h); ctx.fillStyle = frontGradient; ctx.fillRect(0, 0, w, h); ctx.fillStyle = backGradient; ctx.fillRect(0, 0, w, h); } function render(drawContrastLines = true) { fillCanvas(); updateSelectedColor(); const pathCoords3 = getContrastLineCoords(3, imageData); const needOneLine = drawContrastLine(3, pathCoords3); if (needOneLine) { const pathCoords1 = getContrastLineCoords(1, imageData); drawContrastLine(1, pathCoords1); } const pathCoords45 = getContrastLineCoords(4.5, imageData); drawContrastLine(4.5, pathCoords45); const pathCoords7 = getContrastLineCoords(7, imageData); drawContrastLine(7, pathCoords7); drawDragHandle(); } return Object.assign(ctx.canvas, { setGradientColor: (color) => { gradientColor = color; updateGradients(); fillCanvas(); imageData = ctx.getImageData(0, 0, w, h); render(); }, setReferenceColor: (color) => { referenceColor = color; render(); }, getGradientColor: () => gradientColor, getCurrentColor: () => selectedColor, getCurrentContrast: () => currentContrast, getReferenceColor: () => referenceColor }); }34:T5ce,Slider = (Canvas) => { const h = 40, n = nOfColorsInRamp, r = dragHandleRadius; const canvas = DOM.canvas(w, h); const ctx = canvas.getContext('2d'); let dragHandleCoords = { x: w * 0.5 }; function render() { ctx.clearRect(0, 0, w, h); // Construct the ramp. for (let i = 0; i < n; i++) { ctx.beginPath(); ctx.rect(w * (i / n), r, w / n + 0.5, h - r * 2); ctx.fillStyle = d3.interpolateRainbow(i / n); ctx.fill(); ctx.closePath(); } // Draw the drag handle. ctx.beginPath(); ctx.rect(dragHandleCoords.x, 0, r, h); ctx.fillStyle = 'black'; ctx.fill(); const color = d3.interpolateRainbow((dragHandleCoords.x + r / 2) / w); Canvas.setGradientColor(color); } render(); d3.select(ctx.canvas) .on('click', (e) => { // TODO: for sure this could be expressed in a shorter wat if (e.layerX - dragHandleCoords.x > r || e.layerX - dragHandleCoords.x < 0) { dragHandleCoords = { x: e.layerX - r / 2 }; render(); } }) .call( d3.drag() .subject((e) => { // TODO: for sure this could be expressed in a shorter wat if (e.x - dragHandleCoords.x > 0 && e.x - dragHandleCoords.x < 10 && e.x > dragHandleCoords.x) { return dragHandleCoords; } }) .on('drag', handleDrag) ); function handleDrag(e) { e.subject.x = Math.max(0, Math.min(width - r, e.x)); render(); } return ctx.canvas; }35:T483,ColorPicker = () => { const colorOverview = ColorOverview(); const canvas = Canvas(); const root = html`

${colorOverview}

${canvas}

${Slider(canvas)}

`; // colorOverview.addEventListener('referenceColorClick', () => { // canvas.setGradientColor(canvas.getReferenceColor()); // }); // colorOverview.addEventListener('selectedColorClick', () => { // canvas.setGradientColor(canvas.getCurrentColor()); // }); canvas.addEventListener('input', () => { root.value = { selectedColor: canvas.getCurrentColor(), gradientColor: canvas.getGradientColor(), contrast: canvas.getCurrentContrast() }; colorOverview.setSelectedColor(root.value.selectedColor); colorOverview.setContrast(Math.round(root.value.contrast * 10) / 10); root.dispatchEvent(new CustomEvent('input')); }); return Object.assign(root, { setGradientColor(color) { canvas.setGradientColor(color); }, setReferenceColor(color) { colorOverview.setReferenceColor(color); canvas.setReferenceColor(color); } }); }36:[] 2f:{"id":"de6b358f98f1d7bf","slug":"color-picker","title":"Color Picker","thumbnail":"77153807e127a86bd3370cfb3bb53c8988f91ecb96447e81c716373864457549","access_level":"public","create_time":"$D2021-09-22T12:31:25.934Z","update_time":"$D2021-09-23T12:39:30.062Z","view_time":null,"first_public_time":"$D2021-09-29T12:50:45.038Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"c5109c80b84a25f0","login":"jerstucki","name":"Jeremy Stucki","avatar_url":"https://avatars-next.observableusercontent.com/624b9c6e8a961fdf00436e72cffff012f78e7515eb1798d48230a56ce884e3ae","tier":"starter_2024"},"version":1325,"publish_version":1325,"role":null,"authored":false,"authors":[{"type":"individual","id":"44bee8f4b23a0cb4","login":"jstcki","name":"Jeremy Stucki","avatar_url":"https://avatars-next.observableusercontent.com/624b9c6e8a961fdf00436e72cffff012f78e7515eb1798d48230a56ce884e3ae","tier":null}],"members":[{"type":"individual","id":"e223a61f267a7572","login":"bartok32","name":"Bartosz Prusinowski","avatar_url":"https://avatars-next.observableusercontent.com/8be2bc3aaeb2864562e463ac4f47c9557b8fb285a7ac0c5584e6f83c8606be7a","tier":null,"role":"editor"},{"type":"individual","id":"44bee8f4b23a0cb4","login":"jstcki","name":"Jeremy Stucki","avatar_url":"https://avatars-next.observableusercontent.com/624b9c6e8a961fdf00436e72cffff012f78e7515eb1798d48230a56ce884e3ae","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"99ef1360af485f84","slug":"test-colors","title":"Color Tool Experiments","owner":{"id":"c5109c80b84a25f0","login":"jerstucki","name":"Jeremy Stucki"}},"type":"notebook","body":{"title":"Color Picker","cells":[{"id":0,"value":"# Color Picker","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1241,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":304,"value":"colorPicker = {\n const colorPicker = ColorPicker();\n // colorPicker.addEventListener('input', () => mutable selectedColor = colorPicker.value.selectedColor);\n return colorPicker;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1303,"value":"colorPicker.setReferenceColor(\"orange\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":841,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":249,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":300,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":169,"value":"md`## Constants`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"w = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"h = w * 0.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":191,"value":"nOfColorsInRamp = 256","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"dragHandleRadius = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1095,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":506,"value":"import { getColorContrast } from \"@herrstucki/color-functions\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1117,"value":"import { ColorPalette } from '826bf805cfc953f6'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1218,"value":"chroma = require('chroma-js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1237,"value":"import { button, slider } from '@bartok32/diy-inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1188,"value":"html`\nGoogle Fonts import\n \n \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"