Building Color Rush: Lessons in Procedural Aesthetic Design

Color Rush is one of our simplest games mechanically — matching colored shapes falls into the casual category — but it taught us more about game feel than any other project. The visual design is entirely procedural, and getting it right took five iterations.

The Color Palette Problem

Our first version used random HSL values for each shape. The result was visually chaotic and physically tiring to play. Colors that were technically distinct (like orange and yellow) looked the same in rapid succession. We settled on a curated palette of six colors with maximum perceptual distance: red, blue, green, yellow, purple, orange. Each color's RGB values are hard-coded to ensure they remain distinguishable even on cheap phone screens.

We also discovered that color placement matters. Red and green should never appear in consecutive shapes — the similarity in brightness causes visual confusion. Blue should always follow a warm color for maximum contrast.

Gradient and Anti-Aliasing

One specific technical challenge we solved: shapes moving from the center to the edge needed to remain the same apparent color regardless of position. On cheaper phone screens, color shifts slightly as shapes move to the edges because of viewing angle changes in the LCD panel. We tested four different color profiles before settling on one that maintained perceptual consistency across a 170-degree viewing angle.

The anti-aliasing for the shape boundaries was another problem. Sharp edges created shimmering artifacts during fast movement. We added 1px blur on the shape edges, which eliminated shimmering while maintaining the visual crispness. The performance cost of this blur was negligible because we cached the blurred shape mask to an offscreen canvas and only redrew position each frame.

The final iteration of the color palette was tested against four common types of color vision deficiency (protanopia, deuteranopia, tritanopia, and monochromacy). We adjusted the six colors to maintain maximum perceptual separation across all four conditions. The result is a game that is equally playable by the approximately 8% of male players with some form of color blindness. This was not an accessibility afterthought — it was a design requirement that shaped the palette from the beginning.

Procedural Color Without a Palette File

Color Rush generates its entire visual identity at runtime rather than loading a palette from an asset. We use the HSL color model because it lets us produce harmonious colors mathematically: hold saturation and lightness constant, step the hue around the wheel, and you get a set of colors that always look like they belong together. This is why the game never has a clashing color combination — the harmony is guaranteed by the math, not curated by hand. It also means the whole aesthetic is a few lines of code instead of an image file, which keeps the load instant.

The Readability Constraint

A game built on color matching has a hard requirement that procedural generation must respect: every color must be clearly distinguishable from every other, including for players with color vision deficiency. We constrain the generated hues so adjacent colors never sit too close on the wheel, and we lean on differences in lightness as a secondary cue so the game remains playable even when hue perception is impaired. Pure procedural randomness would occasionally produce two near-identical colors, which is unacceptable in a matching game, so the generator is bounded rather than free.

Animation From Math, Not Sprites

Every moving element in Color Rush is drawn with canvas primitives and animated with simple easing functions rather than pre-rendered sprite sheets. An easing function takes linear time and bends it into something that feels organic — a block that accelerates as it falls, a flash that fades naturally. The entire visual polish of the game comes from a handful of these math functions applied to basic shapes. It is a deliberate demonstration that a game can feel rich and animated without a single image asset.