Home Reference Source 
import {Color} from 'color-contrast-calc/lib/color.js'
public class | source

Color

Class of which each instance represents a specific color. The instances provide methods to generate a new color with modified properties, such as lightness or saturation.

Static Member Summary

Static Public Members
public static

BLACK: *

public static

GRAY: *

public static

WHITE: *

Static Method Summary

Static Public Methods
public static

Returns an instance of Color for a hex code
public static

Returns an instance of Color for a predefined color name.
public static

Creates an instance of Color from an HSL value

Constructor Summary

Public Constructor
public

Member Summary

Public Members
public

hexCode: *

public get

hsl: *

public

name: *

public
public

rgb: *

Method Summary

Public Methods
public

contrastLevel(otherColor: Color): string

public

Calculate the contrast ratio against another color
public

findBrightnessThreshold(otherColor: Color, level: string): Color

Tries to find a color whose contrast against the base color is close to a given level.
public

findLightnessThreshold(otherColor: Color, level: string): Color

Tries to find a color whose contrast against the base color is close to a given level.
public
public

hasSufficientContrast(otherColor: Color, level: string): boolean

Checks if the contrast ratio between the base color and otherColor meets the requirement of WCAG 2.0
public

isBrighterThan(otherColor: Color): boolean

public
public
public
public

isSameColor(otherColor: Color): boolean

Checks if the base color and otherColor have the same RGB value
public

Returns a string representation of the color.
public

withBrightness(ratio: number, name: string): Color

Return a new instance of Color with adjusted brightness.
public

withContrast(ratio: number, name: string): Color

Return a new instance of Color with adjusted contrast.
public

withGrayscale(ratio: number, name: string): Color

Return a grayscale of the original color.
public

withHueRotate(degree: number, name: string): Color

Return a hue rotation applied color as an instance of Color.
public

withInvert(ratio: number, name: string): Color

Return an inverted color as an instance of Color.
public

withSaturate(ratio: number, name: string): Color

Return a saturated color as an instance of Color.

Static Public Members

public static BLACK: * source

Properties:

NameTypeAttributeDescription
BLACK Color

an instance that represents #000000

public static GRAY: * source

Properties:

NameTypeAttributeDescription
GRAY Color

an instance that represents #808080

public static WHITE: * source

Properties:

NameTypeAttributeDescription
WHITE Color

an instance that represents #ffffff

Static Public Methods

public static getByHexCode(code: string): Color source

Returns an instance of Color for a hex code

Params:

NameTypeAttributeDescription
code string

RGB value in hex code

Return:

Color

public static getByName(name: string): Color source

Returns an instance of Color for a predefined color name.

Params:

NameTypeAttributeDescription
name string

names are defined at https://www.w3.org/TR/SVG/types.html#ColorKeywords

Return:

Color

public static newHslColor(hsl: Array<number, number, number>): Color source

Creates an instance of Color from an HSL value

Params:

NameTypeAttributeDescription
hsl Array<number, number, number>

an array of numbers that represents an HSL value

Return:

Color

An instance of Color

Public Constructors

public constructor(rgb: string | Array<number, number, number>, name: string) source

Params:

NameTypeAttributeDescription
rgb string | Array<number, number, number>

RGB value represented as a string (hex code) or an array of numbers
name string
  • optional
  • default: null

the value of this.name: if null, the value of this.hexCode is set to this.name instead

Public Members

public hexCode: * source

Properties:

NameTypeAttributeDescription
hexCode string

RGB value in hex code notation

public get hsl: * source

Properties:

NameTypeAttributeDescription
hsl Array<number, number, number>

HSL value repsented as an array of decimal numbers

public name: * source

Properties:

NameTypeAttributeDescription
name string

If no name is explicitely given, the property is set to the value of this.hexCode

public relativeLuminance: * source

Properties:

NameTypeAttributeDescription
relativeLuminance number

Relative luminance of the color defined at https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef

public rgb: * source

Properties:

NameTypeAttributeDescription
rgb Array<number, number, number>

RGB value repsented as an array of decimal numbers

Public Methods

public contrastLevel(otherColor: Color): string source

Params:

NameTypeAttributeDescription
otherColor Color

Return:

string

