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.

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);

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.

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);

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.

Returns the eight bit channel value.

const value = Sprites.Colour.FromLevels(15, 4);
Sprites.Ui.Dom.Text('15 at 4 bits = ', value);

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.

Returns the packed colour.

const packed = Sprites.Colour.Pack(255, 128, 0, 255);
Sprites.Ui.Dom.Text('packed = ', packed);

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.

Returns the grid element.

const swatches = [0xff4444ff, 0x44ff44ff, 0x4444ffff, 0xffff44ff];
const selected = Sprites.Reactive.Value(0);
Sprites.Colour.Palette(swatches, selected);
Sprites.Ui.Dom.Text('selected = ', selected);

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.

Returns nothing.

const packed = 0xff8000ff;
const colour = Sprites.Reactive.Value(packed);
Sprites.Colour.Picker(colour, 8, true);

Sprites.Colour.SelectedRing String

The ring drawn inside the selected swatch, over any colour. Palette sets it as the box-shadow of the chosen swatch, a two pixel white inset over a two pixel black inset, so the mark stays visible on light and dark colours alike.

Sprites.Ui.Dom.Tag('div', () => {
  Sprites.Ui.Dom.Style('width', '40px');
  Sprites.Ui.Dom.Style('height', '40px');
  Sprites.Ui.Dom.Style('border-radius', '6px');
  Sprites.Ui.Dom.Style('background', '#4488ff');
  Sprites.Ui.Dom.Style('box-shadow', Sprites.Colour.SelectedRing);
});

Sprites.Colour.SwatchSize Number

The side of a palette swatch, in pixels. Palette uses it for the width of each grid column and the height of each swatch, so every colour cell is this many pixels square.

const side = Sprites.Colour.SwatchSize;
Sprites.Ui.Dom.Text('swatch side = ', side, 'px');

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.

Returns the channel level.

const level = Sprites.Colour.ToLevels(255, 4);
Sprites.Ui.Dom.Text('255 at 4 bits = ', level);

Sprites.Colour.Unpack Object

Sprites.Colour.Unpack(n)

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

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

const packed = 0xff8000ff;
const c = Sprites.Colour.Unpack(packed);
Sprites.Ui.Dom.Text('r=', c.r, ' g=', c.g, ' b=', c.b, ' a=', c.a);