Unharshify Highlight Test

5 highlight colors × 7 backgrounds. mixSrgb at 25% / 30% / 32% / 40% / 100%. Current defaults: 30% light, 32% dark. 100% = the raw color untouched. Contrast pills = WCAG 2.1 ratio of verse text vs highlight fill.

The un-harshify function · view source on Val Town

// color-mix(in srgb, a p%, b) — plain per-channel lerp\nfunction mixSrgb(hexA, hexB, p) {\n  const a = hexToRgb(hexA), b = hexToRgb(hexB);\n  return rgbToHex(a.map((ca, i) => ca * p + b[i] * (1 - p)));\n}\n\nfunction getFillColor(hex, theme, background) {\n  return theme === \"dark\"\n    ? mixSrgb(hex, background, 0.32)\n    : mixSrgb(hex, background, 0.30);\n}

\n\n\n\n\n\n`;\n","label","unharshify-colors-youversion",[109],"83d89eb5-99fe-4270-a65b-fab9f763e0c4",["D",1784836952212],"// color-mix(in srgb, a p%, b) — plain per-channel lerp\nconst hexToRgb = (h) =>\n [0, 2, 4].map((i) => parseInt(h.replace(\"#\", \"\").slice(i, i + 2), 16));\nconst rgbToHex = (rgb) =>\n \"#\" +\n rgb.map((c) =>\n Math.round(Math.min(255, Math.max(0, c))).toString(16).padStart(2, \"0\")\n ).join(\"\");\n\nexport function mixSrgb(hexA, hexB, p) {\n const a = hexToRgb(hexA), b = hexToRgb(hexB);\n return rgbToHex(a.map((ca, i) => ca * p + b[i] * (1 - p)));\n}\n\nfunction getFillColor(hex, theme, background) {\n return theme === \"dark\"\n ? mixSrgb(hex, background, 0.32)\n : mixSrgb(hex, background, 0.30);\n}\n\nconst colors = [\n \"FFFE00\", // yellow\n \"5DFF79\", // green\n \"00D6FF\", // blue\n \"FFC66F\", // orange\n \"FF95EF\", // pink\n];\n\nconst circumstances = [\n { backgroundColor: \"FEF5EB\", theme: \"light\" },\n // { backgroundColor: \"80BDC4\", theme: \"light\" }, // teal background\n // { backgroundColor: \"F6F4F4\", theme: \"light\" }, // surface primary\n // { backgroundColor: \"232121\", theme: \"dark\" }, // surface primary\n // { backgroundColor: \"1C2A3B\", theme: \"dark\" }, // expressive blue 50\n];\n\nfor (const color in colors) {\n for (const circumstance in circumstances) {\n const fillColor = getFillColor(\n colors[color],\n circumstances[circumstance].theme,\n circumstances[circumstance].backgroundColor,\n );\n console.log(\n colors[color],\n circumstances[circumstance].theme,\n circumstances[circumstance].backgroundColor,\n fillColor,\n );\n }\n}",[73],"pulls","branches","forks","envVars",{"_280":20,"_282":20},"connections",{"_280":20,"_281":20},"count","unfilledCount","emptyCount",{"_42":269,"_13":73,"_71":72,"_52":-5,"_44":45,"_261":96,"_262":200,"_46":289,"_48":89,"_74":75,"_264":271,"_76":24,"_266":-5,"_286":290,"_237":291},{"_42":260,"_13":109,"_71":108,"_52":-5,"_44":45,"_261":183,"_262":200,"_46":285,"_48":148,"_74":110,"_264":265,"_76":24,"_266":267,"_286":287,"_237":288},["D",1784839291260],"children",[],[109],["D",1784836952212],[],[73],["D",1784835605291],{"_11":12,"_236":79},{"_11":12,"_231":232,"_78":79,"_25":77,"_233":234,"_235":24},{"_48":183,"_13":16,"_42":45,"_223":188,"_224":-5,"_225":-5,"_226":-5,"_227":-5,"_228":-5,"_229":14,"_230":12},"ctx",{"_60":-5,"_255":329,"_330":331,"_332":333,"_334":24,"_335":24,"_336":24,"_337":200,"_338":-5,"_339":-7,"_340":-7,"_341":20,"_342":24,"_343":24,"_344":-5,"_345":24,"_346":24,"_347":24,"_348":-5},"ENV",{"_300":301,"_302":303,"_304":16,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History