Reintroduce color names

[racingjulius]

Describe the bug

After the color pick, Eye Dropper included the color name (e.g."darkorange"); but now, this resource isn't present

Expected Behavior

The color name

Steps To Reproduce

No response

Screenshots

Operating system

Windows

Browser version

chrome

Anything else?

No response

[kepi]

Thanks for the report.

This isn't exactly bug, as current behavior was intentionally introduced in latest version. Citing Changelog:

Color boxes for new and current color in popup now display short hex code and color name if there is an exact match #136, #192.

You can check, that color name will display if there is exact match to web colors. Try picking ie. white/black color. Previous behavior was problematic for web developers, as named color we displayed had different hex than one they picked.

But don't worry, I'm aware of multiple use cases for people, who need only approximate colors and I'm working on re-introducing this through options in future releases.

It will be great if you can describe what your use case is? What are you using name of colors for?

[ElectricWarr]

Not OP but I'm somewhat colour blind and for me the "approximate" colour names was extremely useful!

Aware this is a fairly niche use-case, but it was surprisingly difficult to find an extension with that feature - might I suggest a toggle in settings to use the old implementation, and perhaps later an indicator to make it clear the name is an "approximate match"?

[kepi]

This is currently on top of my TODO list as I originally didn't realize the impact. Unfortunately it isn't easy to just put it back, as I get completely rid of original color library.

On the bright side, I hope that new implementation will help you to really know what the closest color is. Original implementation was not only "inexact" but returning wrong impression - i.e. brown for color which was without doubt more close to red.

Anyway what really interests me is better understanding of your needs. What is in my mind now:

1. you only want to know basic colors like red, green, blue, yellow, ...
2. you want to know fancy color name like "Azure Radiance", "Pacific Blue", etc.
3. both
4. something else :)

Thanks

[ElectricWarr]

Wow! For me the closest primary/secondary colour would be enough, but I don't think that would support the rest of your users the best.

Knowing the true closest "fancy colour name" (is there a formal name for those? "Web Colours" seems like a subset) sounds like it would be a really useful feature in general, and I could work with that 👍

[svenglansberg]

Presenting CSS named colors for web developers

✅ Enforcing a correct behavior for the legacy use of named colors in Eye Dropper was a good call for issues #136 and #192.

As of today, that very behavior seems to be enforced by the dependency on @ctrl/tinycolor, which has its own list of named colors that aligns with CSS named colors.

However, this presentation is only useful when it comes to not messing up colors while authoring CSS using named colors. The case when background-color: peachpuff; must mean exactly the same as background-color: #ffdab9;.

The note on named colors in W3C's CSS Color Module 4 says it all:

these color names are standardized here, not because they are good, but because their use and implementation has been widespread for decades and the standard needs to reflect reality. Indeed, it is often hard to imagine what each name will look like (hence the list below); the names are not evenly distributed throughout the sRGB color volume, the names are not even internally consistent [...] Thus, their use is not encouraged.
— CSS Color Module Level 4, W3C Candidate Recommendation Draft, 13 February 2024

Accessibility for people with color vision deficiency

As stated by @ElectricWarr:

I'm somewhat colour blind and for me the "approximate" colour names was extremely useful!

I have also relied on Eye Dropper to show me the color name, both in a professional UI design setting and in everyday life. I initially chose Eye Dropper for this very reason, as I am well beyond just being somewhat color blind.

Suggested feature

💡 To cover my needs, the color names from map of color boundaries from the XKCD Color Survey would be right on target.

Red, dark red, maroon, magenta, pink. Orange, gold, mustard, yellow. Lime green, light green, green, olive, dark green. Cyan, sky blue, light blue, teal, blue, dark teal, dark blue, navy blue. Purple, dark purple. Brown, dark brown, black.

Those boundaries are published as RGB values. They are defined on the three fully-saturated faces of the RGB cube. So, some kind of projection has do be done to map the brighter and more desaturated RGB values to a color name.

This feature could qualify as a customizable behavior in Eye Dropper, since it's an accessibility feature that might be hard to grasp for people with normal color vision.

Comment on true closest "fancy colour name"

Whether true closest "fancy colour name" would refer to "CSS named colors" or any superior modern naming scheme, it would not be helpful to know if people with normal color vision had settled on "cement" or "spruce" as the best name to describe a color.

Let’s say they had settled on the name "apple juice" to describe a color. Ask anyone with a red-green color vision deficiency, and they'll likely categorize that hue as green. I was well into my 30s before I learned that apple juice is actually brown, brown like beer, despite all the green graphics on the juice cartons.

See how referencing a natural object or a cultural reference will fail miserably when trying to convey color to someone who is color blind. Those anchors don't really lead anywhere, and if they do, it's to a gray mush of uncertainty.

The XKCD color boundary naming scheme targets a very suitable subset of color names. I can only accuse gold, mustard and olive of violating the reasoning above. Maybe also maroon (brownish-red) and teal (greenish-blue), that might lack its own dedicated word in some cultures.