2d:null 2e:["$","title",null,{"children":"Color Interpolation | Juan Emilio Miralles | Observable"}] 33:T7c5,intLinear = (number=16, intSource="rgb", mode="make last", code1, code2) => { const getSteps = (intSource, number, code1, code2) => { if (intSource == "rgb") { const rgb2 = toRGBarray(code2); const rgb1 = toRGBarray(code1); return({ r: Math.round((rgb2[0] - rgb1[0])/number), g: Math.round((rgb2[1] - rgb1[1])/number), b: Math.round((rgb2[2] - rgb1[2])/number), source: intSource, number: number, code1: code1, code2: code2, }); } else if (intSource == "hsl_cw" || intSource == "hsl_ccw") { const hsl2 = toHSLarray(code2); const hsl1 = toHSLarray(code1); return({ h: Math.round((hsl2[0] - hsl1[0])/number), s: Math.round((hsl2[1] - hsl1[1])/number), l: Math.round((hsl2[2] - hsl1[2])/number), source: intSource, number: number, code1: code1, code2: code2, }); } } const getColorStep = (intSource="rgb", steps, stepNum) => { let color; if (intSource == "rgb") { color = getColorStepRGB(steps, stepNum); } else if (intSource == "hsl_ccw") { color = getColorStepHSL(steps, stepNum); } else if (intSource == "hsl_cw") { color = getColorStepHSL(steps, stepNum); } return toColorObj(color.code, steps.code1, steps.code2); } const steps = getSteps(intSource, number, code1, code2); if (intSource == "hsl_cw") { steps.h = -steps.h } let colors = Array.from({ length: number - 1 }, (v, i) => getColorStep(intSource, steps, i)); if (mode == "keep last") { colors.push(toColorObj(code2, code1, code2)) } else if (mode == "make last") { colors.push(getColorStep(intSource, steps, number)) } else if (mode == "extra") { colors.push(getColorStep(intSource, steps, number)); colors.push(toColorObj(code2, code1, code2)); colors.push(getColorStep(intSource, steps, number+1)); colors.push(getColorStep(intSource, steps, number+2)); } return colors; }34:T7cb,randPaletteStat = { const paletteRs = (palette) => { return palette.map((d) => { return d.r }) } const paletteGs = (palette) => { return palette.map((d) => { return d.g }) } const paletteBs = (palette) => { return palette.map((d) => { return d.b }) } const paletteBgCrs = (palette) => { return palette.map((d) => { return d.bgcr }) } const paletteFgCrs = (palette) => { return palette.map((d) => { return d.fgcr }) } const checkRule = (crs = []) => { return crs.map((cr) => { return cr >= 4.5 ? true : false }) } const paletteHSL = (palette) => { return palette.map((d) => { return({ h: toHSLarray(d.code)[0], s: toHSLarray(d.code)[1], l: toHSLarray(d.code)[2], }) }) } const paletteHSLs = paletteHSL(randPalette); const paletteHs = (palette) => { return palette.map((d) => { return d.h }) } const paletteSs = (palette) => { return palette.map((d) => { return d.s*100 }) } const paletteLs = (palette) => { return palette.map((d) => { return d.l*100 }) } return ({ mean_r: d3.mean(paletteRs(randPalette)), mean_g: d3.mean(paletteGs(randPalette)), mean_b: d3.mean(paletteBs(randPalette)), dev_r: d3.deviation(paletteRs(randPalette)), dev_g: d3.deviation(paletteGs(randPalette)), dev_b: d3.deviation(paletteBs(randPalette)), mean_bgcr: d3.mean(paletteBgCrs(randPalette)), mean_fgcr: d3.mean(paletteFgCrs(randPalette)), dev_bgcr: d3.deviation(paletteBgCrs(randPalette)), dev_fgcr: d3.deviation(paletteFgCrs(randPalette)), bg_pass: checkRule(paletteBgCrs(randPalette)).filter(Boolean).length / nStat * 100, fg_pass: checkRule(paletteFgCrs(randPalette)).filter(Boolean).length / nStat * 100, hsls: paletteHSLs, mean_h: d3.mean(paletteHs(paletteHSLs)), mean_s: d3.mean(paletteSs(paletteHSLs)), mean_l: d3.mean(paletteLs(paletteHSLs)), dev_h: d3.deviation(paletteHs(paletteHSLs)), dev_s: d3.deviation(paletteSs(paletteHSLs)), dev_l: d3.deviation(paletteLs(paletteHSLs)), }); }35:T4f6,toHSLarray = (code, approx=true) => { 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); return atan2 >= 0 ? atan2 : atan2 + 2*Math.PI; } const beta = (rgb = [], approx) => { if(approx) { return Math.sqrt(3)/2*(rgb[1] - rgb[2]) } else { return Math.sin(toDegrees(60))*(rgb[1] - rgb[2]) } } const alpha = (rgb = [], approx) => { if(approx) { return (2*rgb[0] - rgb[1]- rgb[2])/2 } else { return rgb[0] - Math.cos(toDegrees(60))*(rgb[1] + rgb[2]) } } const H_2 = (rgb = [], atanFunc=atan2super) => { return atanFunc(beta(rgb, approx), alpha(rgb, approx)) } 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)), 100*S_L(colorScaled), 100*L(colorScaled)]; }36:T772,displayColors = (colors=[], display_mode="palette", bg="#000000", fg="#FFFFFF") => { const w = circleDiam; const h = circleDiam; const displayColorsGo = (colors_raw = [], display_mode, bg, fg) => { const colors = colors_raw.slice(0, paletteDisplayNumber); if(display_mode == "palette") { return svg`${colors.map((color, i) => svg`` )}` } else if(display_mode == "contrast ratios") { return svg`${colors.map((color, i) => svg`${[ svg``, svg` ${color.bgcr.toFixed(2)} `, svg` ${color.fgcr.toFixed(2)} ` ]}` )}` } else if(display_mode == "color codes") { return svg`${colors.map((color, i) => svg`${[ svg``, svg` ${color.code} ` ]}` )}` } else if(display_mode == "textmoon") { return svg`${[ svg`${colors.map((color, i) => svg`` )}`, svg` ${displayRatio(colors[0].code, colors[1].code)} ` ]}` } } return svg` ` }37:[] 31:{"id":"26527ec4e45dc795","slug":"color-interpolation","title":"Color Interpolation","thumbnail":"393e4337aa3519b5c387a61fe6058860c7d9a508ef3002d60aade6c064c89791","access_level":"public","create_time":"$D2023-05-08T18:31:53.295Z","update_time":"$D2024-04-22T00:10:55.653Z","view_time":null,"first_public_time":"$D2023-05-08T18:31:53.295Z","has_unpublished_edits":null,"fork":{"id":"58b6e2953e4502a5","slug":"color-randomizer","title":"Color randomizer","owner":{"id":"6031f6f711e0c46c","login":"je-miralles","name":"Juan Emilio Miralles"}},"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":2305,"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 Interpolation","cells":[{"id":0,"value":"# Color Interpolation\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: Hue, saturation, lightness](https://observablehq.com/@je-miralles/color-study-ii)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1202,"value":"viewof randPickBGFG = 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":758,"value":"Linear interpolation through RGB space.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":722,"value":"displayColors(intLinear(paletteDisplayNumber, intBloodPick.method, intBloodPick.mode, randPickBGFG.bg, randPickBGFG.fg), \"contrast ratios\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"viewof intPick = Inputs.form({\n color1: Inputs.color({label: \"color1\", value: \"#4250e2\"}),\n color2: Inputs.color({label: \"color2\", value: \"#fd3f16\"}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"displayColors(intLinear(paletteDisplayNumber, intBloodPick.method, intBloodPick.mode, intPick.color1, intPick.color2), \"color codes\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2296,"value":"paletteDisplayNumber","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2298,"value":"Array.from(intLinear(paletteDisplayNumber, intBloodPick.method, intBloodPick.mode, intPick.color1, intPick.color2), (color) => color.code)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1029,"value":" In \"make last\" mode, we make the nearest color that fits the gradient endpoint.\n\n In \"keep last\" mode, we keep the endpoint, even if it doesn't fit the gradient.\n\n Next we choose the gradient endpoints from the randomized palette below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":961,"value":"viewof intBloodPick = Inputs.form({\n color1: Inputs.range([0, paletteDisplayNumber-1], {label: \"color1\", step: 1, value: \"3\"}),\n color2: Inputs.range([0, paletteDisplayNumber-1], {label: \"color2\", step: 1, value: paletteDisplayNumber-1}),\n mode: Inputs.radio([\"keep last\", \"make last\", \"extra\"], {label: \"mode\", value: \"make last\"}),\n method: Inputs.radio([\"rgb\", \"hsl_ccw\", \"hsl_cw\"], {label: \"method\", value: \"rgb\"}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"displayColors(intLinear(paletteDisplayNumber, intBloodPick.method, intBloodPick.mode, randPalette[intBloodPick.color1].code, randPalette[intBloodPick.color2].code), \"color codes\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"## Randomization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"displayColors(randPalette, randomize.display_mode, randPickBGFG.bg, randPickRGB.fg)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof randPickRGB = 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})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"viewof randomize = Inputs.form({\n randomize: Inputs.button(\"randomize\"),\n randFunc: Inputs.radio([\"rgb\", \"hsl\"], {label: \"with\", value: \"rgb\"}),\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: ${randPaletteStat.mean_bgcr.toFixed(3)}, deviation ${randPaletteStat.dev_bgcr.toFixed(3)}. Pass rate: ${randPaletteStat.bg_pass.toFixed(2)}%\n\nmean fg ratio: ${randPaletteStat.mean_fgcr.toFixed(3)}, deviation ${randPaletteStat.dev_fgcr.toFixed(3)}. Pass rate: ${randPaletteStat.fg_pass.toFixed(2)}%","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"viewof randPickHSL = 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 \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":762,"value":"### Interpolation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":712,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1992,"value":"getColorStepRGB = (steps, stepNum) => {\n const min = 0;\n const max = 255;\n const rgb1 = toRGBarray(steps.code1);\n const rgb2 = toRGBarray(steps.code2);\n const r_diff = stepNum*steps.r;\n const g_diff = stepNum*steps.g;\n const b_diff = stepNum*steps.b;\n const r = clamp(min, max, rgb1[0] + r_diff);\n const g = clamp(min, max, rgb1[1] + g_diff);\n const b = clamp(min, max, rgb1[2] + b_diff);\n const code = toColorCodeStringRGB([r, g, b]);\n\n const color = {\n code1: steps.code1,\n code2: steps.code2,\n code: code,\n rgb1: rgb1,\n rgb2: rgb2,\n h_step: steps.r,\n s_step: steps.g,\n l_step: steps.b,\n r: r,\n g: g,\n b: b,\n };\n return color;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1644,"value":"getColorStepHSL = (steps, stepNum) => {\n const min = 0;\n const max_h = 360;\n const max_s = 100;\n const max_l = 100;\n const hsl1 = toHSLarray(steps.code1);\n const hsl2 = toHSLarray(steps.code2);\n const h_diff = stepNum*steps.h;\n const s_diff = stepNum*steps.s;\n const l_diff = stepNum*steps.l;\n const h = clamph(max_h, hsl1[0] + h_diff);\n const s = clamp(min, max_s, hsl1[1] + s_diff);\n const l = clamp(min, max_l, hsl1[2] + l_diff);\n const code = toColorCodeStringHSL([h, s, l]);\n \n const color = {\n code1: steps.code1,\n code2: steps.code2,\n code: code,\n hsl1: hsl1,\n hsl2: hsl2,\n h_step: steps.h,\n s_step: steps.s,\n l_step: steps.l,\n h: h,\n s: s,\n l: l,\n h_p: hsl1[0] + h_diff,\n s_p: hsl1[1] + s_diff,\n l_p: hsl1[2] + l_diff,\n };\n return color;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1214,"value":"clamp = (min, max, value) => Math.max(min, Math.min(max, value));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1941,"value":"clamph = (max, value) => { return value >= 0 ? Math.abs(value%360) : value + 360 }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1039,"value":"colorDiffs = (colors = []) => {\n let colorDiffs = [];\n for(let i = 1; i < colors.length; i++) {\n colorDiffs.push({\n r: colors[i].r - colors[i-1].r,\n g: colors[i].g - colors[i-1].g,\n b: colors[i].b - colors[i-1].b,\n })\n }\n return colorDiffs;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"bloodmoon = [\"#000000\", \"#2f1627\", \"#3d1d32\", \"#632b58\", \"#7a3a64\", \"#903f5c\", \"#bf3a55\", \"#d64b4b\", \"#df7171\", \"#f4cfcf\", \"#ffffff\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"### Stats","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":481,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"nStat = 10000","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":20,"value":"randPalette = {\n randomize.randomize;\n if (randomize.randFunc == \"rgb\") { return getRandPalette(nStat, \"rgbpicker\", Math.random) }\n else if (randomize.randFunc == \"hsl\") { return getRandPalette(nStat, \"hslpicker\", Math.random) }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"getRandPalette = (number=16, randSource=\"rgbpicker\", randFunc=Math.random) => {\n return Array.from({ length: number }, () => getRandColorObj(randSource, randFunc));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"getRandColorObj = (randSource, randFunc) => {\n const getRandColorRGB = (randFunc) => {\n return randomColorRGB(\n randPickRGB.min_red ,randPickRGB.max_red,\n randPickRGB.min_grn ,randPickRGB.max_grn,\n randPickRGB.min_blu ,randPickRGB.max_blu,\n randFunc\n );\n }\n const getRandColorHSL = (randFunc) => {\n return randomColorHSL(\n randPickHSL.a_min, randPickHSL.a_max,\n randPickHSL.r_min, randPickHSL.r_max,\n randPickHSL.h_min, randPickHSL.h_max,\n randFunc\n );\n }\n let code;\n if(randSource == \"rgbpicker\") {\n code = getRandColorRGB(randFunc);\n } else {\n code = getRandColorHSL(randFunc);\n }\n return toColorObj(code, randPickBGFG.bg, randPickBGFG.fg);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","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":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":322,"value":"### Math","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"contrastRatio = (code1, code2) => {\n const L1 = luminance(code1);\n const L2 = luminance(code2);\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":256,"value":"luminance = (code) => {\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 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":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 = []) => { return toColorCodeStringRGB(toRGBfromHSL(hsl)) }","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":527,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"toColorObj = (code, bg=\"#000000\", fg=\"#FFFFFF\") => {\n const rgb = toRGBarray(code);\n const hsl = toHSLarray(code);\n return {\n code: code,\n r: rgb[0],\n g: rgb[1],\n b: rgb[2],\n h: hsl[0],\n s: hsl[1],\n l: hsl[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":2235,"value":"#### TODO\n\nFull circle conversion has occasionally large rounding errors. Any fix?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2182,"value":"toColorCodeStringHSL(toHSLarray(\"#8ec4dc\", false))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2247,"value":"toHSLarray(\"#8ec4dc\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2238,"value":"monitor = displayHSL(toHSLarray(\"#8ec4dc\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2199,"value":"expect1 = \t\"hsl(198, 53%, 71%)\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2256,"value":"expect2 = \"hsl(198.5, 52.7%, 71%)\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2258,"value":"expect3 = \"hsl(198.46, 52.7%, 70.98%)\"","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":2240,"value":"displayHSL = (hsl = []) => { return `hsl(${hsl[0].toFixed(2)}, ${hsl[1].toFixed(2)}%, ${hsl[2].toFixed(2)}%)` }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2252,"value":"displayRGB = (rgb = []) => { return `rgb(${rgb[0].toFixed(0)}, ${rgb[1].toFixed(0)}, ${rgb[2].toFixed(0)})` }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"circleDiam = 80","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":859,"value":"paletteDisplayNumber = Math.floor(width / (circleDiam/2) - 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"displayRatio = (code0, code1, width=3) => { return contrastRatio(code0, code1).toFixed(width) }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"