Pick a Color
Match colour names to swatches or pick a random colour from a 36-entry bundled palette.
Written by Golam Rabbani, Founder & Lead Engineer
How to use this pick a color
- Pick a mode: Match the name is scored and shows a target colour name; Just pick is a calm random-pick mode with no score.
- Click any of the 8 displayed swatches; the one you pick is bordered in dark grey.
- In Match mode, a correct pick is bordered green and the score updates; an incorrect pick highlights the correct swatch instead.
- Press Next Round to draw a fresh swatch set and (in Match mode) a new target name.
- Use Reset to zero the score, or Copy Pick to copy your last selection (and the target, if any) to the clipboard.
About this pick a color
Pick a Color is a small reaction-and-recognition game built on a bundled palette of 36 named colours. In each round the tool shuffles the full palette, slices off 8 distinct swatches, and (in Match mode) selects one of those 8 as the target. The colour names range from common — Black, White, Silver — to slightly trickier ones like Indigo, Salmon, and Cornflower Blue, so the difficulty scales with how confident you are with colour vocabulary.
In Match mode the tool tracks correct picks and total rounds played and renders an accuracy percentage. Just pick mode strips the scoring so you can use the same UI as a "random colour spinner" — useful for picking a palette colour for a sketch, choosing a swatch for a UI mock-up, or just sampling something visual at random. The crypto.getRandomValues call is used for the random sampling, so the swatch order is genuinely random rather than seeded.
Worked example: you launch in Match mode and the prompt reads "Tap the swatch named Sky Blue". You scan the 8 swatches and tap one that looks pale blue. If it was Sky Blue (#87CEEB), the swatch borders turn green, the status line confirms "Correct — that's Sky Blue", and your score becomes 1/1 (100% accuracy). If you instead tapped Cornflower Blue, the result panel reads "You picked Cornflower Blue. The Sky Blue swatch is now highlighted", the correct swatch shows a green ring, and your score becomes 0/1. Tap Next Round for a fresh sample.
FAQ
- Where does the palette come from?
- A bundled list of 36 named colours committed to the repo at lib/data/pick-a-color.ts. The palette ships with both display names and hex codes so the swatch and the answer always agree.
- Why only 8 swatches per round?
- Eight fits cleanly on a 4-column grid down to a 320 px screen and keeps each round fast. Showing all 36 would clutter the small-screen layout without adding learning value.
- Does Just pick mode affect the score?
- No. Just pick is a no-scoring mode for casual use; switching to it resets the score counters so the modes do not blur together.
- Is the target name always one of the visible swatches?
- Yes — the target is always sampled from the 8 swatches on screen, so the question is solvable every round. The other 7 swatches act as distractors.
- How is randomness sourced?
- window.crypto.getRandomValues for picking the target and Math.random inside the Fisher–Yates shuffle. Both run locally; nothing leaves your browser.
- Can I copy a colour value?
- Yes. After you pick, the Copy Pick button copies the colour name and hex code (e.g. "Sky Blue (#87CEEB)") to your clipboard.