Color Recall
FREE
Play the free color memory game: memorize five swatches, then match hue, saturation, and brightness with HSB strips. No signup.
Design Games
Practice color memory, typography pairing, and visual judgment with short browser games. This category lists 15 free design games—warm up with color recall drills, then validate real picks using contrast checkers and palette tools in the Color category.
Color training games
Practice color match and color memory before typography or layout games. Start with Color Recall, then harmony drills and hex guessing.
Color
FREEPlay the color method game on color.method.ac: matching color games for hue, saturation, and harmony—color guessing with complementary and triadic rounds.
Hex Test
FREEPlay Hex Test on madebyshape.co.uk: guess the hex code from swatches in this hex code game—10-level color code quiz and colour code game.
Can't Unsee
FREEPlay the can't unsee game on cantunsee.space: pick the most correct UI between two designs—a UX game for hierarchy, typography, and visual detail.
The Boolean Game
FREEPlay the boolean game on boolean.method.ac: an operations game for union, subtract, intersect, and difference—vector boolean practice.
Shape Type
FREEPlay shapetype on shape.method.ac: the shape type game to drag Bézier curves, match famous letterforms, and score shape typography.
Pixactly
FREEPlay Pixactly on pixactly.app: draw rectangles to match target width and height in pixels—five-round pixel accuracy game with personal bests.
CSS Diner
FREEPlay CSS Diner on flukeout.github.io: css practice through selector puzzles on a bento table—type selectors, advance levels, learn CSS.
The Bézier Game
FREETrace curves with the pen tool using as few nodes as possible—free bezier curve practice for Figma and Illustrator.
Color
FREEPlay the color method game on color.method.ac: matching color games for hue, saturation, and harmony—color guessing with complementary and triadic rounds.
Hex Test
FREEPlay Hex Test on madebyshape.co.uk: guess the hex code from swatches in this hex code game—10-level color code quiz and colour code game.
Flexbox Froggy
FREEPlay flexboxfroggy on flexboxfroggy.com: flexbox exercises game to guide frogs with justify-content, align-items, and flex-direction—10 levels.
Ragtime
FREEPlay Ragtime on fathom.info: fix typographic rag in 60 seconds—keyboard typography game about text rag, not the Broadway play—
Can't Unsee
FREEPlay the can't unsee game on cantunsee.space: pick the most correct UI between two designs—a UX game for hierarchy, typography, and visual detail.
Designercize
FREERun Designercize on designercize.com: a design prompt generator and challenge generator for whiteboard exercise and design practice with a timed timer.
Color Recall
FREEPlay the free color memory game: memorize five swatches, then match hue, saturation, and brightness with HSB strips. No signup.
Sound Memory Game
FREEPlay the sound memory game everyone's talking about. We play 5 tones, you recreate them from memory using a frequency slider.
Time Memory Game
FREEPlay the time memory game everyone's talking about. We show you 5 durations, you recreate them from memory.
Shape Recall
FREEShape Recall game: memorize 5 shapes, then recreate scale, rotation, and position from memory. Test your spatial sense in the browser.
Looking for external products and SaaS platforms? Browse curated products.
About Design Games
Practice color memory, typography pairing, and visual judgment with short browser games. This category lists 15 free design games—warm up with color recall drills, then validate real picks using contrast checkers and palette tools in the Color category. You can explore each tool page to understand the use case, output format, and how to reuse results in design and frontend projects.
How teams use Design Games
Workflows that pair design games with real color and type tools.
Daily color warmup
Run hue-match and harmony games before UI reviews to sharpen eye for subtle saturation and contrast shifts.
Team icebreakers for design crits
Use quick rounds of shape or typography games to align the room before structured critique sessions.
Bridge games to production tools
After scoring well on hex guessing games, confirm accessible combinations with WCAG contrast utilities in Color Tools.
Related tool categories
Browse other categories to find complementary tools for your workflow.
Color Tools
Color pickers, palette generators, contrast checkers, and accessibility utilities for UI design.
Audio Tools
Audio and video converters (MP4, MOV, MP3, WAV), video editing utilities, plus pitch detection and ear training in the browser.
Drawing & Creation
Freehand drawing, charts, pixel art, avatars, and visual creation tools for designers.
Learn & References
UX tools, design systems, educational guides, and planning references for product teams.
SVG Generators
Free SVG generators for gradients, patterns, waves, noise, and backgrounds—browser tools for web layouts and design exports.
Icons & Graphics
Icon libraries, iconography sets, open-source illustrations, and SVG asset collections for product UI and marketing.
Frequently Asked Questions
Quick answers about this tool—open a question to read more.