Open navigation

scroll down



A coolsies game for helping and teaching designers about color and color theory to have a better understanding when creating color schemes rather than arbitrarily picking colors that look “nice” together
written and designed by Rehan Butt and Nahyung Kim

This is a project for Design Communication, a web-based design interface research course. Students are to develop a prototype interface that augments design communication.

read a bit about our process and concept behind our game then go ahead and play it



JavaScript CSS HTML JQuery Transit TinyColor

These frameworks and libraries were used as tools to help us build our application. HTML and CSS were used as they are the basic foundation to web development. JavaScript, JQuery were used to develop a more sophisticated and modularized code base, using similar coding techniques to that of offline programing. The Transit library gave us an easy way to transform our DOM objects and TinyColor gave us some of the mathematical context behind calculating the color schema.


Cameleon’s interface represents a color wheel, so the player can visualize the various relationships between colors and color schemes. Three color rules, triad, tetrad, and complementary, are implemented in Cameleon. For each rule, one color will be given in a bigger circle and the player finds the other colors that goes in that scheme. The icons located at the top of the screen can be visual aid to understanding these relationships better.


Triad colors are three colors that are of equal distance from each other on the color wheel. Triad colors provide balanced color schemes for designers.


Complementary colors are two colors that are directly opposite from each other on the color wheel. These colors create the strongest contrast.


Tetrad colors create a scheme of several colors that are in the range of the two complementary colors, but not those two colors exactly. Cameleon generates four colors of which each pair is closer to each end of the spectrum.

Play!

The use of colors in visual representation is critical to designers. We see and use the color wheel at almost every stage in the design process, in Rhino, Illustrator, etc.
Our initial goal was to build a web-based tool that would create color schemes for the users. However, while researching existing tools, we realized that none of them explain how the schemes are generated. Users take these color themes for granted because they look “good” and do not stop to think about the logic behind what makes certain schemes more effective than others in different situations. However, if designers understand how these programs work, they could be even more creative with and in more control of their projects.
After reading through texts about the color theory, we thought that a more effective way of learning it could be through a game. We aimed to create a simple UI that represents the color wheel, making it easier for the players to visualize the different relationships of colors in different schemes. We diagrammed the color rules and made them into icons so that the game is more intuitive.
Cameleon was developed using Javascript, HTML, and CSS. Since the UI was to resemble a color wheel, we started by creating an object that acts as the bigger wheel. Then, the wheel was subdivided into a finite number of rectangles rotated around the wheel. Circles with the answer options and the master circle were then placed in each rectangle. We used TinyColor’s color library and color theory functions to implement the three color rules. The player is allowed to guess until the right answers to the respective color rule are found, and in that process, points are either lost or gained.
Read more about our initial approach to our web-based tool
Look at the history of Cameleon