stephen koch
software engineer
Gradients!
https://gradients.koch.dev
I was curious to know if there was an easy way to find x number of colors between 2 colors and I'm sure it's no surprise that there are a few npm packages that fit that bill.
I'd settled on gradient-color and also looked at javascript-color-gradient however ran into issues using TypeScript. In searching just now, I see tinygradient which now that I see it has TypeScript support I will switch over to see how that is!
At any rate, using gradient-color was easy enough and it was serving the purpose, there was a lot of color explorations which led me to using the URL for color values. Use a number of stops and 2 valid hex values (without the #) to view a 'type' using those values.
![gradient-circle](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fwv9vt0uo%2Fproduction%2F05a6c463203d22c15f6a86428a53422cdc8c0e73-880x879.png%3Ffit%3Dmax%26auto%3Dformat&w=1920&q=75)
![gradient-vertical](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fwv9vt0uo%2Fproduction%2Faeda6bc0e8dc5a7126823b6968a8103de12ea893-800x800.jpg%3Ffit%3Dmax%26auto%3Dformat&w=1920&q=75)
![gradient-horizontal](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fwv9vt0uo%2Fproduction%2Ff5bc2332191cf7a99bd690ff0e0ba3ef06dc3146-800x800.jpg%3Ffit%3Dmax%26auto%3Dformat&w=1920&q=75)
![gradient-grid](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fwv9vt0uo%2Fproduction%2F0ec6086d54b08f4261bb4d9f739b9bf9c36b6b4a-800x800.jpg%3Ffit%3Dmax%26auto%3Dformat&w=1920&q=75)