Colors

This page discusses the COLOR function. Refer to our formula documentation for the complete list of color 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 either of formulas COLOR("yellow")COLOR("yellow") or Color.YellowColor,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:

• Named colors. A large number of named colors may be given. These colors can also be referenced by typing Color.Color,, followed by the color name, like Color.AliceBlueColor,AliceBlue. See below for a complete list.

• Material Design colors. Colors that make up Google’s Material Design palette are recognized. These colors can also be referenced by typing Color.Color,, followed by the color name, like Color.LightBlue300Color,LightBlue300. See below for a complete list.

• Hex notation. Colors specified using hex notation encode the red, green and blue color components using hex notation, with a leading hash symbol (“#”). All colors are fully opaque when specified using hex notation. Each color component is given as a value between 0 and 255. Color components are written using hex notation (base 16), though, and 255 in hexadecimal is “ff”. To specify the color red, where red is fully saturated and there is not a hint of green or blue, you write “#ff0000” (red is at 255 and green and blue are at zero). As a shortcut, you can write some colors using only three characters, so “#ff0000” can also be written “#f00” (which Calcapp takes to mean “#ff0000”). Hex notation is used pervasively on the Web and there are lots of resources that specify colors using this format.

• Colors through color models. Colors specified using the RGB, RGBA, HSL, HSLA, HSB (HSV) and HSBA (HSVA) color models can also be used. RGB and RGBA color components are given as numbers between 0 and 255 (inclusive) while the parameters for the other color models are given as numbers between 0 and 100 (inclusive), with the exceptions being hues, which have no defined range, and alpha values, which are given as numbers between 0 and 1 (inclusive). Numbers may also be specified as percentages, except for hues. Parentheses are optional, as are commas.

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:

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

Pink

Purple

Deep Purple

Indigo

Blue

Light Blue

Cyan

Teal

Green

Light Green

Lime

Yellow

Amber

Orange

Deep Orange

Brown

Grey

Blue Grey

How Calcapp represents colors (advanced)

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. A color is distinct from a number, meaning that you need to use the TOCOLOR function to convert a number to a color and the TONUMBER function to convert a color to a number.

The least significant eight bits of a color 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 these formulas are fully equivalent:

COLOR("#ff0000")COLOR("#ff0000")

TOCOLOR(HEX2DEC("ffff0000"))TOCOLOR(HEX2DEC("ffff0000"))