A, AA or AAA if the contrast ratio meets the criteria of WCAG 2.0, otherwise "-"

public contrastRatioAgainst(color: Color | string | Array<number, number, number>): number source

Calculate the contrast ratio against another color

Params:

NameTypeAttributeDescription
color Color | string | Array<number, number, number>

another color as an instance of Color, a hex code or a RGB value

Return:

number

public findBrightnessThreshold(otherColor: Color, level: string): Color source

Tries to find a color whose contrast against the base color is close to a given level.

The returned color is gained by modifying the brightness of otherColor. Even when a color that satisfies the level is not found, it returns a new color anyway.

Params:

NameTypeAttributeDescription
otherColor Color

The color before the modification of brightness
level string
  • optional
  • default: "AA"

A, AA or AAA

Return:

Color

A color whose contrast against the base color is close to a specified level

public findLightnessThreshold(otherColor: Color, level: string): Color source

Tries to find a color whose contrast against the base color is close to a given level.

The returned color is gained by modifying the lightness of otherColor. Even when a color that satisfies the level is not found, it returns a new color anyway.

Params:

NameTypeAttributeDescription
otherColor Color

The color before the modification of lightness
level string
  • optional
  • default: "AA"

A, AA or AAA

Return:

Color

A color whose contrast against the base color is close to a specified level

public hasSameLuminance(otherColor: Color): boolean source

Params:

NameTypeAttributeDescription
otherColor Color

Return:

boolean

true if the relative luminance of the base color is equal to that of otherColor

public hasSufficientContrast(otherColor: Color, level: string): boolean source

Checks if the contrast ratio between the base color and otherColor meets the requirement of WCAG 2.0

Params:

NameTypeAttributeDescription
otherColor Color
level string
  • optional
  • default: "AA"

A, AA or AAA

Return:

boolean

public isBrighterThan(otherColor: Color): boolean source

Params:

NameTypeAttributeDescription
otherColor Color

Return:

boolean

true if the relative luminance of the base color is greater than that of otherColor

public isLightColor(): boolean source

Return:

boolean

true if the contrast ratio against white is qual to or less than the ratio against black

public isMaxContrast(): boolean source

Return:

boolean

true if each primary color of the base color is 0 or 255

public isMinContrast(): boolean source

Return:

boolean

true if the hex code of the color is #808080

public isSameColor(otherColor: Color): boolean source

Checks if the base color and otherColor have the same RGB value

Params:

NameTypeAttributeDescription
otherColor Color

Return:

boolean

public toString(base: number | null): string source

Returns a string representation of the color. When 16 is passed, it return the hex code, and when 10 is passed, it returns the value in RGB notation Otherwise, it returns the color name or the hex code

Params:

NameTypeAttributeDescription
base number | null
  • optional
  • default: 16

16, 10 or null

Return:

string

public withBrightness(ratio: number, name: string): Color source

Return a new instance of Color with adjusted brightness.

Params:

NameTypeAttributeDescription
ratio number

Value in percent
name string
  • optional
  • default: null

Name of color

Return:

Color

public withContrast(ratio: number, name: string): Color source

Return a new instance of Color with adjusted contrast.

Params:

NameTypeAttributeDescription
ratio number

Value in percent
name string
  • optional
  • default: null

Name of color

Return:

Color

public withGrayscale(ratio: number, name: string): Color source

Return a grayscale of the original color.

Params:

NameTypeAttributeDescription
ratio number
  • optional
  • default: 100

Conversion ratio in percentage
name string
  • optional
  • default: null

Name of color

Return:

Color

public withHueRotate(degree: number, name: string): Color source

Return a hue rotation applied color as an instance of Color.

Params:

NameTypeAttributeDescription
degree number

Value in degree
name string
  • optional
  • default: null

Name of color

Return:

Color

public withInvert(ratio: number, name: string): Color source

Return an inverted color as an instance of Color.

Params:

NameTypeAttributeDescription
ratio number
  • optional
  • default: 100

Value in percent
name string
  • optional
  • default: null

Name of color

Return:

Color

public withSaturate(ratio: number, name: string): Color source

Return a saturated color as an instance of Color.

Params:

NameTypeAttributeDescription
ratio number

Value in percent
name string
  • optional
  • default: null

Name of color

Return:

Color