Class Color

A Color class with state and the following features:

Color coordinates do not change when they become 'none', they stay at their previous value. This makes for a much smoother UI experience.
All relevant color spaces and formats are always set (no extra conversions necessary).
Matching CSS color names are tracked.
This class is exported correctly and the types aren't a mess.

Index

Constructors

constructor

new Color(
    initValue:
        | string
        | Readonly<
            _RequireExactlyOne<
                {
                    hex: PartialWithUndefined<Record<"r" | "g" | "b", number>>;
                    hsl: PartialWithUndefined<Record<"h" | "s" | "l", number>>;
                    hwb: PartialWithUndefined<Record<"b" | "h" | "w", number>>;
                    lab: PartialWithUndefined<Record<"b" | "l" | "a", number>>;
                    lch: PartialWithUndefined<Record<"h" | "l" | "c", number>>;
                    oklab: PartialWithUndefined<Record<"b" | "l" | "a", number>>;
                    oklch: PartialWithUndefined<Record<"h" | "l" | "c", number>>;
                    rgb: PartialWithUndefined<Record<"r" | "g" | "b", number>>;
                } & { hexString: `#${string}`; name: string },

                    | "rgb"
                    | "hex"
                    | "hexString"
                    | "hsl"
                    | "hwb"
                    | "lab"
                    | "lch"
                    | "oklab"
                    | "oklch"
                    | "name",
            >,
        >,
): Color
Parameters
- initValue:
      | string
      | Readonly<
          _RequireExactlyOne<
              {
                  hex: PartialWithUndefined<Record<"r" | "g" | "b", number>>;
                  hsl: PartialWithUndefined<Record<"h" | "s" | "l", number>>;
                  hwb: PartialWithUndefined<Record<"b" | "h" | "w", number>>;
                  lab: PartialWithUndefined<Record<"b" | "l" | "a", number>>;
                  lch: PartialWithUndefined<Record<"h" | "l" | "c", number>>;
                  oklab: PartialWithUndefined<Record<"b" | "l" | "a", number>>;
                  oklch: PartialWithUndefined<Record<"h" | "l" | "c", number>>;
                  rgb: PartialWithUndefined<Record<"r" | "g" | "b", number>>;
              } & { hexString: `#${string}`; name: string },
  
                  | "rgb"
                  | "hex"
                  | "hexString"
                  | "hsl"
                  | "hwb"
                  | "lab"
                  | "lch"
                  | "oklab"
                  | "oklch"
                  | "name",
          >,
      >
  Any valid CSS color string or an object of color coordinate values.
Returns Color
- Defined in data/color-class/color.ts:88

Properties

`Protected` `Readonly`_allColors

_allColors: {
    hex: { b: number; g: number; r: number };
    hexString: `#${string}`;
    hsl: { h: number; l: number; s: number };
    hwb: { b: number; h: number; w: number };
    lab: { a: number; b: number; l: number };
    lch: { c: number; h: number; l: number };
    name: string;
    names: string[];
    oklab: { a: number; b: number; l: number };
    oklch: { c: number; h: number; l: number };
    rgb: { b: number; g: number; r: number };
} = ...

All current color values. These are updated whenever Color.set is called.

`Protected`originalColorSyntax

originalColorSyntax: ColorSyntaxName = ColorSyntaxName.hex

The color syntax the this color was set with.

Accessors

allColors

get allColors(): AllColorsValues
This individual color expressed in all the supported color formats.

Returns AllColorsValues
- Defined in data/color-class/color.ts:370

hex

get hex(): { b: number; g: number; r: number }
The current color expressed as an RGB hex coordinates.

Returns { b: number; g: number; r: number }
- Defined in data/color-class/color.ts:432

hexString

get hexString(): `#${string}`
The current color expressed as an RGB hex string.

Returns `#${string}`
- Defined in data/color-class/color.ts:428

hsl

get hsl(): { h: number; l: number; s: number }
The current color expressed as its HSL coordinate values.

Returns { h: number; l: number; s: number }
- Defined in data/color-class/color.ts:440

