Hue New?

One only has to read a few tweets about the Uber or Instagram icon re-design to know how passionate people feel about mobile app design. Creating a Color blog 1user-friendly (and pleasing) interface is as important as creating code that functions properly. Many App Inventor users assume that all UI features are found in the Designer. However, this is not the case in terms of colors. Over and over, I hear people reveal their frustration about the limited amount of colors available in App Inventor. At first glance, the Designer does seem to only offer a list of 8 saturated colors, along with white, black and a few grays. But really there are a multitude of color options if you know where to look. All you need to do is head over to the Blocks Editor.

Notice in the left menu, under “Built-in” there is an item called: Colors. Clicking on it reveals a list of color blocks that would once again lead you to believe that saturated colors are indeed the only options. Don’t be fooled.Color blog 2.png

Once you click on a color block, it will appear in the Viewer and clicking again on the actual color inside the block reveals a 7 x 10 grid of color hues! Hue new? Now you can select pastels, deeps and a range in between.

Color blog 3.png
What can you do with all of these color options? Well, since they are housed in the Blocks Editor, you can incorporate them into your code. For example, you can change the color of a component, (a button, a label, a screen background, a layout) by using the screen initialize block.

Color blog 4When your app launches or when you make a change in the Designer, the components will receive their newly hued instructions and your previously boring grey buttons will come to life!

Color blog 5.png


2 Responses

  1. Thanks Felicia for the post. Hue New? has inspired our tool MakeColors. Create custom colors for app built using App Inventor 2.

    Your discovery of the 70-color palette was sweet for a creative like myself. But 84 colors is not enough to create winning apps.

    Thanks again for the inspiration and continued success on the App Inventor 2 book.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: