• Learn
  • Blog
  • Pricing
  • About
  • Sign in

Colors

A color is a number in Calcapp, just like a date. Knowing that Calcapp represents a date as the number of days that have elapsed since December 30, 1899 can be useful, as you can then subtract one date from another to determine the number of days between them. In contrast, knowing how Calcapp represents colors is rarely useful, so we suggest that you use the multitude of useful formula functions that are available for creating and manipulating colors.

This page discusses the COLOR function, though you will find a complete reference to all functions in the reference sidebar. It closes with a discussion of how Calcapp represents colors, in the off chance that you need to do something not covered by the existing formula functions.

The COLOR function and name field in the color picker

The color picker, which you use to select colors in Calcapp Creator, has a name field where you can enter colors in a variety of formats. The COLOR function recognizes the same formats. In other words, entering “yellow” in the color picker will be recognized as the color yellow, and using the formula COLOR("yellow") will also select the color yellow.

Some color formats support specifying an alpha value and some do not. An alpha value specifies the degree to which the color is transparent, or see-through. An alpha value is normally given as a value between 0 and 1, where 1 means that the color is fully opaque (not see-through) and 0 means that it is fully transparent (fully see-through).

(Alpha values are particularly effective for foreground colors, used for text. For instance, the default color for black text uses an alpha value of 0.87, meaning that the color below shines through to a small extent.)

These are the different color formats which are supported:

Here’s a small sampling of valid text strings representing colors:

red
lime
black
white
antiquewhite
red 500
Deep Purple A700
#f44336
#0091ea
#acc
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%

Named colors

These are the supported named colors, based on a standard for the Web:

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, Calcapp also supports the colors defined by Google’s Material Design visual language. The Material Design palette is made up of colors designed to work well together and is used by the palette view of the color picker. While this color palette is used by Google on Android, its colors work well on iPhone, iPad and the desktop too.

The Material Design palette is made up of colors from a number of named color swatches, 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. Select a Material Design color by first entering the name of the color swatch and then the number. Examples of color names include Red 500, Deep Purple 50 and Cyan A100.

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

How Calcapp represents colors (advanced)

As noted, you probably don’t need to worry about how Calcapp represents colors. If you’re curious, though, here’s a (technical) description of the format:

Colors are 32-bit numbers incorporating color components adhering to the ARGB color model. The least significant eight bits represent the blue color component, the next eight bits represent the green color component and the eight following bits represent the red color component. The most significant eight bits represent the alpha value, where a value of 0 means that the color is fully transparent and a value of 255 (FF in hexadecimal, base 16 notation) means that the color is fully opaque.

In other words, the color red is represented as 0xFFFF0000 in base 16, or 4294901760 in base 10. That means that the formulas COLOR("#ff0000") and HEX2DEC("ffff0000") are actually fully equivalent.