⬇ Download Widget

❤ Say Thanks

If you have used/made a music widget before, you might have noticed that, depending on the cover artwork, the extracted vibrant (and muted) color can sometimes be the same as the extracted dominant color. This can produce undesired results, since the colors blend together and make the elements basically invisible.

The goal of this formula is to ensure that the accent color is always visible over the artwork.*

Accent Color Formula

$ ce(
     ce(   ce(  bp(dominant, mi(cover), #121212),  contrast),   contrast),
     bp(   if(  bp(vibrant, mi(cover)) = bp(dominant, mi(cover)),  muted,  vibrant),   mi(cover),   #333333),
     60 * (    bp(dominant, mi(cover), #121212) = bp(   if(  bp(vibrant, mi(cover)) = bp(dominant, mi(cover)),  muted,  vibrant),   mi(cover),   #333333)    )
    ) $

<aside> 💡 The vibrant color is prioritized. The muted color is used as the first fall-back. All colors have dark grey fall-backs built-in to ensure a visible skeleton when there is no bitmap to extract the colors from.

</aside>

<aside> ⚠️ This formula assumes that the cover art is never 100% black (or white). As long as there is 1 pixel different, this should work. Otherwise the accent color from this formula will be the same as the artwork’s dominant color.

</aside>

Formula Explanation

Here is the same formula, presented in a more visual way:

$ ce(
     
     ce(
        ce(
           bp( dominant, mi(cover), #121212 ),
           contrast
          ),
        contrast
       ),
     
     bp(
        if(
           bp(vibrant, mi(cover)) = bp(dominant, mi(cover)),
           muted,
           vibrant
          ),
        mi(cover),
        #333333
       ),
     
     60 * (
           bp( dominant, mi(cover), #121212 ) = bp(
                                                   if(
                                                      bp(vibrant, mi(cover)) = bp(dominant, mi(cover)),
                                                      muted,
                                                      vibrant
                                                     ),
                                                   mi(cover),
                                                   #333333
                                                  )
          )
    
    ) $

You can see how the formula is divided in three main parts and how some of those parts are the same:

$ ce(
     ce( ce( SURFACE, contrast), contrast),
     ACCENT,
     if( SURFACE = ACCENT , 60, 0)
    ) $

Essentially, what the formula does is tint the ACCENT with the WHITE/BLACK color (whichever is closer to SURFACE), if both SURFACE and ACCENT are the same.