Color

A color object holds information about a single color. Internally, a KontrastColor stores a triple of numbers that specify the color's red, green and blue component. Note that unlike CSS colors, properties of type KontrastColor cannot be used to store information on opacity.

Input

You can assign values of different type/meaning to the color property:

• Array with three numbers (in the 0 to 1 range) representing the red, green and blue component. Example: [1, 0, 0]

• CSS-like 6-digit and 3-digit hexadecimal color strings, e.g. '#ff0000' or '#f00'

• CSS-like RGB color strings (with each color component in the 0 to 255 range), e.g. 'rgb(255, 0, 0)'

• The name of a color, e.g. 'red'. There are a number of built-in color names, namely 'black', 'grey' ('gray' is also accepted) and 'white'. Moreover, there are 'red', 'blue', 'green', 'yellow', 'cyan', 'magenta' and 'orange', 'brown', 'cyan', 'purple'. You will note that these colors are toned down (or darkened) with respect to the CSS colors with equal name to give better contrast with respect to a white background.

Context menu

In the context menu, the color can be entered as a string in the string formats described above. There are some keyboard shortcuts:

• Arrow up / Arrow down
  Increase or decrease the lightness
• Shift + Arrow up / Shift + Arrow down
  Increase or decrease the hue
• Ctrl + Shift + Arrow up / Ctrl + Shift + Arrow down
  Increase or decrease the saturation

Interface

Functions

• assign(value: string | array)
  Assign a new color value.
• addEventListener(eventName: string, callback: function)
  Registers the callback function as an event listener for the specified event name.
• clearEventListener(eventName: string)
  Remove all event listener callbacks associated with the event name.

Properties

• type: string

  The read-only string 'KontrastColor'.

• defaultValue: string

  A read-only string that contains the default color of the specific property.

• r: number

  The red component of the color (normalized to the 0 to 1 range).

• g: number

  The green component of the color (normalized to the 0 to 1 range).

• b: number

  The blue component of the color (normalized to the 0 to 1 range).

• value: string

  The current value (as a string).

Events

• change, callback: function () { … }
  Event that fires whenever the value is changed.

Examples

• Background color of a figure