Builtin Palettes

This example demonstrates how to interpolate a color within one of the builtin color palettes to render a temperature display panel. Builtin palettes can be accessed with Palette.Name or Palette["Name"]. To know how to interpolate a palette, look at the list of builtin color palettes. The leftmost color of the gradient is the "zero" or minimum bound of the interpolated range, and the rightmost color of the gradient is the "one" or maximum bound of the interpolated range.

For "Spectral", the color on the left is red, meaning that red is the minimum bound of the range. We want to map that to the "hot" temperature.

Installation

Follow these steps to create a new project workspace and install the viridis dependency to run this example.

# Create and open project folder
mkdir Builtin_Palettes_demo
cd Builtin_Palettes_demo
# Initialize project and install dependencies
npm init -y
npm i viridis@1.1.7
# Create and open source file
touch "Builtin Palettes.mjs"
open "Builtin Palettes.mjs"
Copy

Source

Copy and paste this source code into Builtin Palettes.mjs.

import { Palette } from 'viridis';

const T_cold = 0,
    T_hot = 100,
    T_current = 55;

// Look at the list of builtin palettes!
// The red side of "Spectral" is on the left,
// meaning that is the lower bound. We want
// to map that to the hot temperature.
const background = Palette.Spectral.getColor(T_current, T_hot, T_cold),
    foreground = background.getContrastingColor();

console.log('Background: ' + background);
console.log('Foreground: ' + foreground);
Copy

Output

In Builtin_Palettes_demo/, execute Builtin Palettes.mjs with NodeJS to generate an output.

node "Builtin Palettes.mjs"
Copy

You should expect to see an output similar to the one below.

Background: rgba(248,229,142,100%)
Foreground: rgba(0,0,0,100%)
Copy