Using colour values

In Squirrel you can set a colour property by binding it to a colour value in the spreadsheet. This article will describe the different colour formats that can be used.

 

Colour name

A descriptive colour name can be used e.g. red, green, blue, hotpink, mediumseagreen.

The advantage of using colour names is that you can see at a glance what the colour will be, in a project where several colour values are listed in the spreadsheet, this can be very useful. There are 140 colour names that you can use that are supported by modern browsers, click on the following links for a full list:

• https://www.rapidtables.com/web/css/css-color.html
• https://www.w3schools.com/cssref/css_colors.asp

 

Hex value

A Hex value is written as follows:

Starting with a hashtag (#) and then followed by pairs of letters or numbers that represent the red, green and blue values. Each colour is defined by a value between 00 and FF, where a number is used to represent a value of 1 to 9, and the letters A to F represent a value of 10 to 15 (where A=10, B=11 and so on).

If you use the colour picker in the property panel, the colour that you choose will be represented by a Hex value in the property field:

Hex colour values are supported by all browsers.

 

RGB value

An RGB (Red, Green, Blue) colour value should be written as follows:

Where the three red, green and blue values, each ranging from 0 to 255, combine to produce the desired colour. A value of 0 means that none of the colour is being used, whereas a value of 255 means that all of that colour is being used.

RGB colour values are entered into the spreadsheet as text not as an expression and therefore should not have an = before the value. If you want to generate a colour value from data in the spreadsheet, use a formula similar to:

="RGB(" & C2 & "," & C3 & "," & C4 & ")"

RGB colour values are supported by all major browsers.

 

HSL value

A HSL (Hue, Saturation, Lightness) colour value should be written as follows:

The hue value is the representation of a degree on a colour wheel, ranging from 0 to 360, where 0 is red, 120 is green and 240 is blue. The saturation value is a percentage, where 0% is full grey, but 100% is full colour. The lightness value is also a percentage, where 0% would cause it to be black, 100% would cause it to be white, but 50% would mean that the colour was unaffected by lightness either way.

Percentage values can also be written as decimals e.g. 0.5 (50%)

HSL colour values are entered into the spreadsheet as text not as an expression and therefore should not have an = before the value. If you want to generate a colour value from data in the spreadsheet, use a formula similar to:

="HSL(" & C2 & "," & C3 & "," & C4 & ")"

HSL colour values are supported by most major browsers.

More details on HSL colours can be found at https://www.w3schools.com/css/css_colors_hsl.asp.

 

Alternative formats

RGBA and HSLA colour value formats can also be used but the alpha/opacity value will be ignored as opacity is controlled by a separate property in Squirrel.

There are three other valid options (HWB, CMYK and NCOL) but these are much less widely used, more details on these, and all the above methods, can be found here.