New Activity Proposal: Color Lab

[Rejah-Rabeeul]

Hi,
I'd like to propose a new activity called Color Lab. It’s a simple hands on game to help kids understand color theory. instead of just picking a color from a menu they have to build it.
The goal is to match a Target color by mixing primary paint tubes (Red, Yellow, Blue). It turns abstract concepts like "Red + Blue = Purple" into a fun puzzle.

How it works:

The Goal: The screen shows a color that the user needs to recreate.
Mixing: There are tubes for Red, Yellow, and Blue (plus White and Black). Every time you click a tube, it adds that color to a central mixing area.
The Result: The user compares their mix to the target. If it looks right, they click a "Check" button to see if they got it.
Reset: If the mix gets too dark or messy, there is a simple "Reset" button to clear the bowl and start over.

[llaske]

Do you have an existing application or website in mind who inspired you this idea?

[Rejah-Rabeeul]

This website is a good reference for my idea.

https://trycolors.com/games/guess-mix

[llaske]

I do like the idea but the reference implementation is too difficult for youngest children.

Percent and hexadecimal values are complex for children.
Plus/minus color actions are not clear.
The list of initial colors to mix are not primary.

Could you find something more simple?

[Rejah-Rabeeul]

I think we can make this activity in 2 different ways

1.Experiment lab :this would be similar to gear , physics js activities. Kids can mess around and see what happens when they mix different colors together in a canvas environment.

2.Challenge game :This is similar to original idea but much simpler. I found a game on ios called "Chroma Game" that does the same thing in more simpler way, I've attached a video of it playing.

Chromo.Game.mp4

[llaske]

That's nice.
We could also have a shared mode where multiple users will try to solve the color as quick as possible (like in Maze activity).
BTW I think we should remove the Evaluate button.
Do you want to suggest a mockup?

[Rejah-Rabeeul]

We could replace the Evaluate button with a progress percentage tracker. this would allow the game to end in a win once the correct color is reached. Does this sound good?

I'll create a mockup including these changes and share it with you for feedback

[llaske]

We could replace the Evaluate button with a progress percentage tracker

Yes okay for the percentage but for children not familiar with percentage, a progress bar will be nice.

I'll create a mockup including these changes and share it with you for feedback

Sure.

[Rejah-Rabeeul]

Hey @llaske I just created a mockup for the activity, can you give some feedback for it.

This will be the free mix mode:

This will be the color match challenge:

[llaske]

Few ideas:

• I think it's better to use a black background
• The three colors cursor should be on the same line
• Will be nice to put a color wheel around the circle in free mode: clicking on a portion set the matching color
• I suggest to automatically display the matching color name (see here)
• The progress bar could be around the my color circle
• The toolbar should contain:
  • the activity palette
  • the shared palette
  • icon for the free mode (selected by default) - grouped with the following icon
  • icon for the challenge mode - grouped with the previous one
  • restart icon: set to grey in free mode, change the challenge in challenge mode
  • tutorial icon
  • fullscreen icon
  • stop icon
• Will be nice also to propose something on color harmony

[Rejah-Rabeeul]

Here is the updated mockups:

Free mix mode:

Challange mode:

as you mentioned, it would be nice to add color harmony. are you thinking of adding it to the left or right side of the canvas in Free mix mode? If so, I’ll be glad to add it, just wanted to confirm the placement first

[Rejah-Rabeeul]

Or

Does this match what you had in mind?

[llaske]

I do like the new mockup 👍
Just one thing: you miss the activities palette which should be the first icon in the toolbar.

Regarding harmony mockup i think we could use the same screen that the one for free mode. Just add the color harmony wheel to the left and color harmonies colors (see below) to the right.
I suggest also to add a new icon on the toolbar with a palette menu where user could activate harmony mode and choose the current mode: no harmony (default), complementary, split complementary, analogous, triadic, tetradic, square.
In harmony mode, it will be nice to add a small bar with the current color harmonies (two/three/four).

I guess that the white dot on the circle is here to change the current harmony? the user turn the wheel and current color change and harmonies change at the same time. The user can also change color (and harmonies) by moving the R/G/B cursors.

[Rejah-Rabeeul]

Hey @llaske,
I've updated the mockup and added color bars to indicate the selections from the color harmony.
I think we should set one of the harmonies as the default otherwise, the screen feels a bit off or empty. What do you think?
also the dot around the harmony is used to adjust color density.

[llaske]

I'm not in favor to display harmony by default in free mode. It's too complex for young children.
Also my suggestion was to keep the free mode screen when adding harmony. So the main color circle should stay at center and RGB cursors should stay at the bottom of the screen. The harmony mode add the second circle to the left of the main color circle and the harmonies at the left of the main color circle.
Regarding toolbar icons the should be monochrome except the activity icon who will use buddy colors.

[Rejah-Rabeeul]

Hi @llaske,
Does this look good?