31:T491,{ const height = 160; const steps = 40; const hueStep = Math.abs((minHue - maxHue) / steps); const lightnessStep = Math.abs((minLightness - maxLightness) / steps); function getRow(j) { return `

`; } return html`

${_.range(0, steps) .map((v, i) => { return getRow(i); }) .join("")}

`; }32:T54b,function preview(seed) { const hsla = generateHsla(seed); // const hslaCss = hslaToCss(...hsla) const c = hslaToCss(...hsla); const hex = rgbToHex(...hslToRgb(...hsla)); const contentColor = hslaToCss( hsla[0], hsla[1], hsla[2] < 0.65 ? 0.9 : 0.25, hsla[3] ); return `

${icon(
    "user"
  )}

      #${hex}
    
${icon(
    "user"
  )}

      ${seed}
    

`; }33:[] 2f:{"title":"Persistent colors","cells":[{"id":0,"value":"# Persistent colors","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"**Unique, persistent colors that fit your visual style.** Commonly used to generate a color for a user in web applications (see JS implementation below).","pinned":false,"hidden":false,"mode":"md"},{"id":834,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":855,"value":"## Color picker","pinned":false,"hidden":false,"mode":"md"},{"id":569,"value":"Enter a comma-separated list of demo values to preview:","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"viewof seedsInput = Inputs.textarea({\n // label: \"Seeds\",\n value:\n urlStrings.seeds || \"foo@email.com, bar@email.com, foo@anotherdomain.com, bar@anotherdomain.com\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"html`${seeds.map(preview).join(\"\")}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"Each string will be given a random (but always the same) color.","pinned":false,"hidden":false,"mode":"md"},{"id":276,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":277,"value":"Set boundary [HSLA color values](https://www.smashingmagazine.com/2021/07/hsl-colors-css/) to adjust the color output:","pinned":false,"hidden":false,"mode":"md"},{"id":812,"value":"viewof baseSeed = Inputs.text({\n label: \"Base seed\",\n value: urlStrings.baseSeed || \"Type anything\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"viewof minHue = Inputs.range([0, 359], {\n label: \"Min hue\",\n step: 1,\n value: urlNumbers.minHue || 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"viewof maxHue = Inputs.range([minHue + 1, 360], {\n label: \"Max hue\",\n step: 1,\n value: urlNumbers.maxHue || 360\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"viewof minSaturation = Inputs.range([0, 1], {\n label: \"Min saturation\",\n step: 0.01,\n value: urlNumbers.minSaturation || 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"viewof maxSaturation = Inputs.range([minSaturation + 0.01, 1], {\n label: \"Max saturation\",\n step: 0.01,\n value: urlNumbers.maxSaturation || 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"viewof minLightness = Inputs.range([0, 1], {\n label: \"Min lightness\",\n step: 0.01,\n value: urlNumbers.minLightness || 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"viewof maxLightness = Inputs.range([minLightness + 0.01, 1], {\n label: \"Max lightness\",\n step: 0.01,\n value: urlNumbers.maxLightness || 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"viewof minAlpha = Inputs.range([0, 1], {\n label: \"Min alpha\",\n step: 0.01,\n value: _.isNumber(urlNumbers.minAlpha) ? urlNumbers.minAlpha : 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"viewof maxAlpha = Inputs.range([minAlpha, 1], {\n label: \"Max alpha\",\n step: 0.01,\n value: urlNumbers.maxAlpha || 1,\n disabled: minAlpha >= 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"[Permalink](${liveUrl}) | [Reset](${makeUrl({})})","pinned":false,"hidden":false,"mode":"md"},{"id":904,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1040,"value":"## Color space preview","pinned":false,"hidden":false,"mode":"md"},{"id":908,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1047,"value":"Only colors from this color space will be used.","pinned":false,"hidden":false,"mode":"md"},{"id":1034,"value":"viewof __previewSaturation = Inputs.range([minSaturation, maxSaturation], {label: \"Preview saturation\", step: 0.01})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1063,"value":"viewof __previewAlpha = Inputs.range([minAlpha, maxAlpha], {\n label: \"Preview alpha\",\n step: 0.01,\n disabled: minAlpha === maxAlpha\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":294,"value":"## Output","pinned":false,"hidden":false,"mode":"md"},{"id":339,"value":"seeds = seedsInput.split(\",\").map((s) => s.trim())","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"conf = ({\n baseSeed,\n minHue,\n maxHue,\n minSaturation,\n maxSaturation,\n minLightness,\n maxLightness,\n minAlpha,\n maxAlpha\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"hslas = _.mapValues(\n _.keyBy(seeds, (s) => s),\n generateHsla\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":474,"value":"## CSS","pinned":false,"hidden":false,"mode":"md"},{"id":392,"value":"```css\n.colors {${_.map(hslas, (hsla, seed) => {\n return '\\n ' + `color: ${hslaToCss(...hsla)}; /* ${seed} */`\n})}\n}\n```","pinned":false,"hidden":false,"mode":"md"},{"id":404,"value":"Read more about using HSL colors in CSS at [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl).","pinned":false,"hidden":false,"mode":"md"},{"id":293,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":420,"value":"## JavaScript implementation","pinned":false,"hidden":false,"mode":"md"},{"id":518,"value":"This JavaScript implementation uses the [seedrandom](https://www.npmjs.com/package/seedrandom) package.","pinned":false,"hidden":false,"mode":"md"},{"id":539,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":421,"value":"{\n const s = `// Define your style\nconst conf = {\n ${_.map(conf, (c, k) => `${k}: ${_.isNumber(c) ? c : `\"${c}\"`},`).join(\n \"\\n \"\n )}\n}\n\n// Conversion\n${hslaToCss}\n\n// Usage\n${generateHsla}\n\n// Color generation\n${generateHue}\n${generateSaturation}\n${generateLightness}\n${generateAlpha}\n\n// Utilities\n${fitToRange}\n\n// https://www.npmjs.com/package/seedrandom\nconst seedrandom = require('seedrandom')\n${seededRandomFloat}\n`;\n\n return md`\n\n\\`\\`\\`js\n${s}\n\\`\\`\\`\n\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":778,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":774,"value":"You can further refine this logic to tweak the exact color output you want.\n\nFor example, you could write a custom `getHue` to rule out certain hue ranges that you don't want to see, use separate configs for background and text colors or light and dark modes, or extend the logic to create gradients etc.","pinned":false,"hidden":false,"mode":"md"},{"id":187,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":482,"value":"## Source","pinned":false,"hidden":false,"mode":"md"},{"id":369,"value":"function generateHsla(seed) {\n return [generateHue(seed), generateSaturation(seed), generateLightness(seed), generateAlpha(seed)];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":800,"value":"generateHsla(\"foo\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":543,"value":"function hslaToCss(h, s, l, a) {\n return `hsl(${h} ${s * 100}% ${l * 100}% / ${a})`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"hslaToCss(...generateHsla(\"foo\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":345,"value":"function generateHue(seed) {\n return fitToRange(seededRandomFloat(\"h:\" + seed), conf.minHue, conf.maxHue);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":792,"value":"generateHue(\"foo\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":347,"value":"function generateSaturation(seed) {\n return fitToRange(seededRandomFloat(\"s:\" + seed), conf.minSaturation, conf.maxSaturation);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"function generateLightness(seed) {\n return fitToRange(seededRandomFloat(\"l:\" + seed), conf.minLightness, conf.maxLightness);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"function generateAlpha(seed) {\n return fitToRange(seededRandomFloat(\"a:\" + seed), conf.minAlpha, conf.maxAlpha);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"function fitToRange(floatValue, min, max) {\n return (max - min) * floatValue + min;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":851,"value":"fitToRange(0.25, 0, 1000)","pinned":true,"hidden":false,"mode":"ojs"},{"id":790,"value":"fitToRange(0.5, 100, 200)","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":729,"value":"seedrandom = require('https://unpkg.com/seedrandom@3.0.5/seedrandom.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":732,"value":"function seededRandomFloat(seed) {\n return seedrandom(`${baseSeed}: ${seed}`)();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"import {\n urlParams,\n urlStrings,\n urlNumbers,\n makeUrl\n} from \"@jerryjappinen/url-params\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":621,"value":"liveUrl = makeUrl({\n seeds: seedsInput,\n ...conf\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":661,"value":"hslToRgb = require(\"hsl-to-rgb@1.0.0/converter.js\").catch(\n () => window[\"hslToRgb\"]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"rgbToHex = (await import('https://unpkg.com/rgb-hex@4.1.0/index.js?module')).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":881,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":91,"value":"import { baseStyles } from \"@jerryjappinen/ui\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1091,"value":"import { icon } from \"@jerryjappinen/icons\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":883,"value":"baseStyles","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}