2d:null 2e:["$","title",null,{"children":"Color study: HSL | Juan Emilio Miralles | Observable"}] 33:T4ed,toHSL2 = (code) => { const M = (rgb = []) => { return Math.max(...rgb) } const m = (rgb = []) => { return Math.min(...rgb) } const C = (rgb = []) => { return M(rgb) - m(rgb)} const scaleRGB = (rgb = []) => { return [rgb[0]/255, rgb[1]/255, rgb[2]/255] } const toDegrees = (radians) => { return radians * 360 / (2 * Math.PI) } const atan2super = (y, x) => { const atan2 = Math.atan2(y, x); if (atan2 < 0) { return atan2 + 2*Math.PI } else { return atan2 } } const beta = (rgb = [], approx=true) => { if(approx) { return Math.sqrt(3)*(rgb[1] - rgb[2])/2 } else { return (rgb[1] - rgb[2])*Math.sin(toDegrees(60)) } } const alpha = (rgb = [], approx=true) => { if(approx) { return (2*rgb[0] - rgb[1]- rgb[2])/2 } else { return rgb[0] - (rgb[1] + rgb[2])*Math.cos(toDegrees(60)) } } const H_2 = (rgb = [], atanFunc=atan2super) => { return atanFunc(beta(rgb), alpha(rgb)) } const S_L = (rgb = [], Lfunc=L) => { const L = Lfunc(rgb); if (L == 1 | L == 0) { return 0 } else { return C(rgb)/(1 - Math.abs(2*L - 1)) } } const L = (rgb = []) => { return (M(rgb) + m(rgb))/2 } const colorScaled = scaleRGB(toRGBarray(code)); return [toDegrees(H_2(colorScaled)), S_L(colorScaled), L(colorScaled)]; }34:T5f2,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` ${print_ratio(color.code, bg, 2)} `, svg` ${print_ratio(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` ${print_ratio(colors[0].code, colors[1].code)} ` ]}` } }35:[] 31:{"id":"8d58297b8d34355e","slug":"color-study-ii","title":"Color study: HSL","thumbnail":"97bc869d7228d3bb04b6aac99bbcb9384624063743518dab632bccd9ba163e4c","access_level":"public","create_time":"$D2023-05-01T15:46:16.581Z","update_time":"$D2023-05-15T15:05:44.671Z","view_time":null,"first_public_time":"$D2023-05-01T15:46:16.581Z","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":2000,"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":0,"collection":{"id":"21e13771adf6078e","slug":"finished-ish","title":"finished(ish)","owner":{"id":"6031f6f711e0c46c","login":"je-miralles","name":"Juan Emilio Miralles"}},"type":"notebook","body":{"title":"Color study: HSL","cells":[{"id":0,"value":"# Color study: HSL\n\nSee also\n* [Color randomizer](https://observablehq.com/@je-miralles/color-randomizer)\n* [Color study: Contrast](https://observablehq.com/@je-miralles/color-study-i)\n* [Color study: Interpolation](https://observablehq.com/@je-miralles/color-interpolation)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":248,"value":"displayColorsObj([createColorObj(pickColor1, L, true, randomPicker.bg, randomPicker.fg)], \"palettetext\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1057,"value":"viewof pickColor1 = Inputs.color({label: \"color\", value: \"#135980\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"## Hue, Saturation, Lightness\n> ${displayRGB(toRGBarray(pickColor1))} -> ${displayHSL(toHSL(pickColor1))}\n\n* ${tex`M = max(R, G, B) =`} ${pickColor1obj.M.toFixed(3)}\n* ${tex`m = min(R, G, B) =`} ${pickColor1obj.m.toFixed(3)}\n* ${tex`C = range(R, G, B) = M - m =`} ${pickColor1obj.C.toFixed(3)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":397,"value":"### Hue and chroma\n\n* ${tex`\\alpha = R - G cos(60) -B cos(60) = \\frac{1}{2} (2 R - G - B) =`} ${pickColor1obj.alpha.toFixed(3)}\n* ${tex`\\beta = G sin(60) - B sin(60) = \\frac{\\sqrt{3}}{2} (G - B) =`} ${pickColor1obj.beta.toFixed(3)}\n* ${tex`H_2 = atan2(\\beta, \\alpha) =`} ${pickColor1obj.H_2.toFixed(3)}\n* ${tex`C_2 = gmean(\\alpha, \\beta) = \\sqrt{\\alpha^2 + \\beta^2} =`} ${pickColor1obj.C_2.toFixed(3)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":184,"value":"### Lightness\n\n* ${tex`L = mid(R, G, B) = \\frac{1}{2} (M + m) =`} ${pickColor1obj.L.toFixed(3)}\n\nMore perceptually relevant is luma:\n\n* ${tex`Y'_{601} = 0.299 R + 0.587 G + 0.114 B =`} ${pickColor1obj.luma.toFixed(3)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":790,"value":"### Saturation\n\n* ${tex`\n S_L = \\begin{cases}\n 0 & \\text{if $L = 1$ or $L = 0$} \\\\\n \\frac{C}{1 - |2L - 1|} & \\text{otherwise}\n \\end{cases}\n `}\n \n ${tex` S_L =`} ${pickColor1obj.S_L.toFixed(3)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":96,"value":"### Randomization on a cylinder","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":152,"value":"viewof randCylPicker = Inputs.form({\n randomPalette: Inputs.button(\"random1\"),\n a_min: Inputs.range([0, 360], {label: \"min angle\", step: 1, value:0}),\n a_max: Inputs.range([0, 360], {label: \"max angle\", step: 1, value:360}),\n r_min: Inputs.range([0, 100], {label: \"min radius\", step: 1, value:0}),\n r_max: Inputs.range([0, 100], {label: \"max radius\", step: 1, value:100}),\n h_min: Inputs.range([0, 100], {label: \"min height\", step: 1, value:0}),\n h_max: Inputs.range([0, 100], {label: \"max height\", step: 1, value:100}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1901,"value":"displayColorsObj([randCyl], \"palettecodes\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1940,"value":"$${displayRGB(toRGBarray(randCyl.code))}\n\n${displayHSL([randCyl.H_2, randCyl.S_L, randCyl.L])}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":351,"value":"### RGB to HSL","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"M = (rgb = []) => { return Math.max(...rgb) }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"m = (rgb = []) => { return Math.min(...rgb) }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"C = (rgb = []) => { return M(rgb) - m(rgb)}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"C_2 = (rgb = []) => {\n return Math.sqrt(beta(rgb)**2 + alpha(rgb)**2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"alpha = (rgb = [], approx=true) => {\n if(approx) { return (2*rgb[0] - rgb[1]- rgb[2])/2 }\n else { return rgb[0] - (rgb[1] + rgb[2])*Math.cos(toDegrees(60)) }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"beta = (rgb = [], approx=true) => {\n if(approx) { return Math.sqrt(3)*(rgb[1] - rgb[2])/2 }\n else { return (rgb[1] - rgb[2])*Math.sin(toDegrees(60)) }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"H_2 = (rgb = [], atanFunc=atan2super) => { return atanFunc(beta(rgb), alpha(rgb)) }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"S_L = (rgb = [], Lfunc=L) => {\n const L = Lfunc(rgb);\n if (L == 1 | L == 0) { return 0 }\n else { return C(rgb)/(1 - Math.abs(2*L - 1)) }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":903,"value":"L = (rgb = []) => { return (M(rgb) + m(rgb))/2 }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1853,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1479,"value":"toHSL = (code) => {\n const colorScaled = scaleRGB(toRGBarray(code));\n return [toDegrees(H_2(colorScaled)), 100*S_L(colorScaled), 100*L(colorScaled)];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1295,"value":"createColorObj = (color, luma=Y_601, approx=true, bg=randomPicker.bg, fg=randomPicker.fg) => {\n const colorScaled = scaleRGB(toRGBarray(color));\n return ({\n code: color,\n r: toRGBarray(color)[0],\n g: toRGBarray(color)[1],\n b: toRGBarray(color)[2],\n m: m(colorScaled),\n M: M(colorScaled),\n C: C(colorScaled),\n alpha: alpha(colorScaled, approx),\n beta: beta(colorScaled, approx),\n H_2: toDegrees(H_2(colorScaled)),\n C_2: C_2(colorScaled),\n S_L: S_L(colorScaled),\n luma: luma(colorScaled),\n L: L(colorScaled),\n bgcr: print_ratio(bg, color, 2),\n fgcr: print_ratio(fg, color, 2),\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1911,"value":"toRGBfromHSL = (hsl = []) => {\n const H = hsl[0];\n const S = hsl[1]/100;\n const L = 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 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 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 rgb;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1998,"value":"hslToRgb = (hue, sat, light) => {\n hue = hue % 360;\n\n if (hue < 0) {\n hue += 360;\n }\n\n sat /= 100;\n light /= 100;\n\n function f(n) {\n let k = (n + hue/30) % 12;\n let a = sat * Math.min(light, 1 - light);\n return light - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));\n }\n\n return [f(0), f(8), f(4)];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"### Randomization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":161,"value":"randCyl = {\n randCylPicker.randomPalette;\n return createColorObj(toColorCodeStringHSL(randomColorHSL(randCylPicker.a_min, randCylPicker.a_max, randCylPicker.r_min, randCylPicker.r_max, randCylPicker.h_min, randCylPicker.h_max)))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"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 randAngle = () => Math.abs(Math.floor(randFunc() * (a_max - a_min) + a_min));\n const randRadius = () => Math.abs(Math.floor(randFunc() * (r_max - r_min) + r_min));\n const randHeight = () => Math.abs(Math.floor(randFunc() * (h_max - h_min) + h_min));\n return([randAngle(), randRadius(), randHeight()]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"randomColor = (min=0, max=255, randFunc=Math.random) => {\n const randVal = () => Math.abs(Math.floor(randFunc() * (max - min) + min));\n let r = randVal();\n let g = randVal();\n let b = randVal();\n if (r > max) { r = max; }\n if (r < min) { r = min; }\n if (g > max) { g = max; }\n if (g < min) { g = min; }\n if (b > max) { b = max; }\n if (b < min) { b = min; }\n return toColorCodeStringRGB([r, g, b]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"makeColor = (min, max, bg, fg, randFunc) => {\n let color = randomColor(min, max, randFunc);\n return ({\n code: color,\n r: toRGBarray(color)[0],\n g: toRGBarray(color)[1],\n b: toRGBarray(color)[2],\n bgcr: print_ratio(bg, color, 2),\n fgcr: print_ratio(fg, color, 2)\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"makePalette = (number=16, min=0, max=255, bg=\"#000000\", fg=\"#FFFFFF\", randFunc=Math.random) => {\n return Array.from({ length: number }, () => makeColor(min, max, bg, fg, randFunc));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"randomPalette = makePalette(nStat, randomPicker.min ,randomPicker.max, randomPicker.bg, randomPicker.fg)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"### Math","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1614,"value":"atan2super = (x, y) => {\n const atan2 = Math.atan2(x, y);\n if (atan2 < 0) { return atan2 + 2*Math.PI }\n else { return atan2 }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"toDegrees = (radians) => { return radians * 360 / (2 * Math.PI) }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"toRadians = (degrees) => { return degrees * (2 * Math.PI) / 360 }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"nStat = 10000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"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":72,"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":70,"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":18,"value":"c_ratio = (L1, L2) => { return L1 > L2 ? (L1 + 0.05) / (L2 + 0.05) : (L2 + 0.05) / (L1 + 0.05) }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"Y_2020 = (rgb = []) => { return 0.2627*rgb[0] + 0.6780*rgb[1] + 0.0593*rgb[2] }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1460,"value":"Y_601 = (rgb = []) => { return 0.299*rgb[0] + 0.587*rgb[1] + 0.114*rgb[2] }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"luminance = (rgb = []) => {\n const RsRGB = rgb[0]/255;\n const GsRGB = rgb[1]/255;\n const BsRGB = rgb[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 0.2126*R + 0.7152*G + 0.0722*B; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"### Conversion","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1909,"value":"toColorCodeStringHSL = (hsl = []) => { return toColorCodeStringRGB(toRGBfromHSL(hsl)) }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"scaleRGB = (rgb = []) => { return [rgb[0]/255, rgb[1]/255, rgb[2]/255] }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"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":22,"value":"toRGBarray = (colorCodeString) => {\n let r = colorCodeString.slice(1,3);\n let g = colorCodeString.slice(3,5);\n let b = colorCodeString.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":85,"value":"### Display","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":235,"value":"print_rgb = (code) => {\n const rgb = toRGBarray(code)\n return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1508,"value":"print_hsl = (hsl = [], ints=true) => {\n if(ints) { return `hsl(${Math.round(hsl[0])}, ${Math.round(100*hsl[1])}, ${Math.round(100*hsl[2])})}` }\n else { return `hsl(${hsl[0].toFixed(3)}, ${hsl[1].toFixed(3)}, ${hsl[2].toFixed(3)})}` }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"print_ratio = (color0, color1, width = 3) => {\n return c_ratio(luminance(toRGBarray(color0)), luminance(toRGBarray(color1))).toFixed(width);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"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":33,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"randomPalatteNumber = Math.floor(width / (w/2) - 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"h = 80","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"w = 80","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1942,"value":"displayRGB = (rgb = []) => { return `rgb(${rgb[0].toFixed(0)}, ${rgb[1].toFixed(0)}, ${rgb[2].toFixed(0)})` }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1944,"value":"displayHSL = (hsl = []) => { return `hsl(${hsl[0].toFixed(2)}, ${hsl[1].toFixed(2)}%, ${hsl[2].toFixed(2)}%)` }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"### Colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1342,"value":"pickColor1obj = createColorObj(pickColor1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"colCode1 = \"#2c4f4b\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1376,"value":"testGreen = \"#008000\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":885,"value":"### RandomPicker","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"viewof randomPicker = Inputs.form({\n randomPalette: Inputs.button(\"random1\"),\n min: Inputs.range([0, 255], {label: \"min\", step: 1, value:0}),\n max: Inputs.range([0, 255], {label: \"max\", step: 1, value:255}),\n bg: Inputs.color({label: \"background color\", value: \"#000000\"}),\n fg: Inputs.color({label: \"foreground color\", value: \"#FFFFFF\"}),\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":7,"value":"showRandom = {\n randomPicker.randomPalette;\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(randomPalette, method, randomPicker.bg, randomPicker.fg);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"Out of ${nStat} samples:\n\nThe average background contrast ratio: ${d3.mean(paletteBgCrs(randomPalette)).toFixed(3)}, deviation ${d3.deviation(paletteBgCrs(randomPalette)).toFixed(3)}. Pass rate: ${(checkRule(paletteBgCrs(randomPalette)).filter(Boolean).length / nStat * 100).toFixed(2)}%\n\nThe average foreground contrast ratio: ${d3.mean(paletteFgCrs(randomPalette)).toFixed(3)}, deviation ${d3.deviation(paletteFgCrs(randomPalette)).toFixed(3)}. Pass rate: ${(checkRule(paletteFgCrs(randomPalette)).filter(Boolean).length / nStat * 100).toFixed(2)}%","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":108,"value":"## References\n\n* https://en.wikipedia.org/wiki/HSL_and_HSV#General_approach\n* https://www.w3.org/TR/css-color-3/#hsl-color","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"