Class Shade

A color shade.

Hierarchy

  • Shade

Properties

B G R hex id index onHex opacity rgbArray BLACK DARK_BLUE GRAY HALF_BLACK HALF_WHITE HALF_WHITE_DM NEAR_BLACK OFF_BLACK OFF_WHITE WHITE WHITE_DM

Methods

buildDMShade buildDMShades buildLMShade buildLMShades buildShade buildShades clone findDMShade findLMShade getContrast getContrastRatio getContrastToWhiteOrBlack getCorrespondingDarkModeShade getDMShade getHalfShade getHexOrRGBA getLMShade getLightModeShade getLighterAndDarkerShades getLighterShades getLightness getLuminance getMode getOnShade2 getPartialShade getPerceivedLightness getQuarterShade getSaturation getShade getShadeOrOnShadeBasedOnContrast getShadesOrderedByNearness hasMode isCore meetsContrastRequirements mix setHex setId setMode coreShades fromHex fromRGB fromRGBArray getCoreShade

Properties

B

B: number

The shade's B value

G

G: number

The shade's G value

R

R: number

The shade's R value

hex

hex: string

The shade's hex value

id

id: string = "unknown"

The id of the shade

index

index: number = -1

The index of the shade

onHex

onHex: string = ""

The onHex value for this shade

opacity

opacity: number = 1

The opacity of the shade

rgbArray

rgbArray: number[]

The shade's RGB array

Static BLACK

BLACK: Shade = ...

The black shade

Static DARK_BLUE

DARK_BLUE: Shade = ...

The dark blue shade

Static GRAY

GRAY: Shade = ...

The gray shade

Static HALF_BLACK

HALF_BLACK: Shade = ...

The half-black shade

Static HALF_WHITE

HALF_WHITE: Shade = ...

The half-white shade

Static HALF_WHITE_DM

HALF_WHITE_DM: Shade = ...

The half-white dark mode shade

Static NEAR_BLACK

NEAR_BLACK: Shade = ...

The near black shade

Static OFF_BLACK

OFF_BLACK: Shade = ...

The off-black shade

Static OFF_WHITE

OFF_WHITE: Shade = ...

The off-white shade

Static WHITE

WHITE: Shade = ...

The white shade

Static WHITE_DM

WHITE_DM: Shade = ...

The white dark mode shade

Methods

buildDMShade

  • Build a dark mode shade for this shade

    Returns

    The new dark mode shade

    Parameters

    • Optional minRatio: number

      The minimum contrast ratio to white or black

    Returns Shade

buildDMShades

buildLMShade

  • Build a light mode shade for this shade which meets the min contrast ratio requirements

    Returns

    The adjusted shade meeting the contrast ratio requirements

    Parameters

    • Optional minRatio: number

      The minimum contrast ratio

    Returns Shade

buildLMShades

buildShade

  • Build a shade

    Parameters

    • lm: boolean

      True for light mode; false for dark mode

    • Optional minRatio: number

      Optional minRatio for the contrast ratio comparison for the on text

    Returns Shade

buildShades

  • Build light or dark mode shades for this shade.

    Returns

    Shades for this shade

    Parameters

    • lm: boolean

      True for light mode or false for dark mode

    Returns Shade[]

clone

findDMShade

  • Find a dark mode shade which meets the contrast ratio on these background shades

    Returns

    A dark mode shade meeting the contrast ratio requirement, or throws an exception if not found.

    Parameters

    • bgShades: Shade[]

      The background shades

    • ratio: number

      The required contrast ratio

    Returns Shade

findLMShade

  • Find a light mode shade which meets the contrast ratio on this background shade

    Returns

    A light mode shade meeting the contrast ratio requirement, or throws an exception if not found.

    Parameters

    • bgShades: Shade[]
    • ratio: number

      The required contrast ratio

    Returns Shade

getContrast

  • Get the contrast of this shade to white or black.

    Returns

    The contrast of this shade to white or black.

    Returns number

getContrastRatio

getContrastToWhiteOrBlack

  • Get the contrast of this shade to white or black.

    Returns

    Parameters

    • lm: boolean

    Returns number

getCorrespondingDarkModeShade

  • Get the corresponding dark mode shade (i.e. at the same index) for a light mode shade.

    Returns

    The corresponding dark mode shade

    Returns Shade

getDMShade

  • Get a dark mode shade which meets the contrast ratio on these background shades

    Returns

    A dark mode shade meeting the contrast ratio requirements, or undefined if not found

    Parameters

    • bgShades: Shade[]

      The background shades

    • ratio: number

      The required contrast ratio

    Returns undefined | Shade

