Recently I was showing some data in a table, and I needed to apply colors to columns. I was working with a predefined palette of hex codes that worked well for visualising data, but when text was in front of the colors it became unclear.

At the beginning, my table looked a bit like this:

Argh! That text is barely readable, I need a way to display the same colors, but with a fixed amount of transparency when used as a background...

The Code

My color palette was defined roughly like this:

const Colors = {
    red: "#A82A2A",
    blue: "#0E5A8A",
    ...
}

One (easy) way of getting transparent colours from hex codes would be to map all of the color palette to SASS variables. Then I could make a load of class definitions like:

$red: "#A82A2A";
...
.red { background-color: rgba($red, 0.15); }

This works because rgba in SASS can accept a hex code as an argument!

That would be neat, but it would mean I'd end up bloating my code with duplicates to map class names to my palette, and duplicate the palette and variable definitions in SASS files...

The Solution

What I really wanted was just an easy way to take my (javascript) colour palette and calculate the right rgba value from it.

Which led me to writing this simple conversion utility:

const hexToRGBA = (hex: string, alpha = 0.15) => {
    const match = hex.match(
        /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i
    );

    if (match.length < 1) {
        throw new Error(`Not a valid hex code: ${hex}`);
    }

    const red = parseInt(match[1], 16)
    const green = parseInt(match[2], 16)
    const blue = parseInt(match[3], 16)

    return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
}

After mapping that function over my palette and using that to set the background on my columns, the table looks a lot better

Yay.