DEV Community


Posted on • Updated on

A slightly different way to the color palette

I wonder how many hours I have spent on Unsplash or similar sites, looking for images for projects, wallpapers or just to get an overview. But sometimes just for pleasure, the urge to see beautiful, harmonious images. The focus here is rarely on the motive. I am especially enthusiastic about unusual perspectives or messages. The other main factor are contrasts, as they (almost) only occur in nature and can only be captured by very well photographers.

Unsplash Screenshot

Unfortunately I am not such a good photographer, in fact I am not a photographer at all. But that does not mean that I do not recognize and want to use this beauty.
During my work as a frontend developer I try to create color palettes regularly. If you have ever tried to find two or three of the 16,777,216 colors that fit well together, convey the desired message and have the appropriate contrast, you know that this is not an easy task.
So why not use the harmonic compositions of these images and generate color palettes from them? Since I understand very little about the harmony of colors and do not know how they interact in the pictures. I first researched whether there are already projects that can do this. Here, I am referring to this great library Vibrant.js.

Vibrant.js is a javascript port of the awesome Palette class in the Android support library.

In order to use this knowledge as efficiently as possible in everyday life I have written a website where you can copy/pull/upload any image you want. Afterwards the image is analyzed by Vibrant.js and a corresponding color palette is displayed.
Maybe this site can help you find inspiration or even an (almost) finished color concept. Just give it a try

Comment if you are interested in a way to copy to CSS variables or JSON objects.

Unsplash Screenshot

Top comments (0)