The Color Mixing Game is a five-round browser challenge for beginners that teaches two color models through numeric matching, scoring each round with the real sRGB-to-CIELAB Delta E 1976 formula at an acceptance threshold of Delta E ≤ 3.0. Each round presents a target color as a hexadecimal sRGB value, a triplet of CIELAB coordinates, and an active model name, so the same on-screen patch can be read three independent ways. Beginners learn additive RGB by raising red, green, or blue display-light channels from 0 to 255, then switch to an idealized subtractive CMY mode in which cyan removes red, magenta removes green, and yellow removes blue on a 0% to 100% scale. Scoring ignores RGB channel distance entirely. Every slider configuration is converted through the standard sRGB transfer function, the published D65 linear-sRGB to XYZ matrix, and the standard XYZ to CIELAB transform before Euclidean distance is measured. A match at Delta E ≤ 3.0 awards exactly 200 points, so a perfect five-target run produces exactly 1,000 points.
The Color Mixing Game runs entirely as a client-side L1 experience, with no account required and nothing uploaded for processing. Slider values, attempts, color conversions, and scores stay on the same device the player is using.
Two Color Models in Five Beginner Rounds
The game's central teaching move is putting two opposite color ideas in the same session. Additive RGB rounds treat the three controls as encoded sRGB display-light channels. Raising red adds more red light, raising green adds more green light, and raising blue adds more blue light; the screen simply shows the combined emission. The 0 to 255 range matches the encoded sRGB byte range that every web color already uses.
Subtractive CMY rounds are framed as a classroom abstraction. Cyan removes red, magenta removes green, and yellow removes blue. The control values stay on a 0% to 100% scale, so a slider at 100% fully suppresses the complementary display channel and a slider at 0% leaves that channel untouched. The interface labels this mode as an idealization so beginners do not read it as a paint simulator.
This labeling matters because the contract explicitly describes the CMY calculation as not a prediction of real paint, printing ink, paper, lighting, binders, or pigment chemistry. Physical mixtures behave differently because their spectral properties are not represented here. Beginners who internalize that distinction early are protected from a common beginner error: assuming a screen slider and a real tube of paint will produce the same hue.
The fixed five-target sequence runs through Signal Orange, Ideal Green, Electric Cyan, Ideal Violet, and Screen Magenta. The sequence deliberately mixes RGB and CMY tasks rather than putting all RGB rounds first, so beginners encounter both models in one short session rather than reading about one and then the other.
Reading What Each Round Shows
Every round displays more than two color patches. The target and the current mix are both labeled with several distinct pieces of information, which keeps the round understandable when two swatches look identical, a display is not calibrated, or two players perceive color differently. The visible elements are:
- Target hexadecimal sRGB value, written like #RRGGBB.
- Target CIELAB coordinates expressed as three numeric channels: L, a, and b.
- Active model name, showing whether the round is RGB or CMY.
- Current mix hexadecimal value and the live RGB channel numbers.
- Three large range inputs labeled with the correct slider range for the active mode.
Because hex, RGB channel numbers, and Lab coordinates all update live, three independent numeric checks confirm whether the current mix is on target. If a swatch looks slightly off, the Lab numbers explain why; if the Lab numbers look close but the hex disagrees, the slider reading is the source of truth. This redundancy is what makes the game accessible to players on cheap monitors, in bright rooms, or with reduced color discrimination.
Play the Color Mixing Game in Three Actions
The game collapses to three reproducible actions per round. Following the same sequence keeps attention on color reading rather than interface hunting.
- Read the active model name, target hex value, and target Lab numbers at the top of the round, then compare them with the current mix shown directly beside the target. Note whether the round is RGB (0–255) or CMY (0%–100%), and decide which slider direction is most likely to move the current mix toward the target.
- Adjust the three sliders until the current mix hex value, the live RGB readout, and the Lab numbers all converge on the target. Touch users receive the same three controls with at least a 44-pixel interaction height, mouse users can click and drag, and keyboard users can focus a slider with Tab and use the arrow keys for one-unit adjustments.
- Press Check mix to evaluate the round. A match at Delta E 1976 of 3.0 or lower scores 200 points and opens the next target. A miss records the slider signature and leaves one more chance before the round locks.
For beginners, the third step is where the color science becomes visible. The Check button does not subtract one RGB triple from another; it runs the full conversion chain and returns a Delta E distance that any colorimetry reference would recognize.
Scoring with Delta E 1976 and the Two-Miss Rule
Delta E 1976 is the Euclidean distance between two CIELAB triplets, written as:
ΔE*ab = √((L1 − L2)2 + (a1 − a2)2 + (b1 − b2)2)
A useful sanity check for beginners is the maximum value the formula can produce. Delta E between pure black (L=0, a=0, b=0) and pure white (L=100, a=0, b=0) is exactly 100, because only the L channel differs and √((100 − 0)2 + 0 + 0) = 100. The 3.0 acceptance threshold is therefore roughly three percent of that maximum range, which sits well inside the band color scientists use to mark a perceptually close material match.
The full pipeline that produces the Delta E number is documented in the implementation contract. Each encoded sRGB channel is normalized, decoded to linear light with the standard piecewise sRGB transfer function, multiplied by the published linear-sRGB to XYZ matrix for the D65 illuminant (x=0.3127, y=0.3290), normalized against the D65 white point, and transformed into CIELAB coordinates using the standard epsilon (216/24389) and kappa (24389/27) branches. Only after that is Delta E calculated. RGB channel distance is never labeled or used as Delta E.
The miss structure is also strict. The first distinct wrong mix records its Delta E and leaves one chance. Re-checking the exact same wrong slider signature is deduplicated and does not consume the second chance; the round only locks when a second different wrong signature appears. Once locked, all three sliders and the Check button are disabled, so the score and attempt history cannot drift. Restart is the only recovery path, and it restores the same deterministic first target, zeroed sliders, zero score, and empty signature set.
Invalid input is atomic. Empty arrays, missing channels, fractional slider values, NaN, values outside the active mode range, deadlocked states, and completed rounds all register as no-ops rather than errors, so beginners can experiment freely without corrupting the run.
Why Numeric Cues Beat Eyeballing for Beginners
Eyeballing color is unreliable on uncalibrated monitors, in rooms with strong ambient light, and for players with differences in color perception. Numeric feedback addresses all three problems at once. When two patches look the same to a player but the Lab coordinates still differ, the numbers expose the gap. When a monitor renders colors at the wrong gamma, the hex value stays correct because it is encoded text rather than a pixel measurement.
The game's color science is sourced rather than invented. The conversion chain is taken from the W3C CSS Color Module Level 4 conversion code, and the sRGB encoding definition, the 2.4 transfer exponent, and the D65 chromaticity coordinates are independently cross-checked against the International Color Consortium sRGB Three Component Color Encoding Registry. Both reference pages were fetched successfully when the tool was prepared. An independent test oracle implements the same decoding, the same rational XYZ D65 matrix, the same Lab transform, and the same Delta E formula from scratch, without calling the product's own functions, and verifies every target solution, the expected hex value, the expected Lab coordinates, and a near-zero solution Delta E for each of the five fixtures.
That means a beginner who reads the numbers carefully is doing the same kind of color matching a print shop or a display calibration lab does, just at a smaller scale and with a forgiving 3.0 threshold.
RGB and CMY Compared Side by Side
| Property | RGB mode | CMY mode |
|---|---|---|
| Slider range | 0 to 255 per channel | 0% to 100% per channel |
| Color model | Additive display light | Idealized subtractive channel removal |
| Effect of raising a slider | Adds more of the encoded sRGB component | Removes the complementary display channel |
| Physical fidelity | Matches how a screen emits light | Explicitly not paint, ink, or pigment simulation |
| Scoring | Same Delta E 1976 ≤ 3.0 acceptance threshold | Same Delta E 1976 ≤ 3.0 acceptance threshold |
| Points per correct round | 200 | 200 |
Beginners who study this contrast tend to internalize a useful habit: raising a slider is not always "more of that color." In RGB mode it usually is. In CMY mode it is closer to "less of the opposite channel," which is the opposite mental motion and the main reason the game alternates between modes mid-session.
What a Successful Run Looks Like
A clean run starts at the deterministic first target, walks through all five fixed targets without triggering the two-miss lock, and lands on a score of exactly 1,000 because each of the five matches awards 200 points. The game shell also stores the best score on the device, so beginners can track improvement across sessions without uploading anything. Slider values, attempts, color conversions, and scores all stay in the browser.
For readers who want a separate practice track on the read-then-adjust loop, the Cocktail Mixing Game exercises a different matching challenge with visible percentage-point deviation and a comparable 1,000-point finish.
Once the two models feel familiar, the five-target format is short enough to repeat several times in a row. Each pass through the same fixtures reinforces the same Delta E pipeline, so beginners start to predict which slider changes move Lab L versus Lab a versus Lab b. That habit is the real reward the game offers: not a high score, but a working intuition for how sRGB and CIELAB talk to each other.
Related reading: Connect the Numbers for Beginners: Your First 1,000.
Related reading: Counting Blocks Puzzle for Beginners: Your First 1,000.