Colors

The colors on Envision dashboards are mostly configured in terms of hues, with the possibility to specify a precise color when necessary. This reliance on hues allows Envision to pick the proper luminosity and saturation to create a more harmonious dashboard, instead of relying on the script author for this harmony.

Hues

A hue is a collection of similar colors, a gradient from lightest to darkest. There are nine named hues:

red
orange
yellow
green
azure
blue
indigo
violet
pink

In addition, script authors can create their own hues by specifying one of the colors present on the gradient, using the hash-and-hexadecimal syntax #F00 (three digits) or #FF0000 (six digits).

Colors

To obtain a specific color from a gradient, Envison uses the standard blue/700 syntax used in many design systems, where the hue is followed by a number between 50 (lightest) and 900 (darkest).

This also applies to hash-and-hexadecimal syntax, so #FC9/500 creates the orange gradient based on color #FC9, and then picks the midpoint of that gradient.

To specify an exact color, use the bang syntax #FC9!, which ensures that the specified color is exactly #FC9.

Automatic color selection

The hues on the dashboard are specified through one of the many color-based StyleCode properties, such as tileColor:

show button "Back to homepage" { 
    href: "https://go.lokad.com/" ;
    tileColor: orange }

The dashboard then uses the hue to derive the necessary colors. For example, a button’s background color is the /700 of its hue, but becomes the darker /800 when hovering. Text is usually the /700, borders are usually /200, and backgrounds are /100 or even /50.

When a specific color is provided, the dashboard will use precisely that color, which may lead to inconsistent saturation and luminosity if special care is not taken to pick the right colors.