@versatiles/style
    Preparing search index...

    Interface HSL

    Represents a color in the HSL (Hue, Saturation, Lightness) color space. Extends the base Color class.

    interface HSL {
        a: number;
        h: number;
        l: number;
        s: number;
        asArray(): [number, number, number, number];
        asHex(): string;
        asHSL(): HSL;
        asHSV(): HSV;
        asRGB(): RGB;
        asString(): string;
        blend(value: number, blendColor: Color): RGB;
        brightness(value: number): RGB;
        clone(): HSL;
        contrast(value: number): RGB;
        darken(value: number): RGB;
        fade(value: number): HSL;
        gamma(value: number): RGB;
        invert(): RGB;
        invertLuminosity(): HSL;
        lighten(value: number): RGB;
        rotateHue(offset: number): HSL;
        round(): HSL;
        saturate(ratio: number): HSL;
        setHue(value: number): HSV;
        tint(value: number, tintColor: Color): RGB;
    }

    Hierarchy (View Summary)

    Index

    Methods

    • Returns the HSL color as an array of numbers.

      Returns [number, number, number, number]

      An array containing the hue, saturation, lightness, and alpha components.

    • Converts the color to a hexadecimal string.

      Returns string

      The hexadecimal representation of the color.

    • Returns the HSL color as a CSS-compatible string.

      Returns string

      A string representing the HSL color in CSS format.

    • Linearly interpolates between this color and blendColor in RGB space.

      Parameters

      • value: number

        Blend ratio. Range: [0, 1] (clamped; null/undefined treated as 0). 0 returns this color; 1 returns blendColor.

      • blendColor: Color

        Target color to blend toward.

      Returns RGB

      A new RGB color, blended.

    • Linearly shifts each RGB channel toward black (negative value) or white (positive value).

      Parameters

      • value: number

        Brightness shift. Clamped to [-1, 1]. 0 is identity; -1 yields pure black; +1 yields pure white.

      Returns RGB

      A new RGB color with adjusted brightness.

    • Creates a copy of the current HSL color.

      Returns HSL

      A new HSL color with the same components as the current color.

    • Scales each RGB channel around the midpoint 127.5: c → (c − 127.5) · value + 127.5, clamped to [0, 255].

      Parameters

      • value: number

        Contrast multiplier. Clamped to [0, 1e6]. 1 is identity; 0 collapses the color to mid-gray (#808080); values >1 increase contrast; very large values push each channel to 0 or 255.

      Returns RGB

      A new RGB color with adjusted contrast.

    • Multiplies each RGB channel by (1 − value). Mathematically equivalent to blend with black as target.

      Note: this operation is theme-absolute — under luminosity inversion it still moves toward black, not toward the dark-theme contrast endpoint. For inversion-safe rules use blend(value, fg) where fg is your style's foreground/contrast reference.

      Parameters

      • value: number

        Darkening ratio. Range: [0, 1] (values are clamped). 0 is identity; 1 yields pure black.

      Returns RGB

      A new RGB color, darkened.

    • Reduces the alpha proportionally: a → a · (1 − value).

      Parameters

      • value: number

        Fade amount. Range: [0, 1]. 0 is identity; 1 yields fully transparent.

      Returns HSL

      A new HSL color with reduced alpha.

    • Applies a per-channel gamma correction: c → 255 · (c/255)^value.

      Parameters

      • value: number

        Gamma exponent. Clamped to [1e-3, 1e3]. 1 is identity; <1 brightens midtones; >1 darkens midtones.

      Returns RGB

      A new RGB color with gamma correction applied.

    • Returns a new HSL color with the lightness flipped: l → 100 − l. Hue and saturation are preserved.

      Returns HSL

      A new HSL color with the lightness inverted.

    • Blends each RGB channel toward white. Mathematically equivalent to blend with white as target.

      Note: this operation is theme-absolute — under luminosity inversion it still moves toward white, which means "lighten" inverts in meaning relative to a dark background. For inversion-safe rules use blend(value, bg) where bg is your style's background reference.

      Parameters

      • value: number

        Lightening ratio. Range: [0, 1] (values are clamped). 0 is identity; 1 yields pure white.

      Returns RGB

      A new RGB color, lightened.

    • Rotates the hue around the color wheel.

      Parameters

      • offset: number

        Rotation in degrees. Any number; reduced modulo 360. 0 leaves the hue unchanged; 180 yields the complementary hue.

      Returns HSL

      A new HSL color with the rotated hue.

    • Returns a new HSL color with rounded components.

      Returns HSL

      A new HSL color with rounded hue, saturation, lightness, and alpha components.

    • Scales the saturation by (1 + ratio), then clamps to [0, 100].

      Parameters

      • ratio: number

        Saturation change ratio. Range: [-1, ∞). -1 fully desaturates (gray); 0 is identity; 1 doubles saturation; values that would push S past 100 are clamped.

      Returns HSL

      A new HSL color with adjusted saturation.

    • Replaces the hue, preserving saturation and value.

      Parameters

      • value: number

        Hue in degrees. Any number; reduced modulo 360.

      Returns HSV

      A new HSV color with the new hue.

    • Shifts the hue toward tintColor's hue, blending in RGB space. Internally: derives a version of this color carrying tintColor's hue, then linearly interpolates between this and that variant by value.

      Parameters

      • value: number

        Tint amount. Range: [0, 1] (clamped). 0 is identity; 1 yields this color's luminosity/saturation but with tintColor's hue.

      • tintColor: Color

        Color whose hue is used for tinting; only its hue matters.

      Returns RGB

      A new RGB color, tinted.

    Properties

    a: number

    The alpha (opacity) component of the color, in the range [0, 1].

    h: number

    The hue component of the color, in the range [0, 360].

    l: number

    The lightness component of the color, in the range [0, 100].

    s: number

    The saturation component of the color, in the range [0, 100].