• Learn
  • Blog
  • Pricing
  • About
  • Sign in

Feature: The new color picker

The new color picker allows you to select the colors used in your app. You can select colors either from a palette with colors that work well together or any color by selecting a hue, saturation and brightness. It also supports entering named colors and colors from the color models RGB, HSL and HSB (HSV).

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 color picker displaying its palette

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 color picker displaying its full range of colors

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 elsewhere.

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 yellow and green. See 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 COLOR("red") and COLOR("Deep Purple A700") are valid.

Named colors

These are the supported named colors:

aliceblue
antiquewhite
aqua
aquamarine
azure
beige
bisque
black
blanchedalmond
blue
blueviolet
brown
burlywood
burntsienna
cadetblue
chartreuse
chocolate
coral
cornflowerblue
cornsilk
crimson
cyan
darkblue
darkcyan
darkgoldenrod
darkgray
darkgreen
darkgrey
darkkhaki
darkmagenta
darkolivegreen
darkorange
darkorchid
darkred
darksalmon
darkseagreen
darkslateblue
darkslategray
darkslategrey
darkturquoise
darkviolet
deeppink
deepskyblue
dimgray
dimgrey
dodgerblue
firebrick
floralwhite
forestgreen
fuchsia
gainsboro
ghostwhite
gold
goldenrod
gray
green
greenyellow
grey
honeydew
hotpink
indianred
indigo
ivory
khaki
lavender
lavenderblush
lawngreen
lemonchiffon
lightblue
lightcoral
lightcyan
lightgoldenrodyellow
lightgray
lightgreen
lightgrey
lightpink
lightsalmon
lightseagreen
lightskyblue
lightslategray
lightslategrey
lightsteelblue
lightyellow
lime
limegreen
linen
magenta
maroon
mediumaquamarine
mediumblue
mediumorchid
mediumpurple
mediumseagreen
mediumslateblue
mediumspringgreen
mediumturquoise
mediumvioletred
midnightblue
mintcream
mistyrose
moccasin
navajowhite
navy
oldlace
olive
olivedrab
orange
orangered
orchid
palegoldenrod
palegreen
paleturquoise
palevioletred
papayawhip
peachpuff
peru
pink
plum
powderblue
purple
rebeccapurple
red
rosybrown
royalblue
saddlebrown
salmon
sandybrown
seagreen
seashell
sienna
silver
skyblue
slateblue
slategray
slategrey
snow
springgreen
steelblue
tan
teal
thistle
tomato
turquoise
violet
wheat
white
whitesmoke
yellow
yellowgreen

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 include Red 500, Deep Purple 50 and Cyan A100. These names are also accepted by the COLOR formula function.

Red

50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700

Pink

50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700

Purple

50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700

Deep Purple

50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700

Indigo

50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700

Blue

50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700

Light Blue

50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700

Cyan

50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700

Teal

50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700

Green

50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700

Light Green

50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700

Lime

50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700

Yellow

50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700

Amber

50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700

Orange

50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700

Deep Orange

50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700

Brown

50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700

Grey

50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700

Blue Grey

50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
« Calcapp is moving to a new cloud provider Feature: Custom app colors »