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

[Brian_Yip]

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?

[Rickard_Abraham]

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

[Kelsey_Chan]

Hi, @Brian_Yip!

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