gradum-kit - v0.1.0
    Preparing search index...

    Class Color

    Color

    Unified color class. Parses any CSS color string (hex, rgb/rgba, hsl/hsla), stores the color internally as RGBA, and provides conversions, interpolation, luminance, and contrast utilities. All channels are kept in sync: setting any of r/g/b/a/h/s/l/hex updates the rest automatically.

    Index
    constructor
    r g b a h s l hex rgb rgba hsl hsla luminance
    toString fromString from fromHexString fromHsl fromHslString fromRgbString contrast bestOverlay interpolate equals interpolate gradient contrast luminance bestOverlay random

    • Parameters

      • r: number = 0

        Red channel (0–255).

      • g: number = 0

        Green channel (0–255).

      • b: number = 0

        Blue channel (0–255).

      • Optionala: number = 1

        Alpha channel (0–1).

      Returns Color

    • set r(value: number): void

      Parameters

      • value: number

      Returns void

    • set g(value: number): void

      Parameters

      • value: number

      Returns void

    • set b(value: number): void

      Parameters

      • value: number

      Returns void

    • set a(value: number): void

      Parameters

      • value: number

      Returns void

    • set h(value: number): void

      Parameters

      • value: number

      Returns void

    • set s(value: number): void

      Parameters

      • value: number

      Returns void

    • set l(value: number): void

      Parameters

      • value: number

      Returns void

    • set hex(value: string): void

      Parameters

      • value: string

      Returns void

    • get rgb(): string

      Returns string

      • e.g. "rgb(255 136 0)".

      Returns the color as a CSS rgb() string (alpha ignored).

    • get rgba(): string

      Returns string

      • e.g. "rgb(255 136 0 / 0.5)".

      Returns the color as a CSS rgb() string with alpha.

    • get hsl(): string

      Returns string

      • e.g. "hsl(32 100% 50%)".

      Returns the color as a CSS hsl() string (alpha ignored).

    • get hsla(): string

      Returns string

      • e.g. "hsl(32 100% 50% / 0.5)".

      Returns the color as a CSS hsl() string with alpha.

    • get luminance(): number

      Returns number

      The WCAG 2.1 relative luminance of the color (0 = black, 1 = white).

    • Returns string

      Returns rgb() for opaque colors and rgb() with alpha for semi-transparent ones.

    • Parameters

      • value: string

      Returns Color

    • Parameters

      • color: string | Color

        The CSS color string or Color instance to parse.

      Returns Color

      Creates a Color from a CSS color string or an existing Color instance. Supports hex (#rgb, #rgba, #rrggbb, #rrggbbaa), rgb()/rgba(), and hsl()/hsla(). Returns Color(0, 0, 0) if the string cannot be parsed.

    • Parameters

      • hex: string

        The hex color string.

      Returns Color

      • Null if the string is not a valid hex color.

      Creates a Color from a hex string (#rgb, #rgba, #rrggbb, #rrggbbaa).

    • Parameters

      • h: number

        Hue, 0–360.

      • s: number

        Saturation, 0–100.

      • l: number

        Lightness, 0–100.

      • Optionala: number = 1

        Alpha, 0–1.

      Returns Color

      Creates a Color from HSL components.

    • Parameters

      • color: string

        The HSL color string.

      Returns Color

      • Null if parsing fails.

      Creates a Color from a CSS hsl()/hsla() string. Handles both comma-separated (CSS Level 3) and space-separated (CSS Level 4) syntax, with or without % signs and deg units, and optional alpha via / or as a fourth argument.

    • Parameters

      • color: string

        The RGB color string.

      Returns Color

      • Null if parsing fails.

      Creates a Color from a CSS rgb()/rgba() string. Handles both comma-separated (CSS Level 3) and space-separated (CSS Level 4) syntax, and optional alpha via / or as a fourth argument.

    • Parameters

      • other: string | Color

        The color to compare against.

      Returns number

      • Contrast ratio, 1–21.

      Computes the WCAG 2.1 contrast ratio between this color and another.

    • Parameters

      • Optionaldark: string | Color = "#000000"

        The dark candidate.

      • Optionallight: string | Color = "#ffffff"

        The light candidate.

      Returns Color

      Returns whichever of the two candidate colors has better contrast against this color. Defaults to black and white if candidates are not provided.

    • Parameters

      • other: string | Color

        The target color.

      • t: number

        Interpolation factor (0 = this, 1 = other).

      Returns Color

      Linearly interpolates between this color and another in RGB space. Works regardless of the original format of the input color.

    • Parameters

      • other: string | Color

        The color to compare against.

      • Optionaltolerance: number = 0

        Maximum allowed difference per channel.

      Returns boolean

      Checks whether this color is equal to another color or CSS color string, comparing all four channels within an optional tolerance.

    • Parameters

      • color1: string | Color

        The start color.

      • color2: string | Color

        The end color.

      • t: number

        Interpolation factor (0 = color1, 1 = color2).

      Returns Color

      Linearly interpolates between two colors in RGB space. Accepts any mix of Color instances and CSS color strings of any supported format.

    • Parameters

      • colors: (string | Color)[]

        Two or more color stops.

      • t: number

        Gradient position (0–1).

      Returns Color

      Interpolates along a multi-stop gradient. t = 0 returns the first color, t = 1 returns the last color.

    • Parameters

      Returns number

      Computes the WCAG 2.1 contrast ratio between two colors.

    • Parameters

      Returns number

      Computes the WCAG 2.1 relative luminance of a color.

    • Parameters

      • base: string | Color
      • Optionaldark: string | Color = "#000000"
      • Optionallight: string | Color = "#ffffff"

      Returns Color

      Returns whichever of the two candidates has better contrast against the base color.

    • Function

      random

      Parameters

      • Optionalsaturation: number | [number, number] = ...

        Saturation percentage, or a [min, max] range to pick one from.

      • Optionallightness: number | [number, number] = ...

        Lightness percentage, or a [min, max] range to pick one from.

      Returns Color

      The generated color.

      Generate a random color with a random hue, constrained to the given saturation and lightness. The defaults produce muted pastel tones rather than fully saturated ones.

    Settings
    Member Visibility

    On This Page
    Constructors
    Accessors
    Methods