chrys

Installation

Node.js


npm install chrys

Python


pip install chrys

Sass


npm install chrys

Usage

Get a list of discrete colours

The maximum number of colours varies by palette, but most can return up to 9 colours.

Node.js


import {VEGA_ACCENT, discretePalette} from 'chrys/umd';

const palette = discretePalette(VEGA_ACCENT, 5);


["#7fc97f", "#beaed4", "#fdc086", "#ffff99", "#386cb0"]

Python


from chrys.palettes import VEGA_ACCENT, discrete_palette

hex_palette = discrete_palette(VEGA_ACCENT, 5)
rgb_palette = discrete_palette(VEGA_ACCENT, 5, as_rgb=True)


["#7fc97f", "#beaed4", "#fdc086", "#ffff99", "#386cb0"]
[(0.4980392156862745, 0.788235294117647, 0.4980392156862745), ...]

Sass


@import 'node_modules/chrys/src/variables';

$palette: map-get(map-get($chrys-palettes, 'vega-accent'), 5);


["#7fc97f", "#beaed4", "#fdc086", "#ffff99", "#386cb0"]

Get a list of palette names

Node.js


import {VEGA_PALETTE_NAMES} from 'chrys/umd';

const variables = Object.keys(VEGA_PALETTE_NAMES);
const names = Object.values(VEGA_PALETTE_NAMES);


["VEGA_GREENS", "VEGA_YELLOW_GREEN", "VEGA_GOLD_GREEN", ...]
["vega_greens", "vega_yellowgreen", "vega_goldgreen", ...]

Python


from chrys.palettes import VEGA_PALETTE_NAMES

variables = VEGA_PALETTE_NAMES.keys()
names = VEGA_PALETTE_NAMES.values()


["VEGA_GREENS", "VEGA_YELLOW_GREEN", "VEGA_GOLD_GREEN", ...]
["vega_greens", "vega_yellowgreen", "vega_goldgreen", ...]

Parse a palette name

Get the name of the vendor and the palette name used internally by the vendor. For example, in Altair and Vega, this is the scheme name.

Node.js


import {VEGA_ACCENT, parsePaletteName} from 'chrys/umd';

parsePaletteName(VEGA_ACCENT);


{vendor: "vega", palette: "accent"}

Python


from chrys.palettes import VEGA_CATEGORY_10, parse_palette_name

vendor, name = parse_palette_name(VEGA_CATEGORY_10)


("vega", "category10")

Colour schemes

Categorical schemes

Categorical colour schemes can be used to encode discrete data values, each representing a distinct category.^[1]

{{ table_head() }} {% for palette in categoricalPalettes %} {% endfor %}

{% if palette.vega %}{{ variables(palette.vega.jsVar, palette.vega.sassVar) }}{% endif %}

{% if palette.vega %}{{ palette.vega.vendorName }}{% endif %}

{% if palette.vega %}{{ discrete_palette_html(palette.vega.name, palette.vega.palette) }}{% endif %}

{% if palette.bokeh %}{{ variables(palette.bokeh.jsVar, palette.bokeh.sassVar) }}{% endif %}

{% if palette.bokeh %}{{ palette.bokeh.vendorName }}{% endif %}

{% if palette.bokeh %}{{ discrete_palette_html(palette.bokeh.name, palette.bokeh.palette) }}{% endif %}

Sequential schemes

Sequential colour schemes can be used to encode quantitative values. These colour ramps are designed to encode increasing numeric values. Multi-hue schemes use additional hues for more colour discrimination, which may be useful for visualisations such as heatmaps. However, beware that using multiple hues may cause viewers to inaccurately see the data range as grouped into colour-coded clusters.^[1]

Show discrete

{{ table_head() }} {% for palette in sequentialPalettes %} {{ table_continuous_row('sequential', palette) }} {% endfor %}

Diverging schemes

Diverging colour schemes can be used to encode quantitative values with a meaningful mid-point, such as zero or the average value. Color ramps with different hues diverge with increasing saturation to highlight the values below and above the mid-point.^[1]

Show discrete

{{ table_head() }} {% for palette in divergingPalettes %} {{ table_continuous_row('diverging', palette) }} {% endfor %}

Cyclical schemes

Cyclical colour schemes may be used to highlight periodic patterns in continuous data. However, these schemes are not well suited to accurately convey value differences.^[1]

{{ table_head() }} {% for palette in cyclicalPalettes %} {% endfor %}

{% if palette.vega %}{{ variables(palette.vega.jsVar, palette.vega.sassVar) }}{% endif %}

{% if palette.vega %}{{ palette.vega.vendorName }}{% endif %}

{% if palette.vega %}{{ legend_gradient(palette.vega.name, palette.vega.palette) }}{% endif %}

{% if palette.bokeh %}{{ variables(palette.bokeh.jsVar, palette.bokeh.sassVar) }}{% endif %}

{% if palette.bokeh %}{{ palette.bokeh.vendorName }}{% endif %}

{% if palette.bokeh %}{{ legend_gradient(palette.bokeh.name, palette.bokeh.palette) }}{% endif %}

References

Color Schemes — Vega

	`{{ jsVar }}`
	`{{ sassVar }}`