Color Naming Challenge

The color naming challenge shows a swatch and four standard CSS color names, and keeps a running score and streak as you work out which one is right.

What is Color Naming Challenge?

A round has one swatch and four buttons. The swatch fills the left card under the heading Name this color, and below it sit four names drawn from the standard CSS named-colour list — one of them is the target, and the other three are other entries from the same list, chosen so that none of them shares the target's hex value. Two columns of buttons keep the choices short enough to read at a glance.

• The pool is what makes the challenge instructive rather than trivial.
• The names are the ones a stylesheet actually accepts — the long list of two hundred or so keyword colours that browsers resolve, from the obvious ones to the pairings nobody remembers.
• Because the three distractors are real entries from the same list, a round is rarely as easy as it looks: two named colours can be a few degrees apart, and the difference between them is exactly what has to be recognised.

The scoring is the part worth watching. The result card shows two figures — a score out of rounds played, and a streak that counts consecutive correct answers and resets to zero the moment one goes wrong. That pairing makes the streak the more honest measure of skill: a score of eighty percent assembled across dozens of rounds means something different from eight consecutive correct answers.

Feedback is immediate and specific. Before a guess the card says only that a standard name needs to be chosen; afterwards it either confirms the choice or states what the colour actually is, giving both the name and its hex code. That last detail is what turns a wrong answer into a lookup rather than a dead end — the hex can be taken away and used, and the name learned from it.

The CSS color name quiz format also happens to teach the one thing the list is genuinely useful for. Named colours are readable in source and memorable in review, which is why they survive in stylesheets even where a token system exists. Knowing that a particular shade is called the name it is called — rather than being a plausible-looking guess — is the difference between using them deliberately and avoiding them.

What it does not offer is any help. There is no hint, no narrowing of the options after a wrong answer, no explanation of why a name belongs to a colour, no difficulty setting and no way to weight the rounds towards the names that keep being missed. The score and the streak last for the visit and are then forgotten.

• Limits: four options per round, one round at a time, a session-only score, no history and no export.
• As a color naming challenge it is a clean guess the color name loop against the standard list, and for anyone who wants a fast css color name quiz — a name that color quiz with a streak to keep honest — it is a swatch, four buttons and a button to move on — a color name test that costs nothing but the rounds you give it.

How to use Color Naming Challenge

1. Look at the swatch and read the four names offered.
2. Pick the one you believe is the standard CSS name for that colour.
3. Read the verdict in the result card, then press Next color — a wrong answer resets the streak.

When to use Color Naming Challenge vs related tools

Use this to check how well the standard CSS colour names are known, or to settle which of two similar names belongs to a shade. Use the colour memory test when the target is recall of a shade rather than its vocabulary, or the named colour lookup when a list is what is needed. Once the standard names are familiar, the color name lookup answers what a value is called and the name generator handles the reverse direction.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Color Naming Challenge