@xtia/rgba

RGBA

A class to represent colours, designed for fast read/writing canvas ImageData

Install

npm i @xtia/rgba

Examples

import { RGBA } from "@xtia/rgba";

// specifying & mixing colours
const green = parseRGBA("#0f0");
const black = new RGBA(0, 0, 0);
const darkRed = RGBA.fromHSL(0, 1, .25);
const darkGreen = green.blend(black, .5);
const darkBlue = parseRGBA("#000080");
const pink = parseRGBA("rgb(255, 130, 200)");
const darkPurple = darkRed.add(darkBlue);
const yellow = green.replace({red: 255});
const blue = yellow.inverted;

// transparency:
const translucentRed = new RGBA(255, 0, 0, 128);
// or
const translucentGreen = green.fade(.5);

// helper proxy (C.x___)
import { C } from "@xtia/rgba";
const colour = C.xabc123; // same as parseRGBA("#abc123")

// use hex code
document.body.style.backgroundColor = darkRed.hexCode;

// read from canvas
const colour = new RGBA(imageData.data.slice(idx, idx + 4));

// write to canvas
imageData.data.set(colour.asBytes, idx);

// import named colours
import { orangered, rebeccapurple } from "@xtia/rgba";

// use directly with Jel
import { $ } from "@xtia/jel";

const el = $.div({
	style: {
		color: darkBlue,
		border: `3px solid ${darkBlue.saturate(.5)}`
	},
});
el.style.background = orangered.blend(darkRed, .25);

// and Timeline
import { animate } from "@xtia/timeline";

animate(1000)
	.tween(black, rebeccapurple)
	.apply(c => el.style.background = c);

VS Code integration

Use the @xtia/rgba Swatches VS Code extension to add interactive swatches to the C.x___ helper syntax.

Other features

Included Palettes

import { egaPalette, c64Palette, petrichor, sorbet }
	from "@xtia/rgba/palettes";

element.style.background = egaPalette[12];
element.style.foreground = petrichor.petal;

Palette Creation

Create a quantised palette of desired size from a list of colours:

import { createPalette } from "@xtia/rgba";

const myPalette = createPalette(colours, 8);