Dicopal

Discrete color palettes (hundreds of them!) for JavaScript.

Dicopal offers color palettes from:

• Colorbrewer2
• Fabio Crameri's Scientific Colour Maps
• CARTOColors
• cmocean
• Light & Bartlein
• Matplotlib
• MyCarta
• Tableau
• The Wes Anderson Palettes blog
• Masataka Okabe and Kei Ito's Color Universal Design (CUD) palette

⏩ Browse all the available palettes

Installation

NPM

Add the package to your project:

npm install dicopal

CDN

Add the script to your HTML:

<script src="https://unpkg.com/dicopal"></script>

Usage

Get a palette, by name and number of colors

const pal = getPalette('Pastel', 4); // Returns the "Pastel" palette with 4 colors
// {
//   "number": 4,
//   "type": "qualitative",
//   "name": "Pastel",
//   "id": "Pastel_4",
//   "colors": ["#66C5CC","#F6CF71","#F89C74","#DCB0F2"],
//   "provider": "cartocolors",
//   "url": "https://github.com/CartoDB/CartoColor/wiki/CARTOColor-Scheme-Names"
// }

Get a palette colors, by name and number of colors

const cols = getColors('Pastel', 4); // Returns the "Pastel" palette with 4 colors
// ["#66C5CC","#F6CF71","#F89C74","#DCB0F2"]

Colors can also be reversed:

const cols = getColors('Pastel', 4, true);
// ['#DCB0F2', '#F89C74', '#F6CF71', '#66C5CC']

List the existing palettes for a given number of colors

// Returns 135 instances of palette with 3 colors
const palettes = getPalettes({ number: 3 });

List the existing palettes for a given type (sequential, diverging, qualitative)

// Returns 160 instances of qualitative palettes
const palettes = getPalettes({ type: 'qualitative' });

List the existing palettes for a given provider (ColorBrewer, Tableau, etc.)

// Returns 265 instances of colorbrewer palettes
const palettes = getPalettes({ provider: 'colorbrewer' });

List the existing palettes for a given name (for example, 'Accent')

// Returns the 6 instances of the "Accent" palette
const palettes = getPalettes({ name: 'Accent' });

List the existing palettes that match a set of criteria

// Returns the 12 instances of the palettes that are qualitative and have 10 colors
const palettes = getPalettes({ type: 'qualitative', number: 10 });

All the palettes or more criteria

When no argument is provided, the getPalettes function returns all the palettes:

// Returns the 1600 instances of palettes
const allPalettes = getPalettes();

You can then filter the palettes yourself by any combination of criteria:

// Only sequential and diverging palettes from all providers except colorbrewer
// with between 3 and 12 colors
const palettes = allPalettes
  .filter((p) => (
    ['sequential', 'diverging'].includes(p.type)
    && p.provider !== 'colorbrewer'
    && p.number >= 3
    && p.number <= 12)
  );

List the existing providers

const providers = getPaletteProviders(); // Returns the 10 providers

List the existing types

const providers = getPaletteTypes(); // Returns the 3 types

List the existing palette names

// Returns the 179 names ('ArmyRose', 'BrBg', 'Accent', etc.)
const providers = getPaletteNames();

// Returns the 35 names ('BrBg', 'PRGn', etc.)
const providers = getPaletteNames('colorbrewer');

Get the number of classes for a given palette

// Returns an array of numbers, like [3, 4, 5, 6, 7, 8]
const numClasses = getPaletteNumbers('Pastel2');

Not a fan of the proposed API ? Just get the raw description of the palettes and use them as you wish

For a given provider:

getRawData('colorbrewer');

For all the provider (default):

getRawData();

Other information

Palette information is stored in the src/palette.json file. It is generated in Python from various sources, notably the palettable Python library (authored by Matt Davis) and the dicopal RDF vocabulary which both provide a list of palettes with their colors and metadata.

License

Apache-2.0. See LICENSE for details.