How To Choose Hypercasual Game Colors: 5 Beginner Tips

The hypercasual genre continues to stay high on the charts and attracting the attention of development teams. In 2021, hypercasual games accounted for over 50% of all mobile game downloads.

According to App Magic data, last year the developers made over 2,700 new Western releases of hypercasual games, which is three times more than in 2020:

Source: AppMagic

Games such as Join Clash 3D, Bridge Race, or Hair Challenge are known for its minimalistic art and addictive gameplay. These are the primary characteristics of hypercasual games, but things are not so simple on the production side.

The development process of creating such games consists of various important parameters. Even despite the design is simplistic, details such as color combinations play a role.

Based on my experience of working with 50+ hypercasual development teams, let me bring up TOP-5 tips for choosing colors to create visually appealing graphics for a hypercasual game scene:

Tip #1 – Pay attention to color perception

Color carries information for the player just like any other element of the game (sounds, sizes, parts of the interface). Game designers pay deeper attention to the color perceptions in more complex genres. They create the user experience so that the player has all the necessary information to play the game.

Hypercasual games have less such information, as everything is simpler.

This article won't dive into color theory, but it's important to consider how colors affect the feeling of players when choosing a color palette. Colors have meaning and emotions associated with them. Below, you can see examples of what emotions each color can convey:

As most of the developers choose the colors for games at the level of basic own perception, most likely, nobody is going to make the coins in the game black or red.

It’s important to make the game intuitively simple and understandable. Otherwise, players might not stick to the game that is hard to visually navigate.

Basic definitions of the meaning of colors can be a starting point for choosing a basic mood and palette of colors.

Tip #2 – Analyze color palettes of existing games

Beginners can find and use a ready-made color palette, as hypercasual community evolves and developers openly share their experience.

One very commonly used tool is Adobe Color Wheel tool. The tool helps to extract color from any image and save it as a color palette. It allows finding out what colors are used in any game by analyzing its product page or icon screenshot.

To navigate the common design practices, developers use this approach to recognize the combination of colors in popular hypercasual games. Here are some of such color decomposition examples:

1. Bridge Race

2. Hair Challenge

3. Join Clash 3D

4. Count Masters

5. Giant Rush!

Each of these games has a good color combination. The icon and the game may have slightly different color palettes. There are usually five colors in a pallet, but the game can have more than that if it contains many levels.

Tip #3 – Create a palette in an online tool

Teams may take different approaches when choosing online tools to create a color palette. They construct their own version or download a ready-made set. Depending on the solution, there are a few tools to choose from:

1. Adobe Color

It’s a classic color choice option that works well for the hypercasual palette creation. Adobe Color allows to make a 5-color palette for free in seconds.

The user moves one of the small circles, and the tool automatically adjusts the other four colors in the palette. Therefore, all five colors are combined and well-matched.

There are 3 ways of combining colors to choose from: complimentary principle, triad, and square:

Complementary

Triad

Square

2. Paletton

Game designers can also use Paletton to create complex color palettes. This tool has many useful features that many others don't: undo, redo, reset, and advanced randomizer.

Paletton also offers different principles for choosing color combinations to experiment with:

3. Coolors

The tool has a short and clear tutorial to learn how to generate random color pallets or play around with different color-matching methods. In addition, users can lock 1, 2 or more colors they like and continue to experiment with the rest of the palette.

Once the colors are generated, Coolors also allows customizing and adjusting any color in the palette or the whole palette at once.

4. Colrd

This tool will especially appeal to those designers who don’t want to limit themselves to three or five colors in one palette. In Colrd, users can choose from two to many colors at the same time in one palette.

This program is designed for more advanced users, as they must manually select each color in the palette. In addition, here you can adjust the tone for each color:

5. Colorsupplyyy

This tool is slightly similar to Adobe Color because it also has similar color matching principles. But users can not only choose the principle and color combination in Colorsupplyyy, but they also see an example of applying these colors on fragments of a hypercasual game:

Tip #4 – Don’t use very bright colors

Basic bright colors are always harder to work with in comparison to muted colors. So, for the simplicity sake, it's recommended to use more pastel and calm shades.

Below, there are two identical scenes, but with different brightness. Obviously, the first option hurts the eyes a lot. The designer mutes such colors so that they are better perceived:

Undeniably, the second version looks not finished yet. Hence, the designer fixes it in the next stage by applying some shadow adjustment.

It's important to keep in mind, that the palette should be accessible to people with visual impairments. The awesome way to check it is to use the Accessible Color Matrix. This resource is based on the WCAG 2.0 initiative. It's a good way to make sure that the chosen palette is fully accessible to people with visual impairments.

Here is the color combination testing flow:

1) The team chooses five colors for a future game in one of the tools from the previous tip – Coolors.

2) The designer adds these colors to the Accessible Color Matrix. The program shows how colors can and cannot be combined. In case something is wrong, certain colors must be replaced or adjusted accordingly.

Taking this aspect into account raises the team to the next level in experience and attention to detail.

Tip #5 – Adjust the color proportions

Developers don't use all colors in the same proportions. If the team chose 4 base colors, it doesn't mean that each of them will occupy 25% of the visual scene.

One color should be dominant. The color is likely to prevail if it is used as a background. For example, it's gray color. If gray dominates, then the other colors, which are a minority (might be blue for the main character, red – for the enemies) will stand out well in the scenes.

Two or three colors that are close to each other would also work. Various tools for choosing color combinations can help in this matter.

The color proportions can be different. One good option is shown in the example scene above is a proportion like this:

This way, all the colors in a hypercasual game blend well and players enjoy the visual part. In such a scheme, there is one dominant color, followed by a slightly smaller amount of the second one, and a small equal parts of the other colors.

Wrap up

The choice of colors is an important part in creating a visually appealing hypercasual scene, which has its own characteristics. Teams can choose their own color combination for their game using online tools.

When choosing a basic palette, it's important to keep color theory in mind. Even in minimalist games, each color has a particular range of meanings and carries a certain emotion for the player.

A powerful indicator of attention to detail is taking care of absolutely all players, including those with visual or color vision problems.

Color decomposition of top-performing games, playing around with online palette generators, and a basic knowledge of color messaging will keep novice developers from hours spent on creating eye-popping and inappropriate hypercasual scenes.

In a simplistic hypercasual design there are no minor details, be it colors, proportions, or shaders. For those, who want to dive deeper into setting up hypercasual scene, check out my recent Mobidictum guest post with a technical guide to 5 key parameters set up.