getHalfShade

getHexOrRGBA

  • Get the hex value if no opacity, or RGBA string if opacity is not 1.

    Returns

    Returns string

getLMShade

  • Get a light mode shade which meets the contrast ratio on this background shade. Find the shade closest to this shade which meets the contrast ratio requirement against the background shade.

    Returns

    A light mode shade meeting the contrast ratio requirement, or undefined if not found

    Parameters

    • bgShades: Shade[]
    • ratio: number

      The required contrast ratio

    Returns undefined | Shade

getLightModeShade

  • Get the light mode shade for this shade.

    Returns

    The corresponding light mode shade for this shade

    Returns Shade

Private getLighterAndDarkerShades

  • Build 10 shades from this shade, some of which may be lighter and some of which may be darker. The number of lighter and darker depends on where in the spectrum this shade falls.

    Returns

    Parameters

    • lm: boolean

      True if this is for light mode; else false if for dark mode.

    Returns Shade[]

Private getLighterShades

  • Build 10 shades from this shade, some of which may be lighter and some of which may be darker. The number of lighter and darker depends on where in the spectrum this shade falls.

    Returns

    Parameters

    • lm: boolean

      True if this is for light mode; else false if for dark mode.

    Returns Shade[]

getLightness

  • Get the lightness of this shade.

    Returns

    The lightness of this shade.

    Returns number

getLuminance

  • Get the luminance of this shade.

    Returns

    The luminance

    Returns number

getMode

  • Get the shade's mode

    Returns

    The mode, or throws exception if node.

    Returns ColorMode

getOnShade2

getPartialShade

  • Get a partial shade

    Returns

    Parameters

    • opacity: number

      The opacity to apply to this new shade

    Returns Shade

getPerceivedLightness

  • Get the perceived lightness of this shade.

    Returns

    The perceived lightness of this shade.

    Returns number

getQuarterShade

getSaturation

  • Get the saturation of this shade.

    Returns

    The saturation of this shade.

    Returns number

getShade

  • Find a shade which meets the contrast ratio requirements on this background shade.

    Returns

    Parameters

    • lm: boolean

      true for light mode and false for dark mode.

    • bgShades: Shade[]
    • ratio: number

      The contrast ratio requirement

    Returns undefined | Shade

getShadeOrOnShadeBasedOnContrast

  • Return either this shade or the onShade based on contrast requirements to 'shade'.

    Returns

    This shade or the onShade

    Parameters

    • shade: Shade

      The shade to compare to this one

    • lm: boolean
    • Optional multiplier: number

      Optional multiplier

    Returns Shade

getShadesOrderedByNearness

hasMode

  • Determine if the shade has a mode.

    Returns

    True if it has a mode

    Returns boolean

isCore

  • Determine if this shade is a core shade.

    Returns

    True if this is a core shade; false, otherwise.

    Returns boolean

meetsContrastRequirements

  • Return true if the contrast ratio of this shade to all 'bgShades' meets or exceeds 'ratio'; otherwise, return false.

    Parameters

    • bgShades: Shade[]
    • ratio: number

    Returns boolean

mix

  • Mix this shade with another shade to produce a third shade.

    Returns

    A third shade which is the mixture of this shade and the 'shade'.

    Parameters

    • shade: Shade

      The other shade to mix with this shade

    • ratio: number

      The ratio; a value between 0 and 1 denoting how much of this shade verses the other shade in the resulting shade.

    Returns Shade

setHex

setId

setMode

  • Set the mode of the shade

    Returns

    The shade

    Parameters

    • Optional mode: ColorMode

      The mode of the shade

    Returns Shade

Static coreShades

Static fromHex

  • Create a shade object from it's hex value.

    Returns

    The shade object

    Parameters

    • hex: string

      The hex value for the color shade.

    • Optional coreShadeName: string

      An optional core shade name for this object.

    Returns Shade

Static fromRGB

  • Create a shade object from it's R, G, and B values.

    Returns

    The shade object

    Parameters

    • R: number

      Red value.

    • G: number

      Green value.

    • B: number

      Blue value.

    Returns Shade

Static fromRGBArray

  • Create a shade object from an [R,G,B] array.

    Returns

    The shade object.

    Parameters

    • rgbArray: number[]

      The [R,G,B] array.

    Returns Shade

Static getCoreShade

  • Get a core shade given the core shade name.

    Returns

    The core shade, or undefined if none found by this name.

    Parameters

    • coreShadeName: string

      The core shade name.

    Returns undefined | Shade

Settings

Member Visibility

Theme

Generated using TypeDoc