• Public
  • Public/Protected
  • All

Class ColorScale


  • ColorScale





Protected _colors

_colors: Color[] = ...


Protected _hint

_hint: InterpolationHint = ...


Protected _inverted

_inverted: boolean = false


Static Private Readonly SCHEMA

SCHEMA: any = ...

Color scale preset file schema.



  • get colors(): Color[]
  • set colors(colors: Color[]): void



  • get inverted(): boolean


  • get length(): number
  • Provides read access to the number of colors of this scale. This is a shortcut for this.colors.length.

    Returns number



  • bitsF32(space?: Space, alpha?: boolean): Float32Array
  • Converts the color scale into an array of interleaved float values of the requested color space.


    • space: Space = ...

      Color space that is to be used for the array.

    • alpha: boolean = true

      Whether or not alpha is to be included.

    Returns Float32Array


  • bitsUI8(space?: Space, alpha?: boolean): Uint8Array
  • Converts the color scale into an array of interleaved unsigned int values of the requested color space.


    • space: Space = ...

      Color space that is to be used for the array.

    • alpha: boolean = true

      Whether or not alpha is to be included.

    Returns Uint8Array


  • color(index: number): undefined | Color
  • Returns the color with specified index. If the index is out of bounds, undefined is returned. Alternatively, the color array can be used directly @seecolors.


    • index: number

      Index of the color to access.

    Returns undefined | Color


  • invert(): void
  • Inverts the color scale. Whether or not the scale is inverted can be checked using the inverted read-only property (@link inverted).

    Returns void


  • lerp(position: number, space?: Space): undefined | Color
  • Queries the color at a given position by identifying the adjacent stops (lower and upper bound) and either interpolating between these or picking the nearest of both. In case no stop exists, a default color will be returned. If only one color exists, this color is always returned no matter the position. If the position is out of bounds, either the first or last stop's color is returned.


    • position: number

      Position in [0.0, 1.0] to linear interpolate the color at.

    • space: Space = ...

      The color space that is to be used for linear interpolation of two colors.

    Returns undefined | Color

    • Color, depending on the gradient type either linearly or nearest filtered color.

Static fromArray

  • fromArray(interleavedColorComponents: number[], type: ArrayType, stepCount: number, positions?: number[]): ColorScale
  • Creates a color scale from a set of colors and (optional) positions for a specific step count. If no positions are specified, the colors are spread equally. A step count of 1 returns the first color.


    • interleavedColorComponents: number[]

      Interleaved array of color components, e.g., red, green, and blue.

    • type: ArrayType

      The array type specifying the number of subsequent color components for each color.

    • stepCount: number

      Number of colors to be computed from the color scale.

    • Optional positions: number[]

      Interleaved array of positions, matching the length of the color array divided by stride.

    Returns ColorScale

    • A color scale of fixed number and position of colors for index and linear interpolation access.

Static fromPreset

  • fromPreset(url: string, preset: string, stepCount: number): Promise<ColorScale>
  • Fetches a color schema file, and, if successful, picks a preset for the specified number of steps. If the named preset cannot be found, a list of all available presets within the file is logged and undefined is returned. If the preset does not specify exact colors for the requested number of steps, the color array with the most colors and linear interpolation in CIE-LAB is used to generate the scale.

    The following preset libraries are included within webgl-operate but are required to be loaded dynamically (in order to reduce bundle size and memory use):

    ColorScale.fromPreset('./colorbrewer.json', 'YlGnBu', 7);
    ColorScale.fromPreset('./smithwalt.json', 'viridis', 16);

    And resolving the promise:

    const scale: ColorScale | undefined = undefined;
    ColorScale.fromPreset('./data/colorbrewer.json', 'YlGnBu', 5).then((value) => scale = value);


    • url: string

      Uniform resource locator string referencing a json file complying to the JSON color schema.

    • preset: string

      Name of a preset to choose from the json file.

    • stepCount: number

      Number of steps to be used for the resulting color scheme.

    Returns Promise<ColorScale>

    • Undefined if loading and validating the json failed or the preset was not found. Else, a color scale.

Static Protected stride

  • Returns the stride for interleaved arrays of color components based on the array type.


    • type: ArrayType

      One of the supported color array types.

    Returns number