Quick Color Themes

6/11/2023

I'm not very good at color palettes. I typically reach for one from a site like Coolors.

A tip I got from the work of Shunsuke Takawo is that each palette on Coolors has a url, eg https://coolors.co/palette/ee6055-60d394-aaf683-ffd97d-ff9b85.

Notice how the end of the url is actually the list of colors? This function will pluck those colors from the url, and pass you back an array with them in it.

const getColors = (url) => {
  return url
          .match(/[a-f0-9]{6}?/gm)
          .map(c => "#"+c);
}

Meaning you could now do something like this to get a color palette.

const url = "https://coolors.co/palette/ee6055-60d394-aaf683-ffd97d-ff9b85";
const colors = getColors(url);

If you now use that array to edit or create your designs, you can paste in different urls to try different palettes, instead of having to copy and paste every value over! Try it out in this CodePen, I've added a few urls that you can comment and uncomment to see how it makes a difference.

One thing to not is that different palettes have a different amount of colors, you might need to account for that in your designs!