@versatiles/style 5.2.6 → 5.2.7

package/src/color/random.ts

@@ -0,0 +1,165 @@
+import { HSV } from './hsv.js';
+import { mod } from './utils.js';
+
+
+type Range = [number, number];
+interface ColorInfo {
+	hueRange: Range | null;
+	lowerBounds: Range[];
+	saturationRange: Range;
+	brightnessRange: Range;
+}
+
+export interface RandomColorOptions {
+	seed?: string;
+	hue?: number | string;
+	opacity?: number;
+	luminosity?: number | string;
+	saturation?: number | string;
+}
+
+let colorDictionary = new Map<string, ColorInfo>();
+
+export default function randomColor(options?: RandomColorOptions): HSV {
+	if (colorDictionary.size === 0) colorDictionary = initColorDictionary();
+
+	options ??= {};
+
+	let seed = inputToSeed(options.seed);
+
+	const H = pickHue(options);
+	const S = pickSaturation(H, options);
+	const V = pickBrightness(H, S, options);
+
+	return new HSV(H, S, V, options.opacity ?? 1);
+
+
+
+	function pickHue(options: RandomColorOptions): number {
+		return mod(randomWithin(getHueRange(options.hue)), 360);
+
+		function getHueRange(hue?: number | string): Range {
+			if (typeof hue === 'number') {
+				hue = mod(hue, 360);
+				return [hue, hue];
+			}
+
+			if (typeof hue === 'string') {
+				const color = colorDictionary.get(hue);
+				if (color?.hueRange) return color.hueRange;
+			}
+
+			return [0, 360];
+		}
+	}
+
+	function pickSaturation(hue: number, options: RandomColorOptions): number {
+		if (options.hue === 'monochrome') return 0;
+		if (options.luminosity === 'random') return randomWithin([0, 100]);
+
+		let [sMin, sMax] = getColorInfo(hue).saturationRange;
+
+		if (options.saturation === 'strong') return sMax;
+
+		switch (options.luminosity) {
+			case 'bright': sMin = 55; break;
+			case 'dark': sMin = sMax - 10; break;
+			case 'light': sMax = 55; break;
+			default:
+		}
+
+		return randomWithin([sMin, sMax]);
+	}
+
+	function pickBrightness(h: number, s: number, options: RandomColorOptions): number {
+		let bMin = getMinimumBrightness(h, s), bMax = 100;
+
+
+		if (typeof options.luminosity === 'number') {
+			bMin = options.luminosity;
+			bMax = options.luminosity;
+		} else {
+			switch (options.luminosity) {
+				case 'dark': bMax = Math.min(100, bMin + 20); break;
+				case 'light': bMin = (bMax + bMin) / 2; break;
+				case 'random': bMin = 0; bMax = 100; break;
+				default:
+			}
+		}
+
+		return randomWithin([bMin, bMax]);
+
+		function getMinimumBrightness(h: number, s: number): number {
+			const { lowerBounds } = getColorInfo(h);
+
+			for (let i = 0; i < lowerBounds.length - 1; i++) {
+				const [s1, v1] = lowerBounds[i];
+				const [s2, v2] = lowerBounds[i + 1];
+				if (s >= s1 && s <= s2) {
+					const m = (v2 - v1) / (s2 - s1), b = v1 - m * s1;
+					return m * s + b;
+				}
+			}
+
+			return 0;
+		}
+	}
+
+	function randomWithin(range: Range): number {
+		//Seeded random algorithm from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
+		seed = (seed * 9301 + 49297) % 233280;
+		return Math.floor(range[0] + seed / 233280.0 * (range[1] - range[0]));
+	}
+}
+
+
+function inputToSeed(input: number | string | null | undefined): number {
+	if (input == null) return 0;
+	if (typeof input === 'number') return input;
+
+	let i = 0;
+	for (let p = 0; p < input.length; p++) i = (i * 0x101 + input.charCodeAt(p)) % 0x100000000;
+	return i;
+}
+
+
+
+function initColorDictionary(): Map<string, ColorInfo> {
+	const dict = new Map<string, ColorInfo>();
+
+	const defineColor = (name: string, hueRange: [number, number] | null, lowerBounds: [number, number][]): void => {
+		const [greyest] = lowerBounds;
+		const colorful = lowerBounds[lowerBounds.length - 1];
+
+		dict.set(name, {
+			hueRange,
+			lowerBounds,
+			saturationRange: [greyest[0], colorful[0]],
+			brightnessRange: [colorful[1], greyest[1]],
+		});
+	};
+
+	defineColor('monochrome', null, [[0, 0], [100, 0]]);
+	defineColor('red', [- 26, 18], [[20, 100], [30, 92], [40, 89], [50, 85], [60, 78], [70, 70], [80, 60], [90, 55], [100, 50]]);
+	defineColor('orange', [18, 46], [[20, 100], [30, 93], [40, 88], [50, 86], [60, 85], [70, 70], [100, 70]]);
+	defineColor('yellow', [46, 62], [[25, 100], [40, 94], [50, 89], [60, 86], [70, 84], [80, 82], [90, 80], [100, 75]]);
+	defineColor('green', [62, 178], [[30, 100], [40, 90], [50, 85], [60, 81], [70, 74], [80, 64], [90, 50], [100, 40]]);
+	defineColor('blue', [178, 257], [[20, 100], [30, 86], [40, 80], [50, 74], [60, 60], [70, 52], [80, 44], [90, 39], [100, 35]]);
+	defineColor('purple', [257, 282], [[20, 100], [30, 87], [40, 79], [50, 70], [60, 65], [70, 59], [80, 52], [90, 45], [100, 42]]);
+	defineColor('pink', [282, 334], [[20, 100], [30, 90], [40, 86], [60, 84], [80, 80], [90, 75], [100, 73]]);
+
+	return dict;
+}
+
+
+function getColorInfo(hue: number): ColorInfo {
+	hue = mod(hue, 360);
+	if (hue >= 334) hue -= 360;
+
+	for (const color of colorDictionary.values()) {
+		if (color.hueRange && hue >= color.hueRange[0] && hue <= color.hueRange[1]) {
+			return color;
+		}
+	}
+	throw Error('Color hue value not found');
+}

