2f:T4e9,## Color space Now I need a function that takes a number as input and returns a color. The primary objective of this function is to maximize the probability of generating colors that are perceptually distinct. I intend to conduct experiments using both the HSL and LCH color formats to evaluate their effectiveness in achieving this goal. The LCH color format offers advantages in terms of perceptual uniformity and the separation of lightness and chroma, which can contribute to more distinguishable colors. Additionally, LCH is designed to approximate human vision and provides a more consistent color model compared to HSL. It aligns well with the principles of color perception, making it suitable for applications where accurate and distinguishable colors are crucial. HSL's primary strength lies in its hue-based color selection. It allows users to specify colors based on the angle around the color wheel, making it convenient for selecting specific hues. Viceversa, LCH provides a more consistent and predictable color model compared to HSL. In HSL, changing the hue can sometimes affect the perceived lightness or saturation of a color, leading to unexpected results. LCH minimizes these issues by decoupling lightness and chroma from the hue. 30:[] 2d:{"title":"Generate a color based on a string","cells":[{"id":0,"value":"# Generate a color based on a string\n\nIn this notebook, my objective is to explore techniques for obtaining a color from a string, specifically an English word. The primary focus is on minimizing the likelihood of selecting two similar colors when randomly choosing words. Additionally, it is essential that the function used to retrieve the color from the string remains deterministic.","pinned":false,"hidden":false,"mode":"md"},{"id":488,"value":"## Transformation function\n\nI am looking for a function the takes in input a string, say an English word, and returns a number. \n\nTo minimize the probability of finding two similar colors when mapping English words to colors, while maintaining determinism, we can use a cryptographic hash function. A cryptographic hash function takes an input (in this case, the English word) and produces a fixed-size output that appears random and unrelated to the input.\n\nThe first function converts the word into a unique numeric hash using a simple hashing algorithm. This ensures that each word consistently generates a distinct hash value. A cryptographic hash function ensures that each English word will always produce the same color, guaranteeing determinism. Additionally, the hash function introduces enough randomness to minimize the chances of two similar words mapping to similar colors.","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"stringToNumber1 = (s) =>\n [...s].reduce((acc, char) => {\n return Math.sin(char.charCodeAt(0) + acc) * 36000;\n }, 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"Plot.plot({\n y: { grid: true },\n marks: [Plot.rectY(samples1, Plot.binX({ y: \"count\" })), Plot.ruleY([0])]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"samples1 = words.map((d) => stringToNumber1(d) / 36000)","pinned":true,"hidden":false,"mode":"ojs"},{"id":510,"value":"The second function utilizes the SHA256 algorithm, which provides a more uniform distribution compared to the simpler hashing algorithm used previously. The distribution resulting from the SHA256 algorithm is better because it significantly reduces the likelihood of hash collisions, which occur when two different inputs produce the same hash output. This ensures a more uniform distribution of color values across the entire range, maximizing the probability of obtaining distinct colors for different input words.","pinned":false,"hidden":false,"mode":"md"},{"id":117,"value":"stringToNumberTest = (s) => cryptojs.SHA256(s).words[0] / 2 ** 32 + 0.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"Plot.plot({\n y: { grid: true },\n marks: [Plot.rectY(samplesTest, Plot.binX({ y: \"count\" })), Plot.ruleY([0])]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"samplesTest = words.map(stringToNumberTest)","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"----","pinned":false,"hidden":false,"mode":"md"},{"id":255,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":251,"value":"{\n const N = 360;\n const w = width / N;\n return html`\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"{\n const N = 360;\n const w = width / N;\n return html`\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"The sequence of colors displayed above demonstrates the HSL and LCH variations with different hues, while keeping SL (Saturation and Lightness) and LC (Lightness and Chroma) fixed. In terms of achieving my intended outcome, HSL appears to be more effective. However, there is still a relatively high probability of selecting two random colors that are perceptually similar. Particularly, there are certain intervals (such as around green, blue, and red) that appear to have consistent colors to my perception.","pinned":false,"hidden":false,"mode":"md"},{"id":427,"value":"a = 50","pinned":true,"hidden":false,"mode":"ojs"},{"id":430,"value":"aa = [15, 25, 35, 45, 55, 65, 75, 85]","pinned":true,"hidden":false,"mode":"ojs"},{"id":459,"value":"### HSL vs LCH: Lightness variation\n\nIn the upcoming example, I will be adjusting the lightness and saturation (or chroma in the case of LCH) to expand the available color space. By doing so, I aim to increase the range of colors and create a more diverse palette.","pinned":false,"hidden":false,"mode":"md"},{"id":393,"value":"#### HSL\n\n* Hue: `0, ..., 360`\n* Saturation: `${a}`\n* Lightness: `${aa.toString()}`","pinned":false,"hidden":false,"mode":"md"},{"id":396,"value":"HSLGrid({ l: aa, s: a })","pinned":true,"hidden":false,"mode":"ojs"},{"id":368,"value":"#### LCH\n\n* Lightness: `${aa.toString()}`\n* Chroma: `${a}`\n* Hue: `0, ..., 360`","pinned":false,"hidden":false,"mode":"md"},{"id":223,"value":"LCHGrid({ l: aa, c: a })","pinned":true,"hidden":false,"mode":"ojs"},{"id":468,"value":"### HSL vs LCH: Saturation/Chroma variation","pinned":false,"hidden":false,"mode":"md"},{"id":330,"value":"#### HSL\n\n* Hue: `0, ..., 360`\n* Saturation: `${aa.toString()}`\n* Lightness: `${a}`","pinned":false,"hidden":false,"mode":"md"},{"id":316,"value":"HSLGrid({ s: aa, l: a })","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"#### LCH\n\n* Lightness: `${a}`\n* Chroma: `${aa.toString()}`\n* Hue: 0, ..., 360","pinned":false,"hidden":false,"mode":"md"},{"id":377,"value":"LCHGrid({ c: aa, l: a })","pinned":true,"hidden":false,"mode":"ojs"},{"id":519,"value":"-------\n\n## Conclusions\n\nAmong the color palettes shown above, I find the LCH palette with varying lightness to be the most preferable. In comparison to the HSL palette, LCH provides a better capability to accurately evaluate color differences and similarities.\n\nIt's important to note that while this approach reduces the probability of similar colors for similar words, it doesn't guarantee complete avoidance of similarity. The color selection is ultimately dependent on the properties of the hash function and the chosen color space.\n\n#### References\n\n* https://www.joshwcomeau.com/css/color-formats/\n* https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/\n* https://en.wikipedia.org/wiki/SHA-2","pinned":false,"hidden":false,"mode":"md"},{"id":360,"value":"----","pinned":false,"hidden":false,"mode":"md"},{"id":362,"value":"**Utils**","pinned":false,"hidden":false,"mode":"md"},{"id":382,"value":"HSLGrid = (ls) => {\n const height = 300;\n const HUE = [...Array(360).keys()];\n const LIGHTNESS = ls.l;\n const SATURATION = ls.s;\n const isLightness = typeof LIGHTNESS === \"object\";\n const AA = isLightness ? LIGHTNESS : SATURATION;\n const h = height / AA.length;\n const w = width / HUE.length;\n\n return html`\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"LCHGrid = (lc) => {\n const height = 300;\n const HUE = [...Array(360).keys()];\n const LIGHTNESS = lc.l;\n const CHROMA = lc.c;\n const isLightness = typeof LIGHTNESS === \"object\";\n const AA = isLightness ? LIGHTNESS : CHROMA;\n const h = height / AA.length;\n const w = width / HUE.length;\n\n return html`\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"-----","pinned":false,"hidden":false,"mode":"md"},{"id":110,"value":"**Imports**","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"words = require(\"https://bundle.run/an-array-of-english-words@2.0.0\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"randomString = require(\"random-string-generator@1.0.1/dist/random.umd.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"cryptojs = require(\"https://bundle.run/crypto-js@4.1.1\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}