3

Some details:

I'm making a small prototype in Framer, some kind a wallpaper app. I use vibrant.js to automatically pick colors from the images to add a bit of a tint to my interface. I use two vibrant color profiles: "DarkMuted" - for the backgrounds and "Vibrant" - for active controls / accents etc.

Unfortunately, color combintation looks dull and desaturated sometimes, active elements don't stand out as much as I want it. So my first decision was to

Blindly edit colors.

I convert them to hsl and explicitly set s and l values.

s: .2, l: .2  #  DarkMuted

s: .6, l: .8  #  Vibrant

This creates enough contrast between the two, but also has a drawback: sometimes colors look a bit oversaturated and distorted (compared to the input).

By this link you can find pairs of screenshots to show you the difference between "original" color pair returned by "vibrant.js" and colors with adjusted s and l values.

I've already asked on another forum if it's possible to apply automated adjustments to the color, to normalize percieved bias for some color ranges. The answer was "almost impossible".

I would say that subjectively acceptable color rate is ~ 65% but the result is too unpredictable. Since it's an automatic solution I can't rely on that too much.

So I decided to approach it another way:

Generate a bunch of colors and filter one

The problem here is:

I've not found how to generate more than one color per profile with vibrant.js

Also, I've tried the color-thief.js library to generate a palette of dominant colors and then filter, what I call, a "vibrant" color.

# Threshold values I used 
thr = {minL: .4, maxL: .8, minS: .6, maxS: .8}

But here the another problem occurs - not every image has a set of colors that fall under my threshold. Some images have a pastel gamma or b/w and don't return anything.

So,

  • Can I overcome the vibrant.js limitation of 1 color per profile to have a bunch of "Vibrant" colors and then pick one that suits my requirements?

  • Or, maybe, there is another / better solution of doing it?

Marco
  • 2,007
  • 17
  • 28
Anton Kosarchyn
  • 31
  • 4

1 Answers1

1

There is a specification about minimum contrast between colors (WCAG) you can find it here. So a possible strategie would be extracting the colors with vibrant.js and after that you could check contrast with a function. You can find a guide to build a function to check color constrast here. The last step probably would be generate colors variations with good contrast based on the results from the color contrast function. You can generate variations using this lib.

Fábio Alencar
  • 11
  • 1
  • 3