tinker.ph

Generating random bright colors

On the index page of the site, you can see a chronologically sorted list of posts. When you hover this list, you’ll notice that the colors are randomized.

I originally tried to implement this using the Cicada Principle. However, I ran into two main issues: first, I had to hand-code all the colors I wanted, so the list was definitely finite, and second, it wasn’t really random - the pattern is definitely static. That effectively meant that the order of the colors was static, as if you passed a seed to the RNG.

I ended up deciding to use JS, since I figure I’ve been adding JS to random posts here anyway (ah the joys of Astro and markdown!). Between generating bright and dark colors, HSL is much easier to use. The code below lets you generate bright colors, which is exactly what I use for this site. To generate darker colors, simply change the range for the lightness!

And of course, for the demo: here’sa randomlist of linksto showcasemy point.

1
const generateBrightColor = (() => {
2
  "use strict";
3

4
  const nextInt = (min, max) => {
5
    return Math.floor(Math.random() * (max - min + 1)) + min;
6
  };
7

8
  return () => {
9
    const h = nextInt(0, 360);
10
    const s = nextInt(95, 100);
11
    const l = nextInt(70, 90); // don't go too far high
12
    return `hsl(${h},${s}%,${l}%)`;
13
  };
14
})();