30:T75f,spaces = [ // rgb family ['rgb', {r: [1], g: [1], b: [1]}, undefined, (r,g,b) => `color(srgb ${r} ${g} ${b})`], ['lrgb', {r: [1], g: [1], b: [1]}, 'linear light RGB', '--srgb-linear'], ['a98', {r: [1], g: [1], b: [1]}, undefined, 'a98-rgb'], ['p3', {r: [1], g: [1], b: [1]}, undefined, 'display-p3'], ['prophoto', {r: [1], g: [1], b: [1]}, 'ProPhoto', 'prophoto-rgb'], ['rec2020', {r: [1], g: [1], b: [1]}, 'Rec. 2020', 'rec2020'], // hsl/hsv/hsi family ['hsl', {h: [360], s: [1], l: [1]}], ['hsv', {h: [360], s: [1], v: [1]}], ['hsi', {h: [360], s: [1], i: [1]}], // cilab ['lab', {l: [100], a: [-79.287, 93.55], b: [-112.029, 93.388]}, 'CIELAB'], ['lch', {l: [100], c: [131.207], h: [360]}, 'CIELch'], ['lab65', {l: [100], a: [-86.183, 98.234], b: [-107.86, 94.478]}, 'CIELAB 65'], ['lch65', {l: [100], c: [133.807], h: [360]}, 'CIELch 65'], // cieluv ['luv', {l: [100], u: [-84.936, 175.042], v: [-125.882, 87.243]}, 'CIELuv'], ['lchuv', {l: [100], c: [176.956], h: [360]}, 'CIELch'], // DINN99 ['dlab', {l: [100], a: [-40.09, 45.501], b: [-40.469, 44.344]}, 'DIN99o cartesian'], ['dlch', {l: [100], c: [51.484], h: [360]}, 'DIN99o cylindrical'], // OK ['oklab', {l: [1], a: [-0.233, 0.276], b: [-0.311, 0.198]}, 'Oklab'], ['oklch', {l: [1], c: [0.322], h: [360]}, 'Oklch'], ['okhsl', {h: [360], s: [1], l: [1]}, 'Okhsl'], ['okhsv', {h: [360], s: [1], v: [1]}, 'Okhsv'], // jab ['jab', {j: [0.222], a: [-0.109, 0.129], b: [-0.185, 0.134]}, 'Jab cartesian'], ['jch', {j: [0.222], a: [0.19], b: [360]}, 'Jab cylindrical'], // other ['hwb', {h: [360], w: [1], b: [1]}], ['yiq', {Y: [1], I: [-0.595, 0.595], Q: [-0.522, 0.522]}], ['xyz50', {X: [0.964], Y: [0.999], Z: [0.825]}, 'CIE XYZ D50'], ['xyz65', {X: [0.950], Y: [1], Z: [1.088]}, 'CIE XYZ D65'], ['cubehelix', {h: [360], s: [4.614], l: [1]}, 'Cube Helix'], ]31:[] 2e:{"title":"Random colors","cells":[{"id":0,"value":"# Random colors\n\nCreates a set of random colors based on a given color space and bounds.","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"viewof reset = Inputs.button(\"Reroll\", {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"viewof pickerColorSpace = Inputs.select(spaces, {label: \"Color space\", format: d => d[2] ?? d[0].toUpperCase()})","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"viewof colorPickerForm = Inputs.form(\n Object.entries(pickerColorSpace[1]).map(([k, range], idx) =>\n rangeSlider({\n min: range.length == 1 ? 0 : range[0],\n max: range.length == 1 ? range[0] : range[1],\n title: k.toUpperCase(),\n format: (d) => d.toFixed(2),\n precision: 2\n })\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"viewof randomSwatches = {\n let colors = [];\n let func = (swatchIdx) => {\n let values = Object.fromEntries(\n Object.keys(pickerColorSpace[1]).map((key, valIdx) => [\n key,\n rng(`color-${swatchIdx}-val-${valIdx}`, colorPickerForm[valIdx])\n ])\n );\n let color = culori[pickerColorSpace[0]](values);\n colors[swatchIdx] = color;\n return color;\n };\n let rvEl = swatches(func);\n rvEl.value = colors;\n return rvEl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"# Varying Okhsl's Lightness value\n\nTakes the first swatch from above, and creates a set of swatches with the same hue and saturation, but with the entire reange of luminance values, based on the Okhsl color space.","pinned":false,"hidden":false,"mode":"md"},{"id":346,"value":"{\n reset;\n let steps = Math.floor(width / swatchSpace);\n let stepSize = 1 / (steps + 1);\n\n let l = d3\n .scaleLinear()\n .domain([0, steps - 1])\n .range([0.1, 0.9]);\n\n let original = randomSwatches[0];\n let okhsl = culori.okhsl(original);\n\n let colors = Array.from({ length: steps }).map((_, idx) =>\n culori.okhsl({\n h: okhsl.h,\n s: okhsl.s,\n l: l(idx)\n })\n );\n\n return html`

\n ${colors.map(swatch)}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":491,"value":"inputSeed = `${+new Date()}::${reset}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"swatchSpace = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"swatchMargin = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"rng = (key, [min, max] = [0, 1]) => {\n let hashed = sha3(`${inputSeed}::${JSON.stringify(key)}`);\n let val = parseInt(hashed.slice(0, 12), 16);\n let div = Math.pow(2, 48);\n let r = val / div;\n return r * (max - min) + min;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"formatColor = (c) => {\n let { mode, ...rest } = c;\n let rv = `${mode} {`;\n for (let [k, v] of Object.entries(rest)) {\n alert(v);\n let vs = v.toFixed(2);\n if (vs.length == 5) {\n vs = vs.slice(0, -1);\n } else if (vs.length == 6) {\n vs = vs.slice(0, -3);\n }\n rv += `\\n ${k}: ${vs},`;\n }\n rv += \"\\n}\";\n\n rv += `\\nCB/W: ${wcagContrast(c, black).toFixed(1)}/${wcagContrast(\n white,\n c\n ).toFixed(1)}`;\n rv += `\\nLAB L: ${culori.lab(c).l.toFixed(2)}`;\n\n return rv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"swatches = (colorFunc) => {\n return html`\n

\n ${Array.from({ length: 1 * Math.floor(width / swatchSpace) })\n .map((_, idx) => colorFunc(idx))\n .map(swatch)}\n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"swatch = (original = {}) => {\n let hex = culori.formatHex(culori.rgb(original));\n return html`

${formatColor(original)}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"wcagContrast = (c1, c2) => {\n // https://www.w3.org/TR/WCAG21/#dfn-relative-luminance\n let chanLum = (v) =>\n v < 0.3928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);\n let lum = (c) =>\n 0.2126 * chanLum(c.r) + 0.7152 * chanLum(c.g) + 0.0722 * chanLum(c.b);\n return (lum(culori.rgb(c1)) + 0.05) / (lum(culori.rgb(c2)) + 0.05);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"white = culori.rgb({ r: 1, g: 1, b: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"black = culori.rgb({ r: 0, g: 0, b: 0 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"tooDark = (c) => {\n let whiteContrast = wcagContrast(white, c);\n let blackContrast = wcagContrast(c, black);\n\n return blackContrast < whiteContrast;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"ordinal = (n, offset = 1) => {\n let v = n + offset;\n if (v % 10 === 1) {\n return `${v}st`;\n } else if (v % 10 === 2) {\n return `${v}nd`;\n } else if (v % 10 === 3) {\n return `${v}rd`;\n } else {\n return `${v}th`;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":587,"value":"## Imports","pinned":true,"hidden":false,"mode":"md"},{"id":104,"value":"culori = require(\"culori@2.0.3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"sha3 = (await require(\"js-sha3\")).sha3_256","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"import { rangeSlider } from \"@mootari/range-slider@1312\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}