Cant type in 4 or 8 letter color names in editable input anymore

[aditigoel23]

On the react color demo page I am able to type in "blue" into any of the editable inputs and that is recognized as valid.
Since this fix - 669bf04#diff-012ff5a8f8316a2507102ec918eaf81b
I am not able to type in 4 or 8 letter color names. They return as invalid because of the length check. So while "red" or "yellow" works fine, "blue" or "gray" doesnt.

Is there a work around for this?

[casesandberg]

I wonder if we need to revert the fix in that commit and find another solution for the problem that was solving.

[Tintef]

@casesandberg What do you think about having a list with the available colors (['red', 'blue', 'yellow', ...]) and skip the length test if the hex value is inside the list? (this will mean that it's a valid "word" color not an hex code)

[casesandberg]

@Tintef That would be a workaround but not a fix for the problem. We want to support all valid hexadecimal strings including alpha values and hexadecimal numbers.

[dreamyguy]

@casesandberg I'd like to propose using https://www.npmjs.com/package/validate-color to validate colours passed directly in the input. This package currently supports:

• hex - #bada55
• name - LightGoldenrodYellow
• special name - currentColor
• rgb - rgb(0 0 0)
• rgba - rgba(0, 0, 0, .45)
• hsl - hsl(4.71239rad, 60%, 70%)
• hsla - hsla(180deg 100% 50% / .8)
• hwb - hwb(180deg 0% 0% / 100%)
• lab - lab(2000.1337% -8.6911 -159.131231 / .987189732)

Disclaimer though, this package is mine. Having said that, I wrote exhaustive tests on each function, that can be run separately or combined in one (ie. ValidateColor('#faa')). It is all achieved by advanced and modular regex. 🎱