package/src/color/rgb.test.ts

@@ -0,0 +1,227 @@
+import { RGB } from './rgb.js';
+import { HSL } from './hsl.js';
+import { HSV } from './hsv.js';
+
+describe('RGB Class', () => {
+
+	test('constructor initializes values correctly with clamping', () => {
+		const color = new RGB(300, -50, 500, 2);
+		expect(color.asArray()).toStrictEqual([255, 0, 255, 1]);
+
+		const colorNegative = new RGB(-10, -20, -30, -1);
+		expect(colorNegative.asArray()).toStrictEqual([0, 0, 0, 0]);
+	});
+
+	test('asArray returns the correct array representation', () => {
+		const color = new RGB(128, 64, 255, 0.5);
+		expect(color.asArray()).toStrictEqual([128, 64, 255, 0.5]);
+	});
+
+	test('clone creates a new instance with identical values', () => {
+		const color = new RGB(128, 255, 64, 0.8);
+		const clone = color.clone();
+		expect(clone).toBeInstanceOf(RGB);
+		expect(clone).toEqual(color);
+		expect(clone).not.toBe(color);
+	});
+
+	test('asString returns correct RGB/RGBA string', () => {
+		const color1 = new RGB(255, 128, 64);
+		expect(color1.asString()).toBe('rgb(255,128,64)');
+
+		const color2 = new RGB(255, 128, 64, 0.5);
+		expect(color2.asString()).toBe('rgba(255,128,64,0.5)');
+	});
+
+	test('asHex returns correct hexadecimal representation', () => {
+		const color1 = new RGB(255, 128, 64);
+		expect(color1.asHex()).toBe('#FF8040');
+
+		const color2 = new RGB(255, 128, 64, 0.5);
+		expect(color2.asHex()).toBe('#FF804080');
+	});
+
+	describe('color conversion', () => {
+		test('asHSL converts RGB to HSL correctly', () => {
+			const hsl = new RGB(255, 0, 0).asHSL();
+			expect(hsl).toBeInstanceOf(HSL);
+			expect(hsl.asArray().map(value => Math.round(value)))
+				.toStrictEqual([0, 100, 50, 1]);
+
+			expect(RGB.parse('#000000').asHSL().round().asArray()).toStrictEqual([0, 0, 0, 1]);
+			expect(RGB.parse('#FFFFFF').asHSL().round().asArray()).toStrictEqual([0, 0, 100, 1]);
+			expect(RGB.parse('#FF0000').asHSL().round().asArray()).toStrictEqual([0, 100, 50, 1]);
+			expect(RGB.parse('#FF8000').asHSL().round().asArray()).toStrictEqual([30, 100, 50, 1]);
+			expect(RGB.parse('#FFFF00').asHSL().round().asArray()).toStrictEqual([60, 100, 50, 1]);
+			expect(RGB.parse('#80FF00').asHSL().round().asArray()).toStrictEqual([90, 100, 50, 1]);
+			expect(RGB.parse('#00FF00').asHSL().round().asArray()).toStrictEqual([120, 100, 50, 1]);
+			expect(RGB.parse('#00FF80').asHSL().round().asArray()).toStrictEqual([150, 100, 50, 1]);
+			expect(RGB.parse('#00FFFF').asHSL().round().asArray()).toStrictEqual([180, 100, 50, 1]);
+			expect(RGB.parse('#0080FF').asHSL().round().asArray()).toStrictEqual([210, 100, 50, 1]);
+			expect(RGB.parse('#0000FF').asHSL().round().asArray()).toStrictEqual([240, 100, 50, 1]);
+			expect(RGB.parse('#8000FF').asHSL().round().asArray()).toStrictEqual([270, 100, 50, 1]);
+			expect(RGB.parse('#FF00FF').asHSL().round().asArray()).toStrictEqual([300, 100, 50, 1]);
+			expect(RGB.parse('#FF0080').asHSL().round().asArray()).toStrictEqual([330, 100, 50, 1]);
+		});
+
+		test('asHSV converts RGB to HSV correctly', () => {
+			const hsv = new RGB(255, 0, 0).asHSV();
+			expect(hsv).toBeInstanceOf(HSV);
+			expect(hsv.asArray().map(value => Math.round(value)))
+				.toStrictEqual([0, 100, 100, 1]);
+
+			expect(RGB.parse('#000000').asHSV().round().asArray()).toStrictEqual([0, 0, 0, 1]);
+			expect(RGB.parse('#FFFFFF').asHSV().round().asArray()).toStrictEqual([0, 0, 100, 1]);
+			expect(RGB.parse('#FF0000').asHSV().round().asArray()).toStrictEqual([0, 100, 100, 1]);
+			expect(RGB.parse('#FF8000').asHSV().round().asArray()).toStrictEqual([30, 100, 100, 1]);
+			expect(RGB.parse('#FFFF00').asHSV().round().asArray()).toStrictEqual([60, 100, 100, 1]);
+			expect(RGB.parse('#80FF00').asHSV().round().asArray()).toStrictEqual([90, 100, 100, 1]);
+			expect(RGB.parse('#00FF00').asHSV().round().asArray()).toStrictEqual([120, 100, 100, 1]);
+			expect(RGB.parse('#00FF80').asHSV().round().asArray()).toStrictEqual([150, 100, 100, 1]);
+			expect(RGB.parse('#00FFFF').asHSV().round().asArray()).toStrictEqual([180, 100, 100, 1]);
+			expect(RGB.parse('#0080FF').asHSV().round().asArray()).toStrictEqual([210, 100, 100, 1]);
+			expect(RGB.parse('#0000FF').asHSV().round().asArray()).toStrictEqual([240, 100, 100, 1]);
+			expect(RGB.parse('#8000FF').asHSV().round().asArray()).toStrictEqual([270, 100, 100, 1]);
+			expect(RGB.parse('#FF00FF').asHSV().round().asArray()).toStrictEqual([300, 100, 100, 1]);
+			expect(RGB.parse('#FF0080').asHSV().round().asArray()).toStrictEqual([330, 100, 100, 1]);
+		});
+
+		test('asRGB and toRGB return the same instance or clone', () => {
+			const color = new RGB(255, 128, 64, 0.5);
+			expect(color.asRGB()).toStrictEqual(color);
+			expect(color.toRGB()).toStrictEqual(color);
+		});
+
+		test('handles black correctly', () => {
+			const color = new RGB(0, 0, 0);
+			expect(color.asHSL().asArray().map(value => Math.round(value))).toStrictEqual([0, 0, 0, 1]);
+			expect(color.asHSV().asArray().map(value => Math.round(value))).toStrictEqual([0, 0, 0, 1]);
+		});
+
+		test('handles white correctly', () => {
+			const color = new RGB(255, 255, 255);
+			expect(color.asHSL().asArray().map(value => Math.round(value))).toStrictEqual([0, 0, 100, 1]);
+			expect(color.asHSV().asArray().map(value => Math.round(value))).toStrictEqual([0, 0, 100, 1]);
+		});
+	});
+
+	describe('parse', () => {
+		test('parses hexadecimal color strings correctly', () => {
+			expect(RGB.parse('#ff8040').asArray()).toStrictEqual([255, 128, 64, 1]);
+			expect(RGB.parse('#ff804066').asArray()).toStrictEqual([255, 128, 64, 0.4]);
+		});
+
+		test('parses shorthand hexadecimal strings correctly', () => {
+			expect(RGB.parse('#fa4').asArray()).toStrictEqual([255, 170, 68, 1]);
+			expect(RGB.parse('#fa43').asArray()).toStrictEqual([255, 170, 68, 0.2]);
+		});
+
+		test('parses RGB strings correctly', () => {
+			expect(RGB.parse('rgb(255, 128, 64)').asArray()).toStrictEqual([255, 128, 64, 1]);
+		});
+
+		test('parses RGBA strings correctly', () => {
+			expect(RGB.parse('rgba(255, 128, 64, 0.5)').asArray()).toStrictEqual([255, 128, 64, 0.5]);
+		});
+
+		test('throws an error for invalid strings', () => {
+			expect(() => RGB.parse('invalid')).toThrow('Invalid RGB color string: "invalid"');
+		});
+	});
+
+	describe('filter methods', () => {
+		function pc(cb: (c: RGB) => RGB): [number, number, number, number] {
+			return cb(new RGB(50, 150, 200, 0.8)).round().asArray();
+		}
+
+		describe('gamma', () => {
+			test('adjusts gamma correctly', () => {
+				expect(pc(c => c.gamma(2.2))).toStrictEqual([7, 79, 149, 0.8]);
+			});
+
+			test('clamps extreme gamma values', () => {
+				expect(pc(c => c.gamma(0.001))).toStrictEqual([255, 255, 255, 0.8]);
+				expect(pc(c => c.gamma(1000))).toStrictEqual([0, 0, 0, 0.8]);
+			});
+		});
+
+		describe('invert', () => {
+			test('inverts RGB values correctly', () => {
+				expect(pc(c => c.invert())).toStrictEqual([205, 105, 55, 0.8]);
+			});
+		});
+
+		describe('contrast', () => {
+			test('adjusts contrast correctly', () => {
+				expect(pc(c => c.contrast(1.5))).toStrictEqual([11, 161, 236, 0.8]);
+			});
+
+			test('clamps extreme contrast values', () => {
+				expect(pc(c => c.contrast(1e6))).toStrictEqual([0, 255, 255, 0.8]);
+				expect(pc(c => c.contrast(0))).toStrictEqual([128, 128, 128, 0.8]);
+			});
+		});
+
+		describe('brightness', () => {
+			test('increases brightness correctly', () => {
+				expect(pc(c => c.brightness(0.5))).toStrictEqual([153, 203, 228, 0.8]);
+			});
+
+			test('decreases brightness correctly', () => {
+				expect(pc(c => c.brightness(-0.5))).toStrictEqual([25, 75, 100, 0.8]);
+			});
+
+			test('clamps brightness values', () => {
+				expect(pc(c => c.brightness(2))).toStrictEqual([255, 255, 255, 0.8]);
+				expect(pc(c => c.brightness(-2))).toStrictEqual([0, 0, 0, 0.8]);
+			});
+		});
+
+		describe('tint', () => {
+			test('tints color correctly', () => {
+				const tintColor = new RGB(255, 0, 0);
+				expect(pc(c => c.tint(0.5, tintColor))).toStrictEqual([125, 100, 125, 0.8]);
+			});
+
+			test('handles extreme tint values', () => {
+				const tintColor = new RGB(255, 0, 0);
+				expect(pc(c => c.tint(1, tintColor))).toStrictEqual([200, 50, 50, 0.8]);
+				expect(pc(c => c.tint(0, tintColor))).toStrictEqual([50, 150, 200, 0.8]);
+			});
+		});
+
+		describe('lighten', () => {
+			test('lightens the color correctly', () => {
+				expect(pc(c => c.lighten(0.5))).toStrictEqual([153, 203, 228, 0.8]);
+			});
+
+			test('clamps lighten ratio', () => {
+				expect(pc(c => c.lighten(2))).toStrictEqual([255, 255, 255, 0.8]);
+			});
+		});
+
+		describe('darken', () => {
+			test('darkens the color correctly', () => {
+				expect(pc(c => c.darken(0.5))).toStrictEqual([25, 75, 100, 0.8]);
+			});
+
+			test('clamps darken ratio', () => {
+				expect(pc(c => c.darken(1))).toStrictEqual([0, 0, 0, 0.8]);
+				expect(pc(c => c.darken(2))).toStrictEqual([0, 0, 0, 0.8]);
+			});
+		});
+
+		describe('fade', () => {
+			test('reduces alpha correctly', () => {
+				expect(pc(c => c.fade(0.5))).toStrictEqual([50, 150, 200, 0.4]);
+			});
+
+			test('handles extreme fade values', () => {
+				expect(pc(c => c.fade(1))).toStrictEqual([50, 150, 200, 0]);
+
+				const fullyOpaque = new RGB(50, 150, 200, 1);
+				expect(fullyOpaque.fade(0).asArray()).toStrictEqual([50, 150, 200, 1]);
+			});
+		});
+	});
+});

