Canvas SDK

Getting started

How environments work

Toolbar and footer

Parameters and controls

Text and expressions

Marking answers

Chalk schema

Data-driven style

?

Canvas SDK
Colour

/

Colour

The colour vocabulary an author writes and a surface resolves: hues and their tones, the ramps, the surface paints, and the CSS each becomes.

@internote/canvas-sdk46 exports

On this page

Functions Constants Interfaces Types

Authors write colours by name (blue, light-blue, dark-blue, neutral) or as literals (hex(0064FA), rgb(0, 100, 250)). Named colours follow the reader's light or dark theme; literals are drawn exactly as written.

To use a colour an author wrote:

colourCss converts it to a CSS colour for a fill or stroke.
blendedColourCss does the same, blending while a !cue.to colour change is under way.
parseColour parses it, if you need its hue and tone separately.

To give one of your attributes the language's colour type, use colourTypeSpec, or colourTypeWith to narrow or extend it.

Heatmaps and contours colour a range of values rather than a single mark. surfacePaintOf reads their colour, which may also be multicolour or temperature, and surfacePaintAt gives the paint at any point in the range.

#Functions

The CSS colour a ramp gives a place along it — the host's half of an opaque application (D69).

blendedColourCss

Converts a colour attribute to CSS, blending from the old colour to the new one while a !cue.to change is under way.

Converts a colour attribute value such as blue or hex(0064FA) to a CSS colour, or returns fallback if it is not a colour.

Converts a colour attribute value to the CSS for its hue at another tone, so blue at light gives var(--blue-pale).

Returns the opacity for position t, 0 to 1, along a single-colour surface's range: floor at the low end, fully opaque at the high end.

Returns step 2 of a colour's hue as CSS, the hover background for a control tinted with hueTint.

Returns the hue of a colour attribute value without its tone, so dark-blue gives 'blue', or null for the neutral, a literal or a non-colour.

Returns any numbered step, 1 to 10, of a colour's hue as CSS.

Returns the three CSS colours a hue's scale runs through, lightest to darkest, or null if the value is not a hue.

Returns step 10 of a colour's hue as CSS, the text colour for a label on a hueTint background.

Returns the palest step of a colour's hue as CSS, the background for a chip or a row in that colour.

Returns the CSS variable for a hue at a tone, so hueToneVar('blue', 'dark') is 'var(--blue-deep)'.

isColourLiteral

Whether a value is a compiled colour literal, { r, g, b } (D66).

The compiler's declarations of the colour types: HUE_TYPE and PAINT_TYPE, and their surface twins.

Parses a colour attribute value such as light-blue or hex(0064FA) into a Colour, or returns null if it is not a colour.

parseSurfacePaint

Parses a surface-colour value into the colour scale a heatmap or contour draws with, or returns null if it is not a valid colour.

Returns the CSS colour at position t, 0 to 1, along a list of colour stops, blending linearly between neighbours.

Returns the hex stops for multicolour or temperature, or null for any other value.

resolvedColourCss

Converts a parsed Colour to a CSS colour for a fill or stroke.

Returns the fill and opacity a heatmap or contour draws at position t, 0 to 1, of its value range, blending across a !cue.to colour change.

Parses a heatmap, contour or choropleth's colour into the scale it draws with, accepting multicolour and temperature as well as colours.

Turns a parsed Colour back into the text an author would write, the inverse of parseColour.

A colour value as the text an author writes: a name as it is, a compiled literal { r, g, b } as rgb(r, g, b).

#Constants

Every colour name a colour attribute accepts: each hue in its three tones, then neutral.

The hues a key leaves without a colour are dealt, in order.

The type name of a colour NAME: one of COLOUR_NAMES.

The nine colour names an author can write, such as blue or teal, in the order the editor's swatch picker lists them.

The colour name neutral, which paints a mark in the same colour as body text.

The type name of a colour as an attribute takes one: a name, or a rgb(…)/hex(…) literal.

The hex colours of the multicolour scale for heatmaps and contours, violet for low values through to red for high.

The two named colour scales a value-mapped surface accepts on top of ordinary colours.

The type name of a ramp: a value that may stand on the right of -> and turn a number into a colour (D69).

The compiler's declaration of RAMP_TYPE: the named ramps and the nine bare hues — a hue's ramp is its own run, pale to deep — each applying a number to a colour with no logic in the library.

SURFACE_HUE_TYPE

The type name of a surface's colour name: one of the nine bare hues, SURFACE_NAMES.

The colour names a heatmap, contour or other value-mapped surface accepts: the nine plain hues, with no tones and no neutral.

SURFACE_PAINT_TYPE

The type name of a surface's colour: a bare hue, or a literal.

TEMPERATURE_STOPS

The hex colours of the temperature scale for heatmaps and contours: dark blue, light blue, white, light red, dark red.

The three shades a hue comes in: light, base and dark.

#Interfaces

ColourVocabulary

Options for parseColour: whether to accept every colour name, or only those a value-mapped surface allows.

A parsed named colour such as blue, light-blue or dark-blue.

A parsed hex(…) or rgb(…) colour, which is drawn exactly as written in both themes.

The parsed colour neutral, the body-text colour.

The colour scale a heatmap or contour draws with, as returned by parseSurfacePaint.

#Types

A colour attribute value after parsing: a named hue at a tone, neutral, or a literal hex or RGB colour.

A colour name from HUES, such as 'blue'.

A shade from TONES: 'light', 'base' or 'dark'.

Last updated 26 September 2026

← PreviousMarking answers Next →Host

On this page

Functions Constants Interfaces Types

Privacy Terms Contact Support