If you have a maximum number of colors, I'd choose an appropriate color palette without any run-time scaling. E.g. D3 has "Category20" palette. You can probably find similar palettes that are large enough.

Ah, of course there's a relevant SE question: https://graphicdesign.stackexchange.com/questions/3682/where-can-i-find-a-large-palette-set-of-contrasting-colors-for-coloring-many-d

I don’t have a theoretical maximum, though, that’s the issue.

Thanks for the SE link, I’ll read it now 🙂

Ah. The problem with categories with no maximum is that at higher numbers the colors will invariably start to blend in. The problem becomes much worse if your product will be used by color-blind people. A solution that I used in one of the projects is to use a fixed palette of decent size suitable for color-blind people, and categories that wouldn't fit in there were represented with fill patterns. E.g. if the palette is of size 10 and the 1st color is red, then the 11th "color" would be red with black vertical stripes, 21st - horizontal, 31st - diagonal from top left to bottom right, 41st - from top right to bottom left, 51st - vertical and horizontal, and so on.

So the total size becomes 32 * color palette size, which was more than enough for my needs in that project.

It’s for drawing thin lines, though :man-shrugging:

I guess I’m gonna go with a fixed palette for now

Not sure how I can deal with all cases of colour blindness without completely sacrificing legibility

maybe dots and stripes will work, though!

gonna try that for now!

Thanks!

I think I'm gonna combine my 6 theme colours with a really long list of colours and filter away colours resembling the original theme using the colour distance function in thing/color.

So technically a fixed size, but in practice it won't be an issue.

There are some goodies in goog.color https://google.github.io/closure-library/api/goog.color.html I’ve had success generating palettes with those functions + some simple heuristics

(I’m not an expert on this field though, but got the job done)

Oh nice, another one!

I got my implementation working using http://thi.ng/color in the meantime

http://thi.ng/color looks quite nice and complete. 🙂 goog.color makes sense if you wish to avoid an extra dep

oh yeah, I see that there is a distance function too now!

Also, just in case - there's this thing: https://www.npmjs.com/package/color-hash Doesn't guarantee absence of clashing or close colors but can provide stable colors for the same categories regardless of their order.