Basics
Basics
ColorScheme Objects
When you load the package, it provides a collection of pre-defined ColorSchemes in a registry object called colorschemes.
A ColorScheme object contains:
- An ordered array of color values (RGB / Hex objects)
- A
categorystring defining its classification - A
notesstring containing descriptive metadata
Accessing Built-in Schemes
To access one of the built-in colorschemes:
import { colorschemes } from 'color-schemes-js';
// Via property access
const scheme = colorschemes.leonardo;
// Or via dictionary access
const scheme2 = colorschemes['leonardo'];
Accessing Colors
You can inspect the array of colors contained within a scheme:
const colors = colorschemes.leonardo.colors;
// => Array of RGB color objects / hex strings
You can reference a single color by index:
const color = colorschemes.leonardo.colors[2];
Sampling Colors
You can sample a scheme at any point continuous between 0.0 and 1.0 using get():
import { get, colorschemes } from 'color-schemes-js';
// Sample the exact midpoint
const midColor = get(colorschemes.leonardo, 0.5);
Resampling ColorSchemes
With resample(), you can generate a new ColorScheme by resampling an existing scheme with a specific number of color steps:
import { resample, colorschemes } from 'color-schemes-js';
// Resample darkrainbow into 14 distinct steps
const newScheme = resample(colorschemes.darkrainbow, 14);
The colorschemes Registry
All pre-defined schemes are registered under colorschemes. Each entry retains metadata about its category and source:
console.log(colorschemes.summer);
/*
{
name: 'summer',
category: 'matplotlib',
notes: 'sampled color schemes, sequential linearly-increasing shades of green-yellow',
colors: [...]
}
*/
Finding ColorSchemes
Use the findcolorscheme() function to search through all pre-defined colorschemes. The search term can match scheme names, categories, or notes:
import { findcolorscheme } from 'color-schemes-js';
const results = findcolorscheme('ice');
// => Returns matching colorscheme keys e.g. ['seaborn_icefire_gradient', 'ice', ...]
Making Your Own ColorScheme
You can instantiate a new ColorScheme using custom color arrays or interpolations:
import { ColorScheme } from 'color-schemes-js';
// Create from an array of Hex strings
const customScheme = new ColorScheme(
['#ff0000', '#00ff00', '#0000ff'],
'custom',
'My RGB palette'
);