Just had this idea of calculate a constant color value for a given piece of text
My first thought was to take the text and remove all non-hexadecimal values from it, meaning "Information Classification" would be #FACAFA. Neat! "Bananas" would end up being #BAAA. Not exactly a banana-looking color, but it's a color.
I played around with it a little bit when I got another idea. What if I just take extract the numerical unicode value from each character and build up an RGB color from that?
let r = 1, g = 1, b = 1; Array .from(text) .map(c => c.charCodeAt()) .forEach((v, i) => { if (i % 3 === 0) b += v; else if (i % 2 === 0) g += v; else r += v; });
The only issue I was having then, was that the resulting number would exceed 255 which is a non-OK color value. To solve the issue, I decided to normalize the value to somewhere between 150 and 255 to get bright-looking colors that would look nice behind black text.
while (value > 255) value /= 1.5; while (value < 150) value *= 1.5; const fill = Math.floor(value).toString(16);
Inspired by the look-and-feel of Visual Studio 2022, I then felt the urge to decorate the border of each text-entry with a slightly darker version of its background color:
const border = Math.floor(value * .9).toString(16);
(Of course, double-checking now, when writing this blog-post, I realize that I had my memory skewed - VS2022 actually has a brighter border!)
Once I had everything up and running, I figured - to convince myself that I haven't just been playing around, but actually produced something this week-end (don't worry - I spent time outside and with my family too ... as I matter of fact, I saw Shang-Chi with my daughter!) - I might as well publish the code on GitHub and write about it on my blog!
Comments