Color Mixing Game is a five-round browser challenge that scores every match using Delta E 1976 in CIELAB color space, awarding exactly 200 points per accepted round for a maximum of 1,000 points. The game pits you against five fixed color targets, alternating between additive RGB rounds and idealized subtractive CMY rounds. RGB rounds ask you to mix three display-light channels (red, green, blue) from 0 to 255, the same encoding used by every sRGB monitor. CMY rounds ask you to mix cyan, magenta, and yellow percentages from 0 to 100, with each slider removing its complementary display channel rather than predicting real pigment chemistry. Every round shows the target hex value, the current mix hex value, and full CIELAB coordinates for both, so the match state remains readable even when two swatches look similar or your screen is uncalibrated. Acceptance is a strict numerical threshold: Delta E 1976 must be 3.0 or lower. Color Mixing Game runs entirely in your browser, with no account, no download, and no server-side scoring.
What the Two Color Models Actually Test
The game deliberately teaches two different color theories through the same numerical score. RGB rounds treat each slider as a display-light channel: raising red adds more encoded red component, raising green adds more encoded green, and raising blue adds more encoded blue. The combination is decoded by the browser exactly the way an sRGB monitor decodes a hex color, so the visible swatch matches the written hex value.
CMY rounds follow a different mental model. Cyan is treated as a control that removes red from white, magenta removes green, and yellow removes blue. Raising a CMY slider therefore subtracts from the corresponding RGB channel rather than adding light, which is why the same final hex value can come from very different slider positions depending on the active mode. The game states this rule plainly: it is an idealized teaching model, not a prediction of real paint, ink, paper, lighting, binders, or pigment chemistry. Real subtractive mixtures can behave differently because their spectral properties are not represented.
Both modes share the same scoring engine, so you can compare your intuition about additive mixing against the disclosed complement rule and see whether the two paths actually land on the same hex value and CIELAB coordinates. The game surfaces every relevant number on screen, including the active model name, which means a wrong mix is debuggable rather than mysterious.
How to Play the Color Mixing Game
- Open the game and read the active mode (RGB or idealized CMY), the target hex value, and the target CIELAB coordinates displayed alongside the current mix.
- Adjust the three sliders until the current mix swatch and its hex value visually match the target. RGB sliders run from 0 to 255 and CMY sliders from 0 to 100.
- Use touch, mouse, or keyboard input. Focus a slider with Tab and step it with the arrow keys for precise one-unit changes; touch targets are sized for comfortable tapping.
- Press Check mix to evaluate the current sliders. The game computes Delta E 1976 between the target Lab triplet and your current Lab triplet.
- If the result is 3.0 or lower, the round is accepted, 200 points are added immediately, and the next fixed target opens.
- If the result is above 3.0, the game records the unique slider signature, keeps the round open, and gives you one more chance. A second distinct wrong mix locks the round until you restart.
- Complete all five accepted rounds to finish with exactly 1,000 points.
Round Structure, Score, and the Two-Miss Rule
Five fixed targets form the deterministic run: Signal Orange, Ideal Green, Electric Cyan, Ideal Violet, and Screen Magenta. Their exact slider solutions and expected Lab values are stored as inspectable fixtures, and the acceptance test recomputes them from the same literals rather than guessing. Each round carries the same internal state machine, summarized below.
| Event | What the game checks | Result |
|---|---|---|
| First Check mix at or below threshold | Delta E 1976 ≤ 3.0 | +200 points, advance to next target |
| First Check mix above threshold (new slider signature) | Unique wrong mix recorded | Round stays open, one chance remaining |
| Second Check mix above threshold (different signature) | Two distinct misses recorded | Round locked, controls disabled |
| Repeat of the exact same wrong signature | Signature deduplicated | No additional miss counted |
| Restart pressed while a round is locked or complete | First target restored, score reset to 0 | All sliders cleared, signature set cleared |
Because each round has a fixed 200-point value and there are exactly five rounds, the maximum score is 1,000 by construction, not by probability. The first wrong signature you record leaves a second chance; submitting the exact same wrong mix again is deduplicated and does not consume that chance. A second different wrong mix locks the round. Once locked, every slider and the Check button are disabled so the score and attempt history cannot drift. The only recovery path is Restart, which restores the same first target, zeroed sliders, a zero score, and an empty signature set.
How Delta E 1976 Is Calculated
The score is not based on how close your RGB channel numbers look to the target's RGB channel numbers. Instead, the game runs a real color-science conversion chain. Each encoded sRGB channel is normalized to a 0–1 value, then decoded to linear light using the standard piecewise sRGB transfer function described in the W3C CSS Color Module Level 4 conversion code. The linear triplet is multiplied by the published rational sRGB-to-XYZ matrix for the D65 illuminant, normalized against the D65 white point, and transformed into CIELAB using the standard epsilon (216/24389) and kappa (24389/27) branches. The cross-checked ICC sRGB registry independently confirms the IEC sRGB definition, the 2.4 transfer exponent, and the D65 chromaticity coordinates.
Once both colors are in Lab space, Delta E 1976 is the straight-line Euclidean distance between the two Lab triplets:
ΔE76 = √((L₁ − L₂)² + (a₁ − a₂)² + (b₁ − b₂)²)
Suppose your mix lands on Lab (L=52, a=21, b=−12) and the target is (L=50, a=20, b=−10). The calculation is:
ΔE76 = √((52 − 50)² + (21 − 20)² + (−12 − (−10))²) ΔE76 = √(4 + 1 + 4) ΔE76 = √9 ΔE76 = 3.0
That value sits exactly on the acceptance threshold, so the Check mix would accept the round and award 200 points. A single channel pushed one step further from the target would push the distance above 3.0 and trigger the miss logic. The same formula is used for both RGB and CMY rounds, which is why a CMY mix and an RGB mix can be compared on equal footing even though their slider semantics are different.
What the Idealized CMY Mode Does Not Do
The CMY rounds teach a deliberately simplified subtractive model so that the slider behavior is auditable from the same numeric code that powers the RGB rounds. In that model, cyan removes red, magenta removes green, and yellow removes blue. The slider result is then converted back to sRGB and Lab through the same conversion chain as RGB, so the comparison is always between two CIELAB triplets rather than between pigment predictions.
The product contract is explicit about what this model is not. It does not simulate real paint, real ink, paper substrate, lighting conditions, binders, or pigment chemistry. Physical mixtures have spectral properties that this browser model does not represent. If you are trying to predict what two specific watercolors will look like when blended on cold-press paper under tungsten light, this game will not give you that answer. It will, however, let you practice translating between an RGB way of thinking and a complementary-channel way of thinking, using the same Delta E 1976 yardstick for both.
Controls, Accessibility, and Privacy
Three large range inputs carry the work, and the game shell exposes them to keyboard, mouse, and touch without compromising precision. Tab moves focus between sliders, and the arrow keys then make precise one-unit adjustments that match the active mode's range. Touch users get the same three controls with at least a 44-pixel interaction height so taps land reliably on mobile devices. A Restart control is always available on the game shell, along with best-score handling stored on this device and a Boss control for quick context switching.
Every calculation runs client-side. Slider values, attempts, color conversions, and scores are not uploaded for processing, and no account is required. Invalid slider values, fractional inputs, NaN values, out-of-range entries, deadlock states, and completed states are treated as atomic no-ops so they cannot corrupt the round state or the score. If you want to keep practicing color puzzles after a perfect run, the Color Sudoku guide for solving color, number, and symbol tokens covers another accessible browser puzzle that uses similar color vocabulary.
For readers who want to audit the conversion math used here, the primary algorithm reference is the W3C CSS Color Module Level 4 conversion code, and the IEC sRGB parameters are independently cross-checked against the International Color Consortium sRGB registry. Both pages were fetched successfully when the tool was prepared.
Ready to start? Open the Color Mixing Game and aim for that exact 1,000-point run.