Colors

Calcapp provides powerful color capabilities through the COLOR function and supports multiple color formats. This page explains how to use colors in your apps. For additional color functions, see our complete list of color functions.

Color formats overview

Calcapp recognizes the same color formats in both the color picker’s name field and the COLOR function. Whether you type “yellow” in the color picker or use COLOR("yellow")COLOR("yellow") or Color.YellowColor,Yellow in a formula, you’ll get the same result.

Alpha values and transparency

Some color formats support alpha values, which control transparency. Alpha values range from 0 to 1, where:

• 1 = fully opaque (not see-through).
• 0 = fully transparent (completely see-through).

Alpha values work particularly well for text colors. For example, Calcapp’s default black text uses an alpha value of 0.87, allowing the background color to show through slightly.

Supported color formats

Named colors

A comprehensive set of standard web colors. Reference them directly by name or use the syntax Color.Color, followed by the color name, like Color.AliceBlueColor,AliceBlue.

Material Design colors

Google’s Material Design palette provides colors designed to work harmoniously together. Use the same syntax as named colors, such as Color.LightBlue300Color,LightBlue300.

Hex notation

The standard web format using a hash symbol followed by hexadecimal values. Colors use the RGB color model with values from 0-255 for each component:

• #ff0000 = pure red (red: 255, green: 0, blue: 0).
• #f00 = shorthand for #ff0000.

All hex colors are fully opaque.

Color models

Calcapp supports several color models:

• RGB/RGBA: Red, green, blue values (0-255), with optional alpha.
• HSL/HSLA: Hue, saturation, lightness (0-100%), with optional alpha.
• HSB/HSBA (HSV/HSVA): Hue, saturation, brightness (0-100%), with optional alpha.

For HSL and HSB models:

• Hue has no defined range.
• Saturation and lightness/brightness: 0-100%.
• Alpha values: 0-1.
• Numbers can be percentages (except hues).
• Parentheses and commas are optional.

Examples

Here are examples of valid color format strings:

Named colors:

• red, lime, black, white, antiquewhite

Material Design colors:

• red 500, Deep Purple A700

Hex notation:

• #f44336, #0091ea, #acc

Color models:

• 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

Calcapp supports all standard web colors based on the CSS Color 4 specification:

Material Design colors

The Material Design color palette provides carefully curated colors that work harmoniously together. This palette appears in the color picker’s palette view and works well across all platforms—Android, iPhone, iPad and desktop.

How Material Design colors work

The palette organizes colors into named swatches (Red, Deep Purple, Indigo, Teal, etc.). Each swatch contains:

Standard colors with numeric names:

• 50, 100, 200, 300, 400, 500, 600, 700, 800, 900.
• We recommend using 500-level colors for backgrounds.

Accent colors for highlights and smaller elements:

• A100, A200, A400, A700.
• Perfect for switch thumbs, buttons and other accent elements.

Usage

Specify Material Design colors by combining the swatch name with the numeric level: Red 500, Deep Purple 50, 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

Advanced: How Calcapp represents colors

This section covers technical details that most users don’t need to know.

Internally, Calcapp stores colors as 32-bit numbers using the ARGB color model. Colors are distinct from regular numbers, so you need conversion functions:

• TOCOLOR: Convert a number to a color.
• TONUMBER: Convert a color to a number.

Bit structure

The 32 bits break down as follows (from most to least significant):

• Bits 24-31: Alpha (0 = transparent, 255 = opaque).
• Bits 16-23: Red component (0-255).
• Bits 8-15: Green component (0-255).
• Bits 0-7: Blue component (0-255).

Example

Pure red has the value 0xFFFF0000 (base 16) or 4294901760 (base 10). These formulas are equivalent:

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

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