2d:null 2e:["$","title",null,{"children":"Color randomizer | Juan Emilio Miralles | Observable"}] 33:T5f0,displayColorsObjGo = (colors_raw = [], method, bg, fg) => { let colors = colors_raw.slice(0, randomPalatteNumber); if(method == "palette") { return svg`${colors.map((color, i) => svg`` )}` } else if(method == "palettetext") { return svg`${colors.map((color, i) => svg`${[ svg``, svg` ${printRatio(color.code, bg, 2)} `, svg` ${printRatio(fg, color.code, 2)} ` ]}` )}` } else if(method == "palettecodes") { return svg`${colors.map((color, i) => svg`${[ svg``, svg` ${color.code} ` ]}` )}` } else if(method == "textmoon") { return svg`${[ svg`${colors.map((color, i) => svg`` )}`, svg` ${printRatio(colors[0].code, colors[1].code)} ` ]}` } }34:[] 31:{"id":"58b6e2953e4502a5","slug":"color-randomizer","title":"Color randomizer","thumbnail":"90bee681c34e6b08143aa1f3b4574a523de1139047ac3413bb7dd7bccf7b0a58","access_level":"public","create_time":"$D2023-05-08T11:27:19.586Z","update_time":"$D2023-05-13T18:05:17.761Z","view_time":null,"first_public_time":"$D2023-05-08T11:27:19.586Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6031f6f711e0c46c","login":"je-miralles","name":"Juan Emilio Miralles","avatar_url":"https://avatars-next.observableusercontent.com/ec2feb60ea833ea7d71ae9033ac5ff5eca3417341ffc2be8d3a9a9cf4243b33d","tier":"starter_2024"},"version":514,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6efa64c483b8aa94","login":"je-miralles","name":"Juan Emilio Miralles","avatar_url":"https://avatars-next.observableusercontent.com/ec2feb60ea833ea7d71ae9033ac5ff5eca3417341ffc2be8d3a9a9cf4243b33d","tier":null}],"members":[{"type":"individual","id":"6efa64c483b8aa94","login":"je-miralles","name":"Juan Emilio Miralles","avatar_url":"https://avatars-next.observableusercontent.com/ec2feb60ea833ea7d71ae9033ac5ff5eca3417341ffc2be8d3a9a9cf4243b33d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"21e13771adf6078e","slug":"finished-ish","title":"finished(ish)","owner":{"id":"6031f6f711e0c46c","login":"je-miralles","name":"Juan Emilio Miralles"}},"type":"notebook","body":{"title":"Color randomizer","cells":[{"id":0,"value":"# Color randomizer\n\nSee also\n* [Color study: Contrast](https://observablehq.com/@je-miralles/color-study-i)\n* [Color study: Hue, saturation, lightness](https://observablehq.com/@je-miralles/color-study-ii)\n* [Color study: Interpolation](https://observablehq.com/@je-miralles/color-interpolation)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":138,"value":"viewof randomPickerBGFG = Inputs.form({\n bg: Inputs.color({label: \"background color\", value: \"#000000\"}),\n fg: Inputs.color({label: \"foreground color\", value: \"#FFFFFF\"}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof randomPicker = Inputs.form({\n min_red: Inputs.range([0, 255], {label: \"min red\", step: 1, value:0}),\n max_red: Inputs.range([0, 255], {label: \"max red\", step: 1, value:255}),\n min_grn: Inputs.range([0, 255], {label: \"min green\", step: 1, value:0}),\n max_grn: Inputs.range([0, 255], {label: \"max green\", step: 1, value:255}),\n min_blu: Inputs.range([0, 255], {label: \"min blue\", step: 1, value:0}),\n max_blu: Inputs.range([0, 255], {label: \"max blue\", step: 1, value:255}),\n display_mode: Inputs.radio([\"contrast ratios\", \"color codes\", \"none\"], {label: \"show\", value: \"contrast ratios\"})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"mean bg ratio: ${d3.mean(paletteBgCrs(randomPaletteRGB)).toFixed(3)}, deviation ${d3.deviation(paletteBgCrs(randomPaletteRGB)).toFixed(3)}. Pass rate: ${(checkRule(paletteBgCrs(randomPaletteRGB)).filter(Boolean).length / nStat * 100).toFixed(2)}%\n\nmean fg ratio: ${d3.mean(paletteFgCrs(randomPaletteRGB)).toFixed(3)}, deviation ${d3.deviation(paletteFgCrs(randomPaletteRGB)).toFixed(3)}. Pass rate: ${(checkRule(paletteFgCrs(randomPaletteRGB)).filter(Boolean).length / nStat * 100).toFixed(2)}%","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"showRandom = {\n let method = \"palette\";\n if (randomPicker.display_mode == \"contrast ratios\") {\n method = \"palettetext\";\n } else if (randomPicker.display_mode == \"color codes\") {\n method = \"palettecodes\";\n }\n return displayColorsObj(randomPaletteRGB, method, randomPickerBGFG.bg, randomPicker.fg);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"viewof randomizeRGB = Inputs.button(\"randomize rgb\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"viewof randomizeHSL = Inputs.button(\"randomize hsl\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"showRandomHSL = {\n let method = \"palette\";\n if (randomPickerHSL.display_mode == \"contrast ratios\") {\n method = \"palettetext\";\n } else if (randomPickerHSL.display_mode == \"color codes\") {\n method = \"palettecodes\";\n }\n return displayColorsObj(randomPaletteHSL, method, randomPickerBGFG.bg, randomPickerBGFG.fg);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"mean bg ratio: ${d3.mean(paletteBgCrs(randomPaletteHSL)).toFixed(3)}, deviation ${d3.deviation(paletteBgCrs(randomPaletteHSL)).toFixed(3)}. Pass rate: ${(checkRule(paletteBgCrs(randomPaletteHSL)).filter(Boolean).length / nStat * 100).toFixed(2)}%\n\nmean fg ratio: ${d3.mean(paletteFgCrs(randomPaletteHSL)).toFixed(3)}, deviation ${d3.deviation(paletteFgCrs(randomPaletteHSL)).toFixed(3)}. Pass rate: ${(checkRule(paletteFgCrs(randomPaletteHSL)).filter(Boolean).length / nStat * 100).toFixed(2)}%","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"viewof randomPickerHSL = Inputs.form({\n a_min: Inputs.range([0, 359], {label: \"min hue\", step: 1, value:0}),\n a_max: Inputs.range([0, 360], {label: \"max hue\", step: 1, value:360}),\n r_min: Inputs.range([0, 100], {label: \"min saturation\", step: 1, value:0}),\n r_max: Inputs.range([0, 100], {label: \"max saturation\", step: 1, value:100}),\n h_min: Inputs.range([0, 100], {label: \"min lightness\", step: 1, value:0}),\n h_max: Inputs.range([0, 100], {label: \"max lightness\", step: 1, value:100}),\n display_mode: Inputs.radio([\"contrast ratios\", \"color codes\", \"none\"], {label: \"show\", value: \"contrast ratios\"}),\n //luminance: Inputs.radio([\"default\", \"Y 2020\"], {label: \"luminance\", value: \"default\"}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":322,"value":"### Math","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":256,"value":"luminance = (code, lumFunc) => {\n const RsRGB = toRGBarray(code)[0]/255;\n const GsRGB = toRGBarray(code)[1]/255;\n const BsRGB = toRGBarray(code)[2]/255;\n const R = RsRGB <= 0.03928 ? RsRGB/12.92 : ((RsRGB+0.055)/1.055) ** 2.4;\n const G = GsRGB <= 0.03928 ? GsRGB/12.92 : ((GsRGB+0.055)/1.055) ** 2.4;\n const B = BsRGB <= 0.03928 ? BsRGB/12.92 : ((BsRGB+0.055)/1.055) ** 2.4;\n return lumFunc([R, G, B]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"lumDef = (rgb = []) => { return 0.2126*rgb[0] + 0.7152*rgb[1] + 0.0722*rgb[2] }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"Y_601 = (rgb = []) => { return 0.299*rgb[0] + 0.587*rgb[1] + 0.114*rgb[2] }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"Y_2020 = (rgb = []) => { return 0.2627*rgb[0] + 0.6780*rgb[1] + 0.0593*rgb[2] }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"contrastRatio = (code1, code2, funcSel) => {\n const lumFunc = (funcSel == \"lumDef\") ? lumDef : Y_2020;\n const L1 = luminance(code1, lumFunc);\n const L2 = luminance(code2, lumFunc);\n return L1 > L2 ? (L1 + 0.05) / (L2 + 0.05) : (L2 + 0.05) / (L1 + 0.05);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"### Conversions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"toColorCodeStringRGB = (rgb = []) => {\n return \"#\" + rgb[0].toString(16).padStart(2, '0') + rgb[1].toString(16).padStart(2, '0') + rgb[2].toString(16).padStart(2, '0');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"toColorCodeStringHSL = (hsl = []) => {\n const rgb = fromHSLtoRGB(hsl);\n return \"#\" + rgb[0].toString(16).padStart(2, '0') + rgb[1].toString(16).padStart(2, '0') + rgb[2].toString(16).padStart(2, '0');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"toRGBarray = (code) => {\n let r = code.slice(1,3);\n let g = code.slice(3,5);\n let b = code.slice(5,7);\n return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"fromHSLtoRGB = (hsl = []) => {\n const H = hsl[0];\n const S = hsl[1] <= 1 ? hsl[1] : hsl[1]/100;\n const L = hsl[2] <= 1 ? hsl[2] : hsl[2]/100;\n\n const C = (1 - Math.abs(2*L - 1))*S;\n const Hp = H / 60;\n const X = C*(1 - Math.abs(Hp%2 - 1));\n const m = L - C/2;\n\n let rgb = [];\n \n if (Hp >= 0 & Hp < 1) { rgb = [C + m, X + m, 0 + m] }\n else if (Hp >= 0 & Hp < 1) { rgb = [C + m, X + m, 0 + m] }\n else if (Hp >= 1 & Hp < 2) { rgb = [X + m, C + m, 0 + m] }\n else if (Hp >= 2 & Hp < 3) { rgb = [0 + m, C + m, X + m] }\n else if (Hp >= 3 & Hp < 4) { rgb = [0 + m, X + m, C + m] }\n else if (Hp >= 4 & Hp < 5) { rgb = [X + m, 0 + m, C + m] }\n else if (Hp >= 5 & Hp < 6) { rgb = [C + m, 0 + m, X + m] }\n\n rgb = rgb.map(v => Math.round(v*255));\n\n const rgbObj = {\n rgb: rgb,\n C: C,\n Hp: Hp,\n X: X,\n m: m,\n };\n return (rgbObj.rgb);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"getColorObj = (code, bg=\"#000000\", fg=\"#FFFFFF\") => {\n return({\n code: code,\n r: toRGBarray(code)[0],\n g: toRGBarray(code)[1],\n b: toRGBarray(code)[2],\n bgcr: contrastRatio(bg, code),\n fgcr: contrastRatio(fg, code),\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"### Randomization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"randomColorRGB = (min_red=0, max_red=255, min_grn=0, max_grn=255, min_blu=0, max_blu=255, randFunc=Math.random) => {\n const randVal = (min, max) => Math.abs(Math.floor(randFunc() * (max - min) + min));\n const r = randVal(min_red, max_red);\n const g = randVal(min_grn, max_grn);\n const b = randVal(min_blu, max_blu);\n return toColorCodeStringRGB([r, g, b]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"randomColorRGB_w = (randFunc) => {\n return randomColorRGB(\n randomPicker.min_red ,randomPicker.max_red,\n randomPicker.min_grn ,randomPicker.max_grn,\n randomPicker.min_blu ,randomPicker.max_blu,\n randFunc\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"randomColorHSL = (a_min=0, a_max=360, r_min=0, r_max=100, h_min=0, h_max=100, randFunc=Math.random) => {\n const randVal = (min, max) => Math.abs(Math.floor(randFunc() * (max - min) + min));\n const h = randVal(a_min, a_max);\n const s = randVal(r_min, r_max);\n const l = randVal(h_min, h_max);\n return(toColorCodeStringHSL([h, s, l]));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"randomColorHSL_w = (randFunc) => {\n return randomColorHSL(\n randomPickerHSL.a_min, randomPickerHSL.a_max,\n randomPickerHSL.r_min, randomPickerHSL.r_max,\n randomPickerHSL.h_min, randomPickerHSL.h_max,\n randFunc\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"getRandColorObj = (source, randFunc) => {\n let code;\n if(source == \"rgbpicker\") {\n code = randomColorRGB_w(randFunc);\n } else {\n code = randomColorHSL_w(randFunc);\n }\n return getColorObj(code, randomPickerBGFG.bg, randomPickerBGFG.fg);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"getRandPalette = (number=16, source=\"rgbpicker\", randFunc=Math.random) => {\n return Array.from({ length: number }, () => getRandColorObj(source, randFunc));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"randomPaletteRGB= {\n randomizeRGB;\n return getRandPalette(nStat, \"rgbpicker\", Math.random);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"randomPaletteHSL = {\n randomizeHSL;\n return getRandPalette(nStat, \"hslpicker\", Math.random);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"Thanks [@d3/d3-random](https://observablehq.com/@d3/d3-random) for the pachinko!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":311,"value":"### Stats","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"nStat = 10000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"paletteBgCrs = (palette) => { return palette.map((d) => { return d.bgcr }) }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"paletteFgCrs = (palette) => { return palette.map((d) => { return d.fgcr }) }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"checkRule = (crs) => { return crs.map((cr) => { return cr >= 4.5 ? true : false }) }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"### Display","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"printRatio = (code0, code1, width=3) => { return contrastRatio(code0, code1).toFixed(width) }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"displayColorsObj = (colors=[], method=\"palette\", bg=\"#000000\", fg=\"#FFFFFF\") => {\n return svg`\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"randomPalatteNumber = Math.floor(width / (w/2) - 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"h = 75","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"w = 75","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"## References\n\n* [Wikipedia: Box Muller Transform](https://en.wikipedia.org/wiki/Box%E2%80%93Muller_transform)\n* [@d3/d3-random](https://observablehq.com/@d3/d3-random)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"