package/src/color/rgb.ts

@@ -0,0 +1,248 @@
+import { HSL } from './hsl.js';
+import { HSV } from './hsv.js';
+import { Color } from './abstract.js';
+import { clamp, formatFloat } from './utils.js';
+
+export class RGB extends Color {
+	readonly r: number = 0; // between 0 and 255
+	readonly g: number = 0;	// between 0 and 255
+	readonly b: number = 0;	// between 0 and 255
+	readonly a: number = 1;	// between 0 and 1
+
+	constructor(r: number, g: number, b: number, a: number = 1) {
+		super();
+		this.r = clamp(r, 0, 255);
+		this.g = clamp(g, 0, 255);
+		this.b = clamp(b, 0, 255);
+		this.a = clamp(a, 0, 1);
+	}
+
+	clone(): RGB {
+		return new RGB(this.r, this.g, this.b, this.a);
+	}
+
+	asArray(): [number, number, number, number] {
+		return [this.r, this.g, this.b, this.a];
+	}
+
+	round(): RGB {
+		return new RGB(
+			Math.round(this.r),
+			Math.round(this.g),
+			Math.round(this.b),
+			Math.round(this.a * 1000) / 1000,
+		);
+	}
+
+	asString(): string {
+		if (this.a === 1) {
+			return `rgb(${this.r.toFixed(0)},${this.g.toFixed(0)},${this.b.toFixed(0)})`;
+		} else {
+			return `rgba(${this.r.toFixed(0)},${this.g.toFixed(0)},${this.b.toFixed(0)},${formatFloat(this.a, 3)})`;
+		}
+	}
+
+	asHex(): string {
+		const r = Math.round(this.r).toString(16).padStart(2, '0');
+		const g = Math.round(this.g).toString(16).padStart(2, '0');
+		const b = Math.round(this.b).toString(16).padStart(2, '0');
+
+		if (this.a === 1) {
+			return `#${r}${g}${b}`.toUpperCase();
+		} else {
+			const a = Math.round(this.a * 255).toString(16).padStart(2, '0');
+			return `#${r}${g}${b}${a}`.toUpperCase();
+		}
+	}
+
+	asHSL(): HSL {
+		const r = this.r / 255;
+		const g = this.g / 255;
+		const b = this.b / 255;
+		const min = Math.min(r, g, b);
+		const max = Math.max(r, g, b);
+		const delta = max - min;
+		let h = 0;
+		let s = 0;
+
+		if (max === min) h = 0;
+		else if (r === max) h = (g - b) / delta;
+		else if (g === max) h = 2 + (b - r) / delta;
+		else if (b === max) h = 4 + (r - g) / delta;
+
+		h = Math.min(h * 60, 360);
+		if (h < 0) h += 360;
+
+		const l = (min + max) / 2;
+
+		if (max === min) s = 0;
+		else if (l <= 0.5) s = delta / (max + min);
+		else s = delta / (2 - max - min);
+
+		return new HSL(h, s * 100, l * 100, this.a);
+	};
+
+	asHSV(): HSV {
+		const r = this.r / 255;
+		const g = this.g / 255;
+		const b = this.b / 255;
+		const v = Math.max(r, g, b);
+		const diff = v - Math.min(r, g, b);
+
+		let h = 0;
+		let s = 0;
+		if (diff !== 0) {
+			function diffc(c: number): number {
+				return (v - c) / 6 / diff + 1 / 2;
+			};
+
+			s = diff / v;
+			const rdif = diffc(r);
+			const gdif = diffc(g);
+			const bdif = diffc(b);
+
+			if (r === v) h = bdif - gdif;
+			else if (g === v) h = (1 / 3) + rdif - bdif;
+			else if (b === v) h = (2 / 3) + gdif - rdif;
+
+			if (h < 0) h += 1;
+			else if (h > 1) h -= 1;
+		}
+
+		return new HSV(h * 360, s * 100, v * 100, this.a);
+	}
+
+	asRGB(): RGB {
+		return this.clone();
+	}
+
+	toRGB(): RGB {
+		return this;
+	}
+
+	static parse(input: string | Color): RGB {
+		if (input instanceof Color) return input.asRGB();
+
+		input = input.toLowerCase().replaceAll(/[^0-9a-z.#,()]/g, '')
+
+		let match;
+
+		match = input.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})?$/);
+		if (match) {
+			const r = parseInt(match[1], 16);
+			const g = parseInt(match[2], 16);
+			const b = parseInt(match[3], 16);
+			const a = match[4] ? parseInt(match[4], 16) / 255 : 1;
+			return new RGB(r, g, b, a);
+		}
+
+		match = input.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])([0-9a-f])?$/);
+		if (match) {
+			const r = parseInt(match[1], 16) * 17;
+			const g = parseInt(match[2], 16) * 17;
+			const b = parseInt(match[3], 16) * 17;
+			const a = match[4] ? parseInt(match[4], 16) / 15 : 1;
+			return new RGB(r, g, b, a);
+		}
+
+		input = input.trim().toLowerCase().replaceAll(' ', '');
+
+		match = input.match(/^rgb\((\d+),(\d+),(\d+)\)$/);
+		if (match) {
+			const r = parseInt(match[1]);
+			const g = parseInt(match[2]);
+			const b = parseInt(match[3]);
+			return new RGB(r, g, b);
+		}
+
+		match = input.match(/^rgba\((\d+),(\d+),(\d+),([.\d]+)\)$/);
+		if (match) {
+			const r = parseInt(match[1]);
+			const g = parseInt(match[2]);
+			const b = parseInt(match[3]);
+			const a = parseFloat(match[4]);
+			return new RGB(r, g, b, a);
+		}
+
+		throw new Error(`Invalid RGB color string: "${input}"`);
+	}
+
+
+	gamma(value: number): RGB {
+		if (value < 1e-3) value = 1e-3;
+		if (value > 1e3) value = 1e3;
+		return new RGB(
+			Math.pow(this.r / 255, value) * 255,
+			Math.pow(this.g / 255, value) * 255,
+			Math.pow(this.b / 255, value) * 255,
+			this.a
+		);
+	}
+
+	invert(): RGB {
+		return new RGB(
+			255 - this.r,
+			255 - this.g,
+			255 - this.b,
+			this.a
+		);
+	}
+
+	contrast(value: number): RGB {
+		if (value < 0) value = 0;
+		if (value > 1e6) value = 1e6;
+		return new RGB(
+			clamp((this.r - 127.5) * value + 127.5, 0, 255),
+			clamp((this.g - 127.5) * value + 127.5, 0, 255),
+			clamp((this.b - 127.5) * value + 127.5, 0, 255),
+			this.a
+		);
+	}
+
+	brightness(value: number): RGB {
+		if (value < -1) value = -1;
+		if (value > 1) value = 1;
+		const a = 1 - Math.abs(value);
+		const b = (value < 0) ? 0 : 255 * value;
+		return new RGB(
+			this.r * a + b,
+			this.g * a + b,
+			this.b * a + b,
+			this.a
+		);
+	}
+
+	tint(value: number, tintColor: Color): RGB {
+		if (value < 0) value = 0;
+		if (value > 1) value = 1;
+		const rgbNew = this.setHue(tintColor.toHSV().h).toRGB();
+		return new RGB(
+			this.r * (1 - value) + value * rgbNew.r,
+			this.g * (1 - value) + value * rgbNew.g,
+			this.b * (1 - value) + value * rgbNew.b,
+			this.a
+		)
+	}
+
+	lighten(ratio: number): RGB {
+		return new RGB(
+			clamp(255 - (255 - this.r) * (1 - ratio), 0, 255),
+			clamp(255 - (255 - this.g) * (1 - ratio), 0, 255),
+			clamp(255 - (255 - this.b) * (1 - ratio), 0, 255),
+			this.a
+		);
+	}
+
+	darken(ratio: number): RGB {
+		return new RGB(
+			clamp(this.r * (1 - ratio), 0, 255),
+			clamp(this.g * (1 - ratio), 0, 255),
+			clamp(this.b * (1 - ratio), 0, 255),
+			this.a
+		);
+	}
+
+	fade(value: number): RGB {
+		return new RGB(this.r, this.g, this.b, this.a * (1 - value));
+	}
+}