Our new release enables you to customize the colors of your apps. To do so, you use the new color picker that is part of the inspector. To display it, click a color in the inspector and you’re presented with a palette of commonly-used colors:
The palette is based on Google’s Material Design visual language, and is made up of colors designed to work well together. While Google’s color palette is used on Android, its colors work well on iPhone, iPad and the desktop too. Select a color to display its name in the field below the palette. Colors in the palette have names such as “Red 500”.
Of course, you’re not limited to pre-defined colors. Press the button to select any color you desire:
The large rectangular area enables you to select the saturation of the color on the horizontal axis and the vertical axis allows you to select the brigthness. As such, white is in the upper-left corner and black in the lower-left and lower-right corners. The most saturated color is in the upper-right corner. The small strip below the rectangular area allows you to select a hue.
When you select a color by choosing its hue, saturation and brightness, the name
field displays text strings like
#ff0000 (bright red). This is a name uniquely
identifying a color and this format is used pervasively on the Web and
Supported color names
You can enter colors in a variety of formats in the name field. Here’s a small sampling of acceptable values you can enter:
red lime black white antiquewhite red 500 Deep Purple A700 #f44336 #0091ea rgb(255, 0, 0) rgb 255, 0, 0 rgb 100%, 0, 0 hsb 100%, 50%, 100% hsb 255, 128, 255 hsv 100%, 50%, 100% hsv 255, 128, 255 hsv 255 128 100% hsv(255 128 255) hsl 255 100% 100%
A large number of named colors are supported, such as
below for the complete list.
You can also enter colors using the color models RGB, HSL and HSB (also known as HSV). These color models are typically used by graphic designers to describe and reason about colors. RGB stands for red, green, blue and is the most common way of describing colors, as being made up of varying degrees of red, green and blue. HSB stands for hue, saturation, brightness, HSV stands for hue, saturation, value and, finally, HSL stands for hue, saturation, lightness.
In addition to setting colors using the color picker of the inspector, you can
also use formulas to make these decisions while your app is run, based on field
values entered by your user. The new COLOR function takes a single text
parameter and returns a color. That text parameter accepts the same input as the
new color picker, meaning that formulas such as
Purple A700") are valid.
These are the supported named colors:
Material Design colors
In addition to supporting named colors, the new color picker also supports the colors defined by Google’s Material Design visual language, which are displayed in the palette view of the color picker. Each vertical band in the palette is made up of colors from a named color swatch, including Red, Deep Purple, Indigo and Teal. Within a swatch, each color has a numeric name: 50, 100, 200, 300, 400, 500, 600, 700, 800 and 900. We suggest using the 500 colors as backgrounds in your apps.
There are also more saturated colors in each swatch known as accent colors,
which are appropriate for smaller areas (such as the thumb color of a switch
field) and are named A100, A200, A400 and A700. Enter a Material Design color in
the color picker by first entering the name of the color swatch and then the
number. Examples of color names you can enter from the Material Design palette
Deep Purple 50 and
Cyan A100. These names are also
accepted by the COLOR formula function.