Fluid Colors

How it works 🎨

You might notice that the color palettes generated by this tool looks a bit different from other color palette generators. This is because the colors are generated using a taylored algorithm that takes into account the luminosity and saturation of each color. Which is different than the traditional way of generating color palettes, such as adjusting color values by fixed steps.

Why?

I was looking for a tool that would generate color palettes for me and found this color wheel on adobe. It was great but I wanted to be able to save the entire UI as a png file so I could use it as a color template for my UI designs. I also wanted to be able to copy individual colors to clipboard.

But I wanted to do it even better. So I set back and studied hard on how 'color' reacts with different elements on the web, and how the 'hue' plays a role in terms of the hierarchy in relation to the luminosity and saturation. As a result, I have converted what seems like 'artistic' choices into robost math that can represent the 'true' color value steps.

How it works?

It starts by manually picking main colors in different hues, for example: Red, Orange, Yellow, Lime Green, Green, Teal, Cyan, Light Blue, Blue, Indigo, Purple, Magenta, and Pink. The good news is I am not the judge of what each color looks the best, instead, I converted all TailwindCSS color palettes (HSL) and input their saturation and luminosity values into two seperate charts.

**Luminosity vs Hue**
We see that most colors have a linear progression in terms of luminosity, but yellow rises up in the 300-600 range, this is becuase that yellow is the brightest color in the spectrum. And it needs more lightness to be visible combined with saturation in those ranges.
Colors ranges from cyan to red (180-360) tend to have a higher luminosity than colors in the range of green to blue (0-180). This is because the human eye is more sensitive to yellow-green, which makes sense to increase the lightness of the other colors to match the 'feel'.

Next, let's analyze the saturation vs hue chart.

As a result, we can then calculate color values using quatric equations, eg. color orange, where `x` is the given hue that is in range of orange hue 22.

y = 0.002x^6 - 0.0695x^5 + 0.8757x^4 - 4.9266x^3 + 12.94x^2 - 17.593x + 91.633

But it doesn't stop there, because these formulas are might not represent the values of the given hue exactly, we need to make a function that determines the closest two colors that we manually set.

Say the user chose a color of hue 18, we can extract the hue from the color: 18. And in our manual color sets, 18 lies between red (15) and orange (31). So we can use the formula to calculate the ratio between red and orage:

ratio = (18 - 15) / (31 - 15) = 0.3

Then we can use the ratio to calculate the luminosity and saturation of the color using formulas for steps between 50 - 900 (where x is the step count):

saturation_red_step_1 = 0.0076x^6 - 0.2422x^5 + 2.9831x^4 - 17.638x^3 + 52.063x^2 - 77.927x + 132.83 = 92.0765 
saturation_orange_step_1 = 0.002x^6 - 0.0695x^5 + 0.8757x^4 - 4.9266x^3 + 12.94x^2 - 17.593x + 91.633 = 82.8616

Then we can calculate the saturation of the color using the ratio:

saturation = saturation_red_step_1 * ratio + saturation_orange_step_1 * (1 - ratio) = 92.0765 * 0.3 + 82.8616 * 0.7 = 88.201

Same concept applies to luminosity. Lastly, based on user's input of the saturation and luminosity, we can convert them as a factor and multiply them with the calculated saturation and luminosity to get the final color steps. For example, if a user chose a color hue 18 with 40% saturation, we can then calculate the computed saturation for value step 50 as:

saturation = 40 * 88.201 / 100 = 35.2804

How to contribute?

You can contribute to this project by reporting bugs, suggesting improvements or by forking the repo and sending a pull request.

License

This project is licensed under the MIT License