Skip to main content

Class: Color

Defined in: classes/Color.ts:64

A comprehensive color class that supports multiple color formats including decimal, hexadecimal, RGB, HSL, and CMYK. Provides methods for color conversion, manipulation (lighten, darken, mix), and utility operations.

Examples​

// Creating colors from different formats
const color1 = Color.fromHex('#FF5733');
const color2 = Color.fromRgb({ r: 255, g: 87, b: 51 });
const color3 = Color.fromHsl({ h: 11, s: 100, l: 60 });
const color4 = Color.fromCmyk({ c: 0, m: 66, y: 80, k: 0 });
const color5 = Color.fromDecimal(0xFF5733);
// Converting between formats
const color = Color.fromHex('#FF5733');
console.log(color.toHex());     // "#FF5733"
console.log(color.toRgb());     // { r: 255, g: 87, b: 51 }
console.log(color.toHsl());     // { h: 10.588235294117647, s: 100, l: 60 }
console.log(color.toCmyk());    // { c: 0, m: 65.9, y: 80, k: 0 }
console.log(color.toDecimal()); // 16729359
// Color manipulation
const color = Color.fromHex('#FF5733');
color.lighten(30);              // Lighten by 30%
color.darken(10);               // Darken by 10%

const anotherColor = Color.fromHex('#33FF57');
color.mix(anotherColor, 60);    // Mix 60% with another color
// Working with alpha channels
const colorWithAlpha = Color.fromHex('#FF5733FF');
console.log(colorWithAlpha.hasAlphaChannel); // true
console.log(colorWithAlpha.toRgb());         // { r: 255, g: 87, b: 51, a: 1 }
// Color properties and utilities
const color = Color.fromHex('#FF5733');
console.log(color.lightness);   // 60
console.log(color.isLight);     // true
console.log(color.isDark);      // false
console.log(color.valueOf());   // 16734003
console.log(color.toString());  // "#FF5733"
// Cloning and JSON representation
const original = Color.fromHex('#FF5733');
const cloned = original.clone();
console.log(original.toJSON()); // Complete color representation
// Custom byte ordering for decimal conversion
const color = Color.fromHex('#FF5733FF');
const rgbOnly = color.toDecimal([RgbByte.Red, RgbByte.Green, RgbByte.Blue]);
console.log(rgbOnly); // 16734003 (without alpha)

Accessors​

hasAlphaChannel​

Get Signature​

get hasAlphaChannel(): boolean

Defined in: classes/Color.ts:562

Checks if the color has an alpha channel.

Examples​
const color = Color.fromHex('#FF5733');

// Check if the color has an alpha channel
console.log(color.hasAlphaChannel); // false
const colorWithAlpha = Color.fromHex('#FF5733FF');

// Check if the color has an alpha channel
console.log(colorWithAlpha.hasAlphaChannel); // true
Returns​

boolean

true if the color has an alpha channel, false otherwise.

isDark​

Get Signature​

get isDark(): boolean

Defined in: classes/Color.ts:609

Checks if the color is dark.

Example​
const color = Color.fromHex('#FF5733');

// Check if the color is dark
console.log(color.isDark); // false
Returns​

boolean

true if the color is dark, false otherwise.

isLight​

Get Signature​

get isLight(): boolean

Defined in: classes/Color.ts:594

Checks if the color is light.

Example​
const color = Color.fromHex('#FF5733');

// Check if the color is light
console.log(color.isLight); // true
Returns​

boolean

true if the color is light, false otherwise.

lightness​

Get Signature​

get lightness(): number

Defined in: classes/Color.ts:577

Returns the lightness percentage of the color.

Example​
const color = Color.fromHex('#FF5733');

// Get lightness
console.log(color.lightness); // 60
Returns​

number

The lightness of the color.

Methods​

clone()​

clone(): Color

Defined in: classes/Color.ts:541

Clones the current Color instance.

Returns​

Color

A new Color instance with the same properties.

Example​

const color = Color.fromHex('#FF5733');

// Clone the color
const clonedColor = color.clone();
console.log(clonedColor.toHex()); // "#FF5733"

darken()​

darken(amount): Color

Defined in: classes/Color.ts:481

Darkens the color by a specified percentage.

Parameters​

amount​

number = 20

The percentage to darken the color by (0-100). Defaults to 20.

Returns​

Color

The Color instance.

Example​

const color = Color.fromHex('#FF5733');

// Darken the color by 20%
console.log(color.darken().toHex()); // "#CC4529"

lighten()​

lighten(amount): Color

Defined in: classes/Color.ts:456

Lightens the color by a specified percentage.

Parameters​

amount​

number = 20

The percentage to lighten the color by (0-100). Defaults to 20.

Returns​

Color

The Color instance.

Example​

const color = Color.fromHex('#FF5733');

// Lighten the color by 20%
console.log(color.lighten().toHex()); // "#FF7F66"

mix()​

mix(color, amount): Color

Defined in: classes/Color.ts:508

Mixes the color with another Color instance by a specified percentage.

Parameters​

color​

Color

The Color instance to mix with.

amount​

number = 50

The percentage to mix the colors by (0-100). 0 keeps the original color, 100 keeps the other color. Defaults to 50.

Returns​

Color

The Color instance.

Example​

const color1 = Color.fromHex('#FF5733');
const color2 = Color.fromHex('#33FF57');

// Mix the two colors by 50%
console.log(color1.mix(color2).toHex()); // "#99A85A"

toCmyk()​

toCmyk(): CMYK

Defined in: classes/Color.ts:418

Converts the color to a CMYK object.

Returns​

CMYK

The CMYK object.

Example​

const color = Color.fromHex("#FF5733");

console.log(color.toCmyk()); // { c: 0, m: 66, y: 80, k: 0 }

toDecimal()​

toDecimal(byteOrder?): number

Defined in: classes/Color.ts:249

Converts the color to a decimal color value.

Parameters​

byteOrder?​

The order of the bytes in the decimal value. Defaults to [RgbByte.Alpha, RgbByte.Red, RgbByte.Green, RgbByte.Blue] (0xAARRGGBB).

[RgbByte, RgbByte, RgbByte] | [RgbByte, RgbByte, RgbByte, RgbByte]

Returns​

number

The decimal color value.

Examples​

const color = Color.fromHex("#FF5733");

console.log(color.toDecimal()); // 16729359
const color = Color.fromHex("#FF5733FF");

console.log(color.toDecimal([RgbByte.Red, RgbByte.Green, RgbByte.Blue])); // 16729359

toHex()​

toHex(digits?): `#${string}`

Defined in: classes/Color.ts:313

Converts the color to a hexadecimal color code.

Parameters​

digits?​

number

The number of digits in the hexadecimal color code. Must be 3, 4, 6, or 8. Defaults to 6 (or 8 if the color has an alpha channel).

Returns​

`#${string}`

The hexadecimal color code (e.g. #FFFFFF).

Examples​

const color = Color.fromDecimal(0xFF5733FF);

console.log(color.toHex()); // "#FF5733FF"
const color = Color.fromDecimal(0xFF5733FF);

console.log(color.toHex(6)); // "#5733FF"

toHsl()​

toHsl(): HSL

Defined in: classes/Color.ts:368

Converts the color to an HSL object.

Returns​

HSL

The HSL object.

Example​

const color = Color.fromHex("#FF5733");

console.log(color.toHsl()); // { h: 11, s: 100, l: 60 }

toJSON()​

toJSON(): object

Defined in: classes/Color.ts:654

Returns a JSON representation of the color.

Returns​

object

A JSON representation of the color.

cmyk​

cmyk: CMYK

decimal​

decimal: number

hex​

hex: `#${string}`

hsl​

hsl: HSL

rgb​

rgb: RGB

Example​

const color = Color.fromHex('#FF5733');

// Convert to JSON
console.log(color.toJSON()); // { decimal: 16729359, hex: '#FF5733', ... }

toRgb()​

toRgb(): RGB

Defined in: classes/Color.ts:349

Converts the color to an RGB object.

Returns​

RGB

The RGB object.

Example​

const color = Color.fromHex("#FF5733");

console.log(color.toRgb()); // { r: 255, g: 87, b: 51 }

toString()​

toString(): string

Defined in: classes/Color.ts:639

Returns a string representation of the color in hexadecimal format.

Returns​

string

A string representation of the color.

Example​

const color = Color.fromRgb({ r: 255, g: 87, b: 51 });

// Convert to string
console.log(color.toString()); // "#FF5733"

valueOf()​

valueOf(): number

Defined in: classes/Color.ts:624

Returns the decimal representation of the color.

Returns​

number

The decimal representation of the color.

Example​

const color = Color.fromHex('#FF5733');

// Get decimal value
console.log(color.valueOf()); // 16729359

fromCmyk()​

static fromCmyk(cmyk): Color

Defined in: classes/Color.ts:213

Creates a new Color instance from a CMYK object.

Parameters​

cmyk​

CMYK

The CMYK object.

Returns​

Color

The Color instance.

Example​

const color = Color.fromCmyk({ c: 0, m: 100, y: 100, k: 0 });

fromDecimal()​

static fromDecimal(decimal, hasAlpha): Color

Defined in: classes/Color.ts:82

Creates a new Color instance from a decimal color value.

Parameters​

decimal​

number

The decimal color value.

hasAlpha​

boolean = false

Whether the color has an alpha channel. You should set this to true if the color is fully transparent because when the alpha byte is 0x00, the value cannot be added to the decimal value.

Returns​

Color

The Color instance.

Example​

const color = Color.fromDecimal(0xFF5733);

fromHex()​

static fromHex(hex): Color

Defined in: classes/Color.ts:98

Creates a new Color instance from a hexadecimal color code.

Parameters​

hex​

`#${string}`

The hexadecimal color code (e.g. #FFFFFF). Must be 4, 5, 7, or 9 characters long.

Returns​

Color

The Color instance.

Example​

const color = Color.fromHex('#FF5733');

fromHsl()​

static fromHsl(hsl): Color

Defined in: classes/Color.ts:164

Creates a new Color instance from an HSL object.

Parameters​

hsl​

HSL

The HSL object.

Returns​

Color

The Color instance.

Example​

const color = Color.fromHsl({ h: 360, s: 100, l: 50 });

fromRgb()​

static fromRgb(rgb): Color

Defined in: classes/Color.ts:131

Creates a new Color instance from an RGB object.

Parameters​

rgb​

RGB

The RGB object.

Returns​

Color

The Color instance.

Example​

const color = Color.fromRgb({ r: 255, g: 87, b: 51 });