Show color names when hovering over color formatting (helps color-blindness)

Suggestion Box
2

This was a fun challenge, I got a little working temporary solution for you

  • Get this chrome plugin (or any other css injector)
  • Refresh coda website
  • Click on the plugin in top-right corner (puzzle piece)
  • Copy paste the css below
  • Enable it by clicking Off at the top (Make it On)
span[aria-label]:hover:after {
    position: fixed;
    z-index: 1;
    margin-top: 3em;
    margin-left: 3em;
    padding: 1em;
    display: block;
    content: attr(aria-label);
    color: #fff;
    background: #000;
    opacity: 0.8;
    pointer-events: none;
}

image

image

I found that the colors have an aria-label attribute already defined. No idea when they are actually used but here we are! All we’re doing is creating a text element when they are hovered

It’s a bit wonky if you scroll down on a sub-element, it also doesn’t seem to care about dark-mode, otherwise I think it works decently! Has a fun side-effect of giving other random toolbars too. Feel free to play around with the values in the css

3 Likes