// explainer

About Color Code Trainer

How the game works, why perceptual color distance matters, and what you actually learn by practising color codes daily.

What is Color Code Trainer?

Color Code Trainer is a browser-based training game for designers and developers who work with color codes. A color swatch appears on screen; you type the code that describes it. The game supports three formats: hexadecimal (#rrggbb), RGB decimal triplets (rgb(r, g, b)), and HSL (hsl(h, s%, l%)).

Each session runs for ten rounds. Your score is calculated using Delta E 2000 (ΔE00), the current state-of-the-art perceptual color distance formula from the International Commission on Illumination (CIE). The game converts that distance into a 0–100 score that rewards near-matches and penalises large deviations. After all ten rounds you receive a shareable result string and your session total out of 1000.

A daily seeded mode generates the same sequence of ten colors for every player on the same calendar day. Personal bests are stored per mode in localStorage — nothing leaves your browser.

Why color fluency matters

For front-end engineers and UI designers, color codes are a working language. Experienced practitioners can glance at #3a7bd5 and immediately see a medium cornflower blue — but that fluency takes years to build and is rarely taught explicitly. Color Code Trainer is a structured daily practice for accelerating that vocabulary.

Color fluency translates to faster, more confident design work. When you understand what a hex value looks like before opening a color picker, you can adjust components numerically, review pull requests with color changes, and spot off-brand colors in a design review without switching tools. It also makes accessibility work faster: you can estimate contrast ratios mentally when you know that L in HSL directly maps to perceived luminance.

HSL is particularly powerful for building color systems. Knowing that incrementing L lightens a color while keeping its hue means you can generate tints and shades mentally, verify them at a glance, and communicate them to teammates precisely.

The three color formats

HEX — Hexadecimal

The hexadecimal format #rrggbb is the most common color notation on the web. Each pair of characters represents one 8-bit channel (red, green, blue) in base-16. The range 00–ff maps to 0–255 in decimal. Pure red is #ff0000; pure blue is #0000ff; white is #ffffff; black is #000000.

When training in HEX mode, a useful mental model: the first two characters control the red channel, the middle two control green, and the last two control blue. A leading cc means a strong channel (204 / 255); a leading 44 means a weak one (68 / 255). Memorising a handful of landmark values — #808080 for mid-gray, #ff6600 for pure orange — gives you anchors to estimate unknown colors.

RGB — Red Green Blue (decimal)

RGB expresses each channel as a decimal integer from 0 to 255. It is the native format of the sRGB color space and of every LCD pixel. Training in RGB mode builds intuition for channel combinations: high R and G with low B produces yellow-orange tones; equal R, G, B values produce neutral grays; maxing only one channel while minimising the others gives the primaries and secondaries.

RGB notation maps one-to-one to hexadecimal — each decimal channel is just the base-10 equivalent of the hex pair. Practitioners who are comfortable in both modes can quickly cross-check estimates: does rgb(58, 123, 213) match #3a7bd5? (58 = 0x3a, 123 = 0x7b, 213 = 0xd5 — yes.)

HSL — Hue Saturation Lightness

HSL separates the color wheel angle (H: 0–360°) from colorfulness (S: 0–100%) and brightness (L: 0–100%). This is a more human-intuitive format: the hue tells you where the color lives on the wheel, saturation tells you how vivid it is, and lightness tells you how light or dark it sits on a gray scale.

Training in HSL mode builds a mental map of the color wheel: red starts at 0° and 360°, yellow at 60°, green at 120°, cyan at 180°, blue at 240°, and magenta at 300°. With these anchors, estimating the hue of an unfamiliar swatch becomes a matter of placing it on the wheel. Saturation and lightness are independently tunable — a huge advantage over RGB when building design tokens.

How Delta E 2000 measures accuracy

Most naive color-comparison approaches measure Euclidean distance in RGB space — the straight-line distance between two points in a three-dimensional cube. This fails to match human perception: two colors that differ by the same RGB delta can look imperceptibly similar in one region of color space and jarringly different in another. Blue hues and neutral grays are particularly problematic for RGB distance.

Delta E 2000 (ΔE00), published by Luo, Cui, and Rigg in Color Research & Application (2001) and standardised by the CIE, operates in the CIELAB color space (L* a* b*). CIELAB was designed so that equal numerical distances correspond to equal perceived color differences — a property called perceptual uniformity. ΔE00 further refines CIELAB with weighting functions that correct non-uniformities in blue hues and neutral regions where the raw CIELAB metric overestimates perceived differences. CIE 142:2001 ↗

The human just-noticeable difference (JND) under controlled viewing conditions is approximately ΔE00 = 1.0 — two colors with a distance below 1 are typically indistinguishable without careful side-by-side comparison. Color Code Trainer maps this to a game score using an exponential decay function: a ΔE00 of 0 scores 100, a ΔE00 of 1 scores roughly 90 (near-JND), a ΔE00 of 10 scores around 37 (clearly off to most eyes), and larger distances score proportionally lower. A score of 90 or above means your guess was within the perceptual threshold — a near-perfect match.

// ΔE 2000 → game score mapping

ΔE 2000	Perception	Score
< 1.0	Imperceptible (sub-JND)	90–100
1.0–3.0	Slight, visible on comparison	74–90
3.0–6.0	Noticeable	55–74
6.0–12.0	Clearly different	30–55
> 12.0	Strongly different	< 30

The science of color perception

Human color vision relies on three types of cone photoreceptors in the retina, traditionally labelled L (long), M (medium), and S (short) for their peak wavelength sensitivities — roughly corresponding to red, green, and blue light. The brain combines the signals from these three channels to construct the full palette of perceived color. This three-variable biological system is why three-component color models like RGB and HSL work at all: they exploit the trichromatic structure of human vision. MDN color reference ↗

The CIE XYZ color space, developed in 1931, is a mathematical model of this tristimulus response. From XYZ, the CIELAB space is derived through a nonlinear transform designed to achieve perceptual uniformity — the cube-root compression of the lightness axis reflects the fact that the eye is more sensitive to differences in dark areas than bright ones (Weber–Fechner law). Training yourself to think in CIELAB-adjacent terms — how much is this color lighter? how far is the hue shifted? — is exactly what daily practice with HSL builds, because HSL’s three axes (hue angle, saturation, lightness) are conceptually closer to CIELAB than RGB is.

How to improve your scores

Start with HEX mode
Hex is the most common format in daily CSS work and the fastest to type. Learn a handful of landmark values: #808080 is mid-gray, #ff6600 is pure orange, #0000ff is pure blue. Estimate distance from these anchors.
Map the HSL color wheel
If a color looks teal, H is near 180°. Warm orange is H near 20–30°. Chartreuse sits near 80°. Once you know the wheel, estimating H within 15° is achievable with a week of practice.
Study the reveal screen
After each round, your color appears next to the target. Look at the ΔE value and identify which channel pulled your guess astray — was your red channel 20 units high? Is the lightness 10% off?
Play the daily challenge
The daily uses the same 10 colors for everyone, so you can track your personal score over days and compare with colleagues. Week-over-week score history is the fastest feedback loop.
Use all three modes
Fluency across HEX, RGB, and HSL reinforces each other. HEX trains byte-level thinking, RGB trains channel isolation, and HSL trains the perceptual dimensions of hue and lightness independently.

Daily challenge

The daily mode seeds the ten-color sequence from the calendar date using a deterministic pseudorandom number generator (mulberry32). Every player on the same date sees the same sequence of swatches. This enables direct score comparison: copy your result string and share it to compare with teammates on a level playing field.

The daily challenge supports all three format modes independently — you can play HEX in the morning and return to play HSL in the afternoon, both against the same set of target colors, and compare your own format-to-format performance. Personal bests are tracked separately per mode, so you always know your best individual-format score.

The seed rotates at midnight in the browser’s local timezone, so the “today” transition happens relative to where you are — not a fixed UTC rollover.

References

Luo, M.R., Cui, G., Rigg, B. (2001). The Development of the CIE 2000 Colour-Difference Formula: CIEDE2000. Color Research & Application, 26(5), 340–350. https://doi.org/10.1002/col.1049 ↗
Primary academic paper defining the CIEDE2000 algorithm used by this game's scoring engine.
CIE Central Bureau. Colorimetry — Part 6: CIEDE2000 Colour-difference Formula (CIE DS 014-6/E:2012). cie.co.at/publications/colorimetry-part-6-ciede2000-colour-difference-formula ↗
Official CIE normative specification for ΔE 2000; the authoritative source for the weighting functions used in the implementation.

← Back to Color Code Trainer