Use Prominent Image Colours for Components to Generate Unique Colour Palettes in Vue

Photo by Ilnur Kalimullin on Unsplash

Yes - I know, I know. Designers put a lot of thought into colour palettes. This is a disclaimer that I’m not suggesting that this approach should be applied recklessly as there is always a chance that prominent colours in an image may be aesthetically off. However, I thought it would be fun to be able to generate colours to compliment the primary image.

I think this would be particularly nice on minimalistic product pages or photo galleries.

Snippets in this article are images, so can’t be copied — I’ve provided a Github repo here for the image below.

The same card component with a different colour palette depending on the picture

Install package

We’re going to use the npm package node-vibrant, which picks out a varied palette from images. Due to a Github issue that is open at the time of writing, I had to use an older version of the package, like so:

yarn add node-vibrant@3.1.6

Use Vibrant getPalette function

In the component that you’d like to have a dynamic palette in, import the module and write the function that generates the palette:

Function that will log generate and log the colour palette

Run on image load

We want to run this code when the image has loaded. This is how we trigger the event from the image tag:

Image tag that calls getNewPalette on load

Store result

I’m going to store the palette in the component data by using the Vue $set functionality, with my code now looking like this:

Updated Vue script where we store the palette information in data

This is the structure of the output that we are saving in the component data:

This is where we get to personal preference. For my example I would just like to retrieve 3 colours from the palette:

• one dark colour
• one light colour
• a brighter accent colour

There are many ways that we can retrieve these, but I’m going to use a computed value for each

As you can see, I’ve provided a fallback in case the palette not be generated.

Inline styling

Inline styling would be my preferred method of applying these colours. Here is an example of how you can do that:

Thank you!

Thank you for taking the time to read! Please check out the Github repo here and have fun. I’ll be interested to see what you create with this method!