Sprites.Colour

Colour values and the basic colour components.

Sprites.Colour

Sprites.Colour.Channel Number

Sprites.Colour.Channel(n, place)

One 0 to 255 channel of a packed colour, shifted down by place first. Red sits at 16777216, green at 65536, blue at 256 and alpha at 1, so the place picks which channel to read.

InputTypeDescription
nNumberA packed RGBA colour.
placeNumberThe channel's place: 16777216 red, 65536 green, 256 blue, 1 alpha.

Returns the channel value, 0 to 255.

const packed = Sprites.Colour.Pack(255, 128, 0, 255);
const green = Sprites.Colour.Channel(packed, 65536);
Sprites.Ui.Dom.Text('green = ', green);
The green channel read back out of a packed colour.

Sprites.Colour.Css String

Sprites.Colour.Css(n)

The CSS form of a packed colour, as an rgba(...) string with alpha as a fraction. Use it to hand a packed colour to a style.

InputTypeDescription
nNumberA packed RGBA colour.

Returns the CSS colour string.

const orange = Sprites.Colour.Pack(255, 128, 0, 255);
const css = Sprites.Colour.Css(orange);
Sprites.Ui.Dom.Text(css);
A packed colour as a CSS string.

Sprites.Colour.FromHex Number

Sprites.Colour.FromHex(hex)

The packed colour of a #rgb or #rrggbb string, fully opaque. Handy for turning a written colour into the packed form the components use.

InputTypeDescription
hexStringA #rgb or #rrggbb colour.

Returns the packed colour.

const packed = Sprites.Colour.FromHex('#ff8000');
const css = Sprites.Colour.Css(packed);
Sprites.Ui.Dom.Text('css = ', css);
A hex string packed, then read back as CSS.

Sprites.Colour.FromLevels Number

Sprites.Colour.FromLevels(lv, bits)

Scale a channel level on a 0..2^bits-1 range back up to eight bits. The inverse of ToLevels, so an N bit picker's value becomes a stored channel.

InputTypeDescription
lvNumberA channel level, from 0 to 2^bits-1.
bitsNumberThe bits per channel the level is on.

Returns the eight bit channel value.

const value = Sprites.Colour.FromLevels(15, 4);
Sprites.Ui.Dom.Text('15 at 4 bits = ', value);
The top four bit level maps to full eight bit white.

Sprites.Colour.Pack Number

Sprites.Colour.Pack(r, g, b, a)

Pack four 0 to 255 channels into one integer, red highest and alpha lowest, so a colour stays a plain safe number. This is the value a freeform pixel cell holds.

InputTypeDescription
rNumberRed, 0 to 255.
gNumberGreen, 0 to 255.
bNumberBlue, 0 to 255.
aNumberAlpha, 0 to 255.

Returns the packed colour.

const packed = Sprites.Colour.Pack(255, 128, 0, 255);
Sprites.Ui.Dom.Text('packed = ', packed);
Four channels become one integer.

Sprites.Colour.Palette Element

Sprites.Colour.Palette(colours, selected)

A grid of colours, ceil(sqrt(n)) columns wide, bound to a selected index. A click sets selected to the swatch's position, and that swatch shows a ring. colours may be a plain array or a reactive value of one, so a recolour shows at once.

InputTypeDescription
coloursArray or Sprites.Reactive.ValueThe packed colours to show.
selectedSprites.Reactive.ValueThe selected index. A click sets it.

Returns the grid element.

const swatches = ['#f44', '#4f4', '#44f', '#ff4'].map(Sprites.Colour.FromHex);
const selected = Sprites.Reactive.Value(0);
Sprites.Colour.Palette(swatches, selected);
Sprites.Ui.Dom.Text('selected = ', selected);
Pick a swatch to set the index.

Sprites.Colour.Picker Void

Sprites.Colour.Picker(colour, bits, allowAlpha)

A swatch over sliders with number inputs for red, green and blue, and alpha when allowAlpha is set. It reads and writes the packed colour in place. bits is the channel depth the sliders step over, so a four bit picker offers sixteen levels a channel, an eight bit picker offers 256.

InputTypeDescription
colourSprites.Reactive.ValueThe packed colour it edits in place.
bitsNumberThe bits per channel the sliders step over.
allowAlphaBooleanAdds an alpha row.

Returns nothing.

const packed = Sprites.Colour.FromHex('#ff8000');
const colour = Sprites.Reactive.Value(packed);
Sprites.Colour.Picker(colour, 8, true);
Drag a slider to edit one channel; the swatch follows.

Sprites.Colour.ToLevels Number

Sprites.Colour.ToLevels(v8, bits)

Scale one eight bit channel to a value on a 0..2^bits-1 range, so a picker of N bits per channel edits the colour at its own granularity.

InputTypeDescription
v8NumberAn eight bit channel value, 0 to 255.
bitsNumberThe bits per channel to scale to.

Returns the channel level.

const level = Sprites.Colour.ToLevels(255, 4);
Sprites.Ui.Dom.Text('255 at 4 bits = ', level);
Full eight bit white sits at level fifteen on four bits.

Sprites.Colour.Unpack Object

Sprites.Colour.Unpack(n)

A packed colour back to its { r, g, b, a } channels, each 0 to 255.

InputTypeDescription
nNumberA packed RGBA colour.

Returns the { r, g, b, a } channels.

const packed = Sprites.Colour.FromHex('#ff8000');
const c = Sprites.Colour.Unpack(packed);
Sprites.Ui.Dom.Text('r=', c.r, ' g=', c.g, ' b=', c.b, ' a=', c.a);
One integer back to four channels.