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

Hello! I’m partially color-blind but would still love to format my tables with color - being able to label “Finance” as green, etc.

Is it possible to add the name of the colors when hovering over these circles?

Screenshot 2023-03-29 at 11.41.13 PM

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;



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


Hi, @Brian_Yip!

We recently added tooltips to our color pickers to show the color names on hover. We hope this helps!


This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.