@electrovir/color - v0.0.0
    Preparing search index...

    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

    Properties

    _allColors

    Accessors

    allColors hex hsl hwb lab lch names oklab oklch rgb

    Methods

    clone pullFromInternalColor serialize set setByString toCss toFormattedStrings deserialize

    Constructors

    • Parameters

      • initValue:
            | string
            | Readonly<
                _RequireExactlyOne<
                    {
                        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>>;
                    } & { hex: `#${string}`; name: string },

                        | "rgb"
                        | "hsl"
                        | "hwb"
                        | "lab"
                        | "lch"
                        | "oklab"
                        | "oklch"
                        | "hex"
                        | "name",
                >,
            >

        Any valid CSS color string or an object of color coordinate values.

      Returns Color

    Properties

    Protected Readonly_allColors

    _allColors: {
        hex: `#${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 };
        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.

    Accessors

    • get hex(): `#${string}`

      The current color expressed as an RGB hex string.

      Returns `#${string}`

    • get hsl(): { h: number; l: number; s: number }

      The current color expressed as its HSL coordinate values.

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

    • get hwb(): { b: number; h: number; w: number }

      The current color expressed as its HWB coordinate values.

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

    • get lab(): { a: number; b: number; l: number }

      The current color expressed as its LAB coordinate values.

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

    • get lch(): { c: number; h: number; l: number }

      The current color expressed as its LCH coordinate values.

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

    • 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[]

    • get oklab(): { a: number; b: number; l: number }

      The current color expressed as its Oklab coordinate values.

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

    • get oklch(): { c: number; h: number; l: number }

      The current color expressed as its Oklch coordinate values.

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

    • get rgb(): { b: number; g: number; r: number }

      The current color expressed as its RGB coordinate values.

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

    Methods

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

      Returns void

    • Create a string that can be serialized into a new Color instance which will exactly match the current Color instance.

      Returns string

    • 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<
                    {
                        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>>;
                    } & { hex: `#${string}`; name: string },

                        | "rgb"
                        | "hsl"
                        | "hwb"
                        | "lab"
                        | "lch"
                        | "oklab"
                        | "oklch"
                        | "hex"
                        | "name",
                >,
            >

      Returns void

    • Update the color to match the given string.

      Parameters

      • cssColorString: string

      Returns void

      Error if cssColorString is not able to be parsed.

    • Converts the values for each supported color format in a CSS string that can be directly used in any modern CSS code.

      Returns Record<ColorFormatName | "hex" | "name", string>

    • Converts the values for each supported color format into a padded string for easy display purposes.

      Returns Record<ColorFormatName | "hex" | "names", string>

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods