Options
All
  • Public
  • Public/Protected
  • All
Menu

Class Colour

The colour class provides a range of lightness values for a colour. By default it creates a range of colours by stepping the lightness of the colour by 0.1

example
A basic red colour ```ts const red = new Colour({ base: '#F44336' }); red.darkest; red.darker; red.dark; red.darkened; red.normal; // -> '#F44336' red.lightened; red.light; red.lighter; red.lightest; ```
example
Customise scaling, reduces the range of the lightness ```ts const red = new Colour({ base: '#F44336', scale: 0.05 }); ```
example
Customise certain stops (or all of them `100` to `900`) ```ts const red = new Colour({ base: { 500: '#F44336', 600: '#E53935', 700: '#D32F2F' }}); ```
example
Can use RGB to define the bases ```ts const mess = new Colour({ base: { 500: '#F44336', 600: { red: 128, green: 64, blue: 32 }, 700: new Rgb({ red: 255, green: 64, blue: 16 }) }}); const simple = new Colour({ base: { red: 128, green: 64, blue: 32 }}); ```
example
Customise the step calculation ```ts const ratio = (last, multiplier) => new Rgb(new Hsl(last.toIHsl()).lighten({ ratio: multiplier }).toIRgb() }; const mess = new Colour({ base: '#F44336', scale: 0.01, ratio ); const simple = new Colour({ base: { red: 128, green: 64, blue: 32 }}); ```

Hierarchy

Implements

Index

Constructors

Accessors

Methods

Constructors

constructor

  • new Colour(__namedParameters: object): Colour

Accessors

100

  • get 100(): Rgb

200

  • get 200(): Rgb

300

  • get 300(): Rgb

400

  • get 400(): Rgb

500

  • get 500(): Rgb

600

  • get 600(): Rgb

700

  • get 700(): Rgb

800

  • get 800(): Rgb

900

  • get 900(): Rgb

dark

  • get dark(): string

darkened

  • get darkened(): string

darker

  • get darker(): string

darkest

  • get darkest(): string

light

  • get light(): string

lightened

  • get lightened(): string

lighter

  • get lighter(): string

lightest

  • get lightest(): string

normal

  • get normal(): string

Methods

__@toPrimitive

  • __@toPrimitive(hint: "string" | "number" | "default"): number | string