cpt2json

cpt2json

Color palette file parser to JSON, input compatible with GDAL, GRASS, GMT, ArcGIS, output compatible with Chroma.js

Demo

From GDAL docs:

The text-based color configuration file generally contains 4 columns per line: the elevation value and the corresponding Red, Green, Blue component (between 0 and 255). The elevation value can be any floating point value, or the nv keyword for the nodata value. The elevation can also be expressed as a percentage: 0% being the minimum value found in the raster, 100% the maximum value.

An extra column can be optionally added for the alpha component. If it is not specified, full opacity (255) is assumed.

Various field separators are accepted: comma, tabulation, spaces, ‘:’.

Common colors used by GRASS can also be specified by using their name, instead of the RGB triplet. The supported list is: white, black, red, green, blue, yellow, magenta, cyan, aqua, grey/gray, orange, brown, purple/violet and indigo.

GMT .cpt palette files are also supported (COLOR_MODEL = RGB only).

Note: the syntax of the color configuration file is derived from the one supported by GRASS r.colors utility. ESRI HDR color table files (.clr) also match that syntax. The alpha component and the support of tab and comma as separators are GDAL specific extensions.

Differences from GDAL:

• GMT color formats
• Chroma.js colors
• Chroma.js color modes

Custom color palettes can be generated with GMT makecpt.

Install

npm install cpt2json

or

<script src="https://unpkg.com/cpt2json@1.3.0/dist/cpt2json.umd.min.js"></script>

Usage

This library exposes a single function fromText, which should be used to parse the file content.

import { fromText } from 'cpt2json';

Color names

Color names are returned as is.

const colorPalette = fromText(`
0 black
1 white
`);

// Output:
// {
//   colors: ['black', 'white'],
//   domain: [0, 1],
// }

RGB colors

const colorPalette = fromText(`
0 0 0 0
1 255 255 255
`);

// Output:
// {
//   colors: [{ r: 0, g: 0, b: 0 }, { r: 255, g: 255, b: 255 }],
//   domain: [0, 1],
// }

HSL colors

const colorPalette = fromText(`
# COLOR_MODEL = hsl
0 300 1 0.5
0.5 150 1 0.5
1 0 1 0.5
`);

// Output:
// {
//   mode: 'hsl',
//   colors: [{ h: 300, s: 1, l: 0.5 }, { h: 150, s: 1, l: 0.5 }, { h: 0, s: 1, l: 0.5 }],
//   domain: [0, 0.5, 1],
// }

HSV colors

const colorPalette = fromText(`
# COLOR_MODEL = hsv
0 300 1 1
0.5 150 1 1
1 0 1 1
`);

// Output:
// {
//   mode: 'hsv',
//   colors: [{ h: 300, s: 1, v: 1 }, { h: 150, s: 1, v: 1 }, { h: 0, s: 1, v: 1 }],
//   domain: [0, 0.5, 1],
// }

Relative values

The second argument of fromText is a tuple of [min, max], used to resolve absolute values from relative values.

Default value: [0, 1]

const colorPalette = fromText(`
0% black
100% white
`, [0, 100]);

// Output:
// {
//   colors: ['black', 'white'],
//   domain: [0, 100],
// }

Nodata color

const colorPalette = fromText(`
0 black
1 white
nv gray
`);

// Output:
// {
//   colors: ['black', 'white'],
//   domain: [0, 1],
//   nodata: 'gray',
// }

Chroma.js

Use with Chroma.js as follows:

import chroma from 'chroma-js';

let scale = chroma
  .scale(colorPalette.colors)
  .domain(colorPalette.domain);
if (typeof colorPalette.mode !== 'undefined') {
  scale = scale.mode(colorPalette.mode);
}
if (typeof colorPalette.nodata !== 'undefined') {
  scale = scale.nodata(colorPalette.nodata);
}