hwb

get hwb(): { b: number; h: number; w: number }
The current color expressed as its HWB coordinate values.

Returns { b: number; h: number; w: number }
- Defined in data/color-class/color.ts:444

lab

get lab(): { a: number; b: number; l: number }
The current color expressed as its LAB coordinate values.

Returns { a: number; b: number; l: number }
- Defined in data/color-class/color.ts:448

lch

get lch(): { c: number; h: number; l: number }
The current color expressed as its LCH coordinate values.

Returns { c: number; h: number; l: number }
- Defined in data/color-class/color.ts:452

name

get name(): string
The current color expressed as a single CSS color name string. If there is no color name that matches the current color, this will be an empty string.

Returns string
- Defined in data/color-class/color.ts:424

names

get names(): string[]
The current color expressed as hardcoded CSS color keywords. If no CSS color keywords match the current color, this array will be empty.

Returns string[]
- Defined in data/color-class/color.ts:417

oklab

get oklab(): { a: number; b: number; l: number }
The current color expressed as its Oklab coordinate values.

Returns { a: number; b: number; l: number }
- Defined in data/color-class/color.ts:456

oklch

get oklch(): { c: number; h: number; l: number }
The current color expressed as its Oklch coordinate values.

Returns { c: number; h: number; l: number }
- Defined in data/color-class/color.ts:460

rgb

get rgb(): { b: number; g: number; r: number }
The current color expressed as its RGB coordinate values.

Returns { b: number; g: number; r: number }
- Defined in data/color-class/color.ts:436

Methods

clone

clone(): Color
Create a new Color instance that matches this one exactly.

Returns Color
- Defined in data/color-class/color.ts:230

getClosestNamedColor

getClosestNamedColor(): string
Get the closest named CSS color to this Color class instance's current color.

Returns string
- Defined in data/color-class/color.ts:142

getRgbDistance

getRgbDistance(distanceFrom: string): number
Get the distance from this Color class instance to the given CSS color string.
Parameters
- distanceFrom: string
Returns number
- Defined in data/color-class/color.ts:137

`Protected`pullFromInternalColor

pullFromInternalColor(): void
Update all internally stored color format values (Color.allColors) from the updated internal color object.

Returns void
- Defined in data/color-class/color.ts:311

serialize

serialize(): string
Create a string that can be serialized into a new Color instance which will exactly match the current Color instance.

Returns string
- Defined in data/color-class/color.ts:362

set

set(
    newValue:
        | string
        | Readonly<
            _RequireExactlyOne<
                {
                    hex: PartialWithUndefined<Record<"r" | "g" | "b", number>>;
                    hsl: PartialWithUndefined<Record<"h" | "s" | "l", number>>;
                    hwb: PartialWithUndefined<Record<"b" | "h" | "w", number>>;
                    lab: PartialWithUndefined<Record<"b" | "l" | "a", number>>;
                    lch: PartialWithUndefined<Record<"h" | "l" | "c", number>>;
                    oklab: PartialWithUndefined<Record<"b" | "l" | "a", number>>;
                    oklch: PartialWithUndefined<Record<"h" | "l" | "c", number>>;
                    rgb: PartialWithUndefined<Record<"r" | "g" | "b", number>>;
                } & { hexString: `#${string}`; name: string },

                    | "rgb"
                    | "hex"
                    | "hexString"
                    | "hsl"
                    | "hwb"
                    | "lab"
                    | "lch"
                    | "oklab"
                    | "oklch"
                    | "name",
            >,
        >,
): void
Update the current color by setting a whole new color, a single coordinate in a single color format, or multiple coordinates in a single color format. This mutates the current Color instance.
Parameters
- newValue:
      | string
      | Readonly<
          _RequireExactlyOne<
              {
                  hex: PartialWithUndefined<Record<"r" | "g" | "b", number>>;
                  hsl: PartialWithUndefined<Record<"h" | "s" | "l", number>>;
                  hwb: PartialWithUndefined<Record<"b" | "h" | "w", number>>;
                  lab: PartialWithUndefined<Record<"b" | "l" | "a", number>>;
                  lch: PartialWithUndefined<Record<"h" | "l" | "c", number>>;
                  oklab: PartialWithUndefined<Record<"b" | "l" | "a", number>>;
                  oklch: PartialWithUndefined<Record<"h" | "l" | "c", number>>;
                  rgb: PartialWithUndefined<Record<"r" | "g" | "b", number>>;
              } & { hexString: `#${string}`; name: string },
  
                  | "rgb"
                  | "hex"
                  | "hexString"
                  | "hsl"
                  | "hwb"
                  | "lab"
                  | "lch"
                  | "oklab"
                  | "oklch"
                  | "name",
          >,
      >
Returns void
- Defined in data/color-class/color.ts:256

`Protected`setByString

setByString(cssColorString: string): void
Update the color to match the given string.
Parameters
- cssColorString: string
Returns void
Throws
Error if cssColorString is not able to be parsed.
- Defined in data/color-class/color.ts:239

toCss

toCss(): Record<ColorSyntaxName, string>
Converts the values for each supported color format in a CSS string that can be directly used in any modern CSS code.

Returns Record<ColorSyntaxName, string>
See
.toFormattedStrings()
- Defined in data/color-class/color.ts:400

toFormattedStrings

toFormattedStrings(): Record<ColorSyntaxName | "names", string>
Converts the values for each supported color format into a padded string for easy display purposes.

Returns Record<ColorSyntaxName | "names", string>
See
.toCss()
- Defined in data/color-class/color.ts:380

toString

toString(): string
Converts the color class to a CSS string format in the color space and format that it was originally set with.

Returns string
- Defined in data/color-class/color.ts:167

`Static`deserialize

deserialize(this: void, input: string): Color
Create a new Color instance by parsing the output of another instance's Color.serialize method.
Parameters
- this: void
- input: string
Returns Color
- Defined in data/color-class/color.ts:113

`Static`isColor

isColor<T>(this: void, value: T): value is Extract<T, Readonly<Color>>
Checks, with a type guard, that a given input is a Color class instance.
Type Parameters
- T
Parameters
- this: void
- value: T
Returns value is Extract<T, Readonly<Color>>
- Defined in data/color-class/color.ts:105

`Static`isValidColorString

isValidColorString(this: void, value: string): boolean
Checks if the input string can be converted into a color.
Parameters
- this: void
- value: string
Returns boolean
- Defined in data/color-class/color.ts:95

Class Color

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns Color

Properties

Protected Readonly_allColors

ProtectedoriginalColorSyntax

Accessors

allColors

Returns AllColorsValues

hex

Returns { b: number; g: number; r: number }

hexString

Returns `#${string}`

hsl

Returns { h: number; l: number; s: number }

hwb

Returns { b: number; h: number; w: number }

lab

Returns { a: number; b: number; l: number }

lch

Returns { c: number; h: number; l: number }

name

Returns string

names

Returns string[]

oklab

Returns { a: number; b: number; l: number }

oklch

Returns { c: number; h: number; l: number }

rgb

Returns { b: number; g: number; r: number }

Methods

clone

Returns Color

getClosestNamedColor

Returns string

getRgbDistance

Parameters

Returns number

ProtectedpullFromInternalColor

Returns void

serialize

Returns string

set

Parameters

Returns void

ProtectedsetByString

Parameters

Returns void

Throws

toCss

Returns Record<ColorSyntaxName, string>

See

toFormattedStrings

Returns Record<ColorSyntaxName | "names", string>

See

toString

Returns string

Staticdeserialize

Parameters

Returns Color

StaticisColor

Type Parameters

Parameters

Returns value is Extract<T, Readonly<Color>>

StaticisValidColorString

Parameters

Returns boolean

Settings

On This Page

`Protected` `Readonly`_allColors

`Protected`originalColorSyntax

`Protected`pullFromInternalColor

`Protected`setByString

`Static`deserialize

`Static`isColor

`Static`isValidColorString