Options
All
  • Public
  • Public/Protected
  • All
Menu

Class HSLSpace

Hierarchy

  • default
    • HSLSpace

Index

Constructors

Properties

Methods

Constructors

constructor

Properties

type

type: "hsl"

Protected model

model: HSLColorSpace

Protected converter

converter: default<HSLColorSpace>

Methods

blacken

  • Blackens the color space value by a relative ratio. This function converts the color space to HWB if needed, adds blackness value, and converts back to the original color space if not originally HWB.

    Parameters

    • ratio: number

      value between 0 - 1 or 1 - 100 representing a relative percent in which to blacken the color

    Returns BaseSpace<HSLColorSpace>

color

  • Retrieves a color channel from the color model via key.

    example

    Here's a simple example retrieving each channel of the RGBA space

    rgb.toString() // rgb(0,128,255)
    rgb.color('red') // 0
    rgb.color('green') // 128
    rgb.color('blue') // 255

    Parameters

    • color: keyof HSLColorSpace

      the name of the channel from the current color space to retrieve

    Returns number

    the value of the channel matching the provided key

darken

  • Darkens the RGB color space by a relative ratio.

    remarks

    To lighten the color, this function converts the color space to HSL color space (if not already HSL), adjusts the lightness attribute, and converts back to the HSL color space if needed.

    remarks

    The ratio is applied by first multiplying the percent against the current value, and subtracting that result to the lightness value clamping it between [0,1]

    example

    Here's a simple usage example darkening the color by 20%:

    color.toString() // rgb(100,100,100)
    color.darken(0).toString() // rgb(100,100,100)
    color.darken(0.2).toString() // rgb(69,69,69)

    Parameters

    • ratio: number

      percentage to darken the color by as a value between [0,1], or (1,100]

    Returns BaseSpace<HSLColorSpace>

desaturate

  • Desaturates the color space by a relative ratio. The color is desaturated by converting the value to HSL (if not already HSL), adjusting the saturation, and converting back to the original color space if needed.

    Parameters

    • ratio: number

      the relative ratio to desaturate the color

    Returns BaseSpace<HSLColorSpace>

grayscale

  • Converts the color space channels to grayscale using a Weighted Method (aka Luminosity Method). It does so by first converting the color space to RGBA (if not already RGBA), applies greyscale, then converts back to the original color space if needed;

    Returns BaseSpace<HSLColorSpace>

lighten

  • Lightens the color space by a relative ratio.

    remarks

    To lighten the color space this function converts the space to HSL (if not already within the HSL space), in which the lightness value by a relative ratio, after which is converted back to the original color space.

    remarks

    The ratio is applied by first multiplying the percent against the current value, and adding that result to the lightness value clamping it between [0,1]

    example

    Here's a simple usage example lightening the color by 20% using the RGBA color space:


    const rgba = RGBA.fromHex('#b9825b')
    rgba.toString() // rgb(200,128,75)
    rgba.lighten(0).toString() // rgb(200,128,75)
    rgba.lighten(20).toString() // rgb(213,157,118)

    Parameters

    • ratio: number

      a value between [0,1] or (1,100] as the ratio to adjust the lightness of the color space

    Returns BaseSpace<HSLColorSpace>

mix

rotate

  • Rotates the hue of the color space by a given number of degrees.

    remarks

    Converts the color space to HSL, where the hue is represented as degrees

    Parameters

    • degrees: number

      the number of degrees to rotate the hue channel

    Returns BaseSpace<HSLColorSpace>

saturate

  • Saturates the color space by a relative ratio. The color is saturated by converting the value to HSL (if not already HSL), adjusting the saturation, and converting back to the original color space if needed.

    Parameters

    • ratio: number

      the relative ratio to saturate the color

    Returns BaseSpace<HSLColorSpace>

toHexString

  • toHexString(removeHashtag?: boolean): string

  • Returns a hex string representing the RGB color space. This ignores any alpha values.

    Example

    color.toString() // rgb(185,130,91)
    color.toHexString() // #b9825b
    color.toHexString(true) // b9825b

    Parameters

    • Optional removeHashtag: boolean

      will return the hex value without a hashtag if true, otherwise will return with hashtag

    Returns string

toObject

  • Returns this color space model. This record contains named channels and their corresponding values.

    Returns HSLColorSpace

    the color model record

whiten

  • Whiten the color space value by a relative ratio. This function converts the color space to HWB (if not already HWB), adds whiteness value, and converts back to the original color space if needed.

    Parameters

    • ratio: number

      value between 0 - 1 or 1 - 100 representing a relative percent in which to whiten the color

    Returns BaseSpace<HSLColorSpace>

clone

applyModel

setColor

toSpace

hue

  • hue(): number

  • Retrieves the value of the hue channel for the current color space.

    Returns number

    the hue channel value of this color space

saturation

  • saturation(): number

  • Retrieves the value of the saturation channel for the current color space.

    Returns number

    the saturation channel value of this color space

lightness

  • lightness(): number

  • Retrieves the value of the lightness channel for the current color space.

    Returns number

    the lightness channel value of this color space

toArray

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

  • Retrieves an array representing the HSL color space containing the primary colors.

    remarks

    Array index is ordered logically [HSL]

    Returns [number, number, number]

    the HSL color space values as an array

toString

  • toString(): string

  • Prints valid CSS string value.

    example

    Here's a simple usage example:

    color.toString() // hsl(25,40%,54%)

    Returns string

    valid CSS color value.

Generated using TypeDoc