cferdinandi, 11 months ago

@mariusor I've used Adobe Color in the past for this. Free! https://color.adobe.com/create/image

mariusor, 11 months ago

@cferdinandi thank you. However I need to do this programmatically based on images that come as input from users. :D

whereisk, 11 months ago

@mariusor Have you seen this: https://dev.to/producthackers/creating-a-color-palette-with-javascript-44ip - has some nice extra resources at the end that might assist. Also, maybe take a look at this: https://mokole.com/palette.html

MerriNet, 11 months ago

@mariusor I don't know, it is kind of a hard thing since there is so much artistic possibilities when it comes to colors, but one thing you could try is to use pngquant (or PNGoo on Windows) and make it reduce the number of colors to 5 or 6.

However the end result will need corrections because you should also consider usability of those colors: contrasts of text vs background, colorblindness, picking the "meanings" of colors such as keeping link color the same across the site etc.

mariusor, 11 months ago

@MerriNet ty, what you're describing is basically use at the moment:

I average the image color for a background color.

Then I palettize the image for top 20 colors and:

• get the accent color as the most vibrant (high-saturation, med-luminance) but with a decent contrast (2-6)
• get fg color as most readable (max contrast)
• get link color as most vibrant with good contrast
• try to get closest colors to link color for visited/active link colors.
  (every step removes the color from the list)

mariusor, 11 months ago (edited 11 months ago)

For anyone wanting to see the results, one of the pages that uses this is at https://releases.bruta.link/

(This example is probably limited since the pentagram has a reduced colour palette.)