Class HSL

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

Hierarchy (View Summary)

Constructors

constructor

Methods

asArray asHex asHSL asHSV asRGB asString blend brightness clone contrast darken fade gamma invert invertLuminosity lighten rotateHue round saturate setHue tint toHSL parse

Properties

a h l s HSL HSV RGB

Constructors

constructor

  • new HSL(h: number, s: number, l: number, a?: number): HSL

    Creates a new HSL color.

    Parameters

    • h: number

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

    • s: number

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

    • l: number

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

    • a: number = 1

      The alpha (opacity) component, in the range [0, 1]. Defaults to 1.

    Returns HSL

Methods

asArray

  • asArray(): [number, number, number, number]

    Returns the HSL color as an array of numbers.

    Returns [number, number, number, number]

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

asHex

  • asHex(): string

    Converts the color to a hexadecimal string.

    Returns string

    The hexadecimal representation of the color.

asHSL

asHSV

asRGB

asString

  • asString(): string

    Returns the HSL color as a CSS-compatible string.

    Returns string

    A string representing the HSL color in CSS format.

blend

  • blend(value: number, blendColor: Color): RGB

    Blends the color with another color.

    Parameters

    • value: number

      The blend ratio.

    • blendColor: Color

      The color to blend with.

    Returns RGB

    A new RGB color that is blended.

brightness

  • brightness(value: number): RGB

    Adjusts the brightness of the color.

    Parameters

    • value: number

      The brightness adjustment value.

    Returns RGB

    A new RGB color with adjusted brightness.

clone

  • clone(): HSL

    Creates a copy of the current HSL color.

    Returns HSL

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

contrast

  • contrast(value: number): RGB

    Adjusts the contrast of the color.

    Parameters

    • value: number

      The contrast adjustment value.

    Returns RGB

    A new RGB color with adjusted contrast.

darken

  • darken(value: number): RGB

    Darkens the color by a given value.

    Parameters

    • value: number

      The amount to darken the color.

    Returns RGB

    A new RGB color that is darkened.

fade

  • fade(value: number): HSL

    Decreases the alpha (opacity) of the HSL color by a given value.

    Parameters

    • value: number

      The value by which to decrease the alpha.

    Returns HSL

    A new HSL color with decreased alpha.

gamma

  • gamma(value: number): RGB

    Applies gamma correction to the color.

    Parameters

    • value: number

      The gamma correction value.

    Returns RGB

    A new RGB color with gamma correction applied.

invert

invertLuminosity

lighten

  • lighten(value: number): RGB

    Lightens the color by a given value.

    Parameters

    • value: number

      The amount to lighten the color.

    Returns RGB

    A new RGB color that is lightened.

rotateHue

  • rotateHue(offset: number): HSL

    Rotates the hue component of the HSL color by a given offset.

    Parameters

    • offset: number

      The amount to rotate the hue by, in degrees.

    Returns HSL

    A new HSL color with the hue rotated by the given offset.

round

  • round(): HSL

    Returns a new HSL color with rounded components.

    Returns HSL

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

saturate

  • saturate(ratio: number): HSL

    Increases the saturation of the HSL color by a given ratio.

    Parameters

    • ratio: number

      The ratio by which to increase the saturation.

    Returns HSL

    A new HSL color with increased saturation.

setHue

tint

  • tint(value: number, tintColor: Color): RGB

    Tints the color by blending it with another color.

    Parameters

    • value: number

      The blend ratio.

    • tintColor: Color

      The color to blend with.

    Returns RGB

    A new RGB color that is tinted.

toHSL

Staticparse

  • parse(input: string | Color): HSL

    Parses a string or Color object into an HSL color.

    Parameters

    • input: string | Color

      The input string or Color object to parse.

    Returns HSL

    A new HSL color parsed from the input.

    Throws

    Will throw an error if the input string is not a valid HSL color string.

Properties

Readonlya

a: number

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

Readonlyh

h: number

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

Readonlyl

l: number

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

Readonlys

s: number

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

StaticHSL

HSL: typeof HSL

The HSL color model.

StaticHSV

HSV: typeof HSV

The HSV color model.

StaticRGB

RGB: typeof RGB

The RGB color model.

Settings

Member Visibility

On This Page

Constructors
Methods
Properties