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

Popular posts from this blog

Auto Mapper and Record Types - will they blend?

Unit testing your Azure functions - part 2: Queues and Blobs

Testing WCF services with user credentials and binary endpoints