Colored tags with Javascript
Tagged topics are a common feature in blogs. Simple text label works just fine — but I wanted to spice things up a little bit. With colors of course!
Let’s give each tag its distinct color. And because we are developers, let’s do it in code!
Every time your user has to read something, it’s a tiny amount of friction. UX designers know this — they have been bypassing text labels with icons for years. My idea was, that if someone is looking for a MacOS article I wrote, they don’t have to actually read the tags. Just scroll around looking for a bright red blob, which is way easier!
Turn text into a number
We draw inspiration from a technique that is known as hashing.
Hashing is the process of transforming any given key or a string of characters into another value.
In our case, the input is a string and the output is should be a number. You can grab an existing implementation of a hash function. But you can also write your own for more control. The one I use looks like this:
function hash(text: string): number {
if (!text) return 0
let state = 13 // prime
for (let index = 0; index < text.length; index++) {
const charCode: number = text.charCodeAt(index);
state += state * charCode;
// Prevent overflow by %
state %= (charCode * 3109) // prime
}
return state;
}The goal of this process is to get a random-looking number for our text input. You can then use that value for creating the color with hsv or rgb function. Or as an index for picking a color from a color array!
Not all hash functions are created equal
This shouldn’t be surprising, but some approaches may just be better for color picks than others.
For example, a very popular JS implementation of the Java hash function doesn’t work very well for picking from a small array of colors. There are clearly visible patterns — bright columns and rows of similar colors — which is not great.
My own hash function (mentioned above) seems to provide a greater variety of colors. This shows that creating your own implementation might be worth it! You can fiddle with it and tweak it to your liking :)
Hand-picked vs. Generated colors
We are at a crossroads here. You either go full procedural and generate your colors too — or you just pick from a select color set.
Coming up with nice-looking colors is no easy task. What looks good to the eye is not easily described by an equation. People are coming up with new palettes daily, and large CSS libraries also craft their colors by hand!
We picked all of Tailwind’s default colors by hand, meticulously balancing them by eye and testing them in real designs to make sure we were happy with them.
There ARE ways to generate colors
You just have to be smart about it. Bend the color space to your will and narrow the actual color selection down. Choosing literally any color doesn’t work; a large portion of all possible colors are close to black. We’re not interested in any of that mud-colored garbage.
What you really want are bright, vibrant colors. You can select bright colors by using the HSV color model. Limit the saturation and value to high numbers and just manipulate the hue element.
Here we bump into another problem. Most of the color space is blue or green! That means your procedural colors will be mostly that — blueish and greenish. Your chances of getting a nice yellow or orange are not great 🥲
Solution? Go for the palette approach
That would be my advice. Compromise sometimes really is the best option. You control your colors and can ensure that there is the same number of yellows as there are blues!
I hear you: “Not wanting to hand-pick colors was what got us here in the first place…”, and you are right. We will use a pre-made palette, of course. Just look around, pick a CSS framework with a nice color scheme and steal it!!
I myself stole my colors from Tailwind — all the bright variants from 400 to about 700 darkness. They are stored safely in an array and I just grab one whenever I need to!
Creating the actual tag
Once you have your color picked, you are on the home straight. Just set it as your tag’s background-color in CSS or inline style.
If you are going for white text (like me) I also recommend giving your tag text a little shadow. It makes it more readable and it stands out on bright colors better! My entire tag setup then looks like this:
function tagColor(text) {
return palette[hash(text) % palette.length];
}
// ...
<span
style={{ background: tagColor(text), textShadow: "1px 1px 0px black" }}
>
{text}
</span>Now when you add a tag to your newest article — it colors itself nicely!
If you learned something in this article, a clap 👏 or a follow would be very appreciated! Thanks for reading! ❤️
Originally published at https://www.vojtechstruhar.com.
