2

So I generated random colors and blended them together using chroma.js.

enter image description here

It looks decent because the blending in chroma.js is amazing. However, notice there are two or 3 green spots (or more) in the image, and a few purple spots, etc. To make this look nicer, I was thinking it would be good to sort the colors before blending them, so they are more like the rainbow. Wondering if there is any way to do this or if it's possible somehow, I can't really imagine how to do this.

As far as I thought is this. For each color, calculate it's distance to one of the 6 rainbow colors. The closest to red goes first, then the closest to orange, etc. But I don't really see how to do that, seems complicated.

Lance Pollard
  • 66,757
  • 77
  • 237
  • 416
  • 2
    Convert RGB to HSV/HSL ([this post](https://stackoverflow.com/questions/39118528/rgb-to-hsl-conversion), [this post](https://stackoverflow.com/questions/3018313/algorithm-to-convert-rgb-to-hsv-and-hsv-to-rgb-in-range-0-255-for-both) or any other RGB to HSV/HSL), or just extract Hue, then sort by Hue. – Amadan Jun 12 '19 at 03:34
  • That's it! You solved it yay thank you :) – Lance Pollard Jun 12 '19 at 03:40

1 Answers1

5

Sorting by hue will give you the colors "like the rainbow". However, notice that while the rainbow colors are fully saturated ones, your set of colors vary in saturation and luminance too. Therefore ordering by hue may not produce the best looking result.

The problem of creating the smoothest palette out of the given set of colors is equivalent to the Traveling Salesman Problem. Of course a precise solution of that is not necessary, and any fast approximation might do.

Yakov Galka
  • 61,035
  • 13
  • 128
  • 192