Colors

Types of color

Categorical

The categorical palette uses colors that are distinct from one another. A categorical palette is ideal for displaying variables that are unrelated to each other.

Sequential

The sequential palette uses a single color in different saturations or in a gradient. A sequential palette is ideal for displaying information that is numeric or has a natural order, such as age.

Diverging

The diverging palette uses two sequential palettes with a shared point in the middle. A diverging palette is ideal for displaying information that is numeric and has a meaningful center value.

Usage guidelines

For sequential and diverging colored charts, use lighter hues to represent low values and darker hues to
represent high values.
When using fewer than five colors in sequential and divergent colored charts, always use the base color and colors that are very contrasting.
Always use our color pairings (see below) and be mindful of the context when selecting them.
For example: line charts work better in darker hues.
Always pick the same color to represent the same topic in a dashboard.

Color pairings

Color pairings are sets of colors that should be used when creating a chart with one or multiple variables.

• For one-colored charts, use: or or
• For two-colored charts, use: or
• For three-colored charts, use:
• For four-colored charts, use:
• For five-colored charts, use:

Color consistency

As a general rule of thumb, you should always be consistent with your color selection and what it represents in your data visualization. Humans naturally perceive color as a pattern, so when they see a color across multiple charts in one dashboard, they will assume it's a representation of the same topic.

Color codes

Usage

All charts use the categorical palette by default, based in skyblue (except for the Alluvial diagram - it assumes skyblue for all nodes/links as default).

For more cases, you will want to set either a color palette to a chart or specific colors to dataset values. Below are some examples of how to define the colors/palette of a chart:

Sequential grouped bar chart, based in skyblue

<lume-bar-chart type="grouped" :data="data" :labels="labels" :options="options" />

const options = {
    colorPalette: 'sequential',
};

Divergent stacked bar chart, from violet to royalblue

<lume-bar-chart type="stacked" color="violet-royalblue" :data="data" :labels="labels" :options="options" />

const options = {
    colorPalette: 'divergent',
};

Alluvial diagram, with neutral, successful and error colors

<lume-alluvial-diagram :data="data" />

const data = [
    {
        values: [
            {
                label: 'Students',
                color: 'grey',
                value: 'students',
                targets: [
                    { node: 'passed', value: 60, color: 'green' },
                    { node: 'retriedExam', value: 50 },
                ],
            },
            {
                label: 'Retried exam',
                color: 'grey',
                value: 'retriedExam',
                targets: [
                    { node: 'failed', value: 10, color: 'red' },
                    { node: 'passed', value: 40, color: 'green' },
                ],
            },
            {
                label: 'Passed',
                color: 'green',
                value: 'passed',
            },
            {
                label: 'Failed',
                color: 'red',
                value: 'failed',
            },
        ],
    },
];

Individual color values

All individual colors are available as Sass variables and CSS variables in the :root element.

Sass example:

@use '@adyen/lume/scss' as *;

.my-class {
    background-color: $lume-color-royalblue-20;
}

CSS example:

.my-class {
    background-color: var(--lume-color--royalblue-20);
}

Utility classes

Lume also provides a few classes you can use to apply colors to HTML/SVG elements:

(HTML) Background color: lume-background-color--{color}-{value}

(SVG) Fill: lume-fill--{color}-{value}

(SVG) Stroke: lume-stroke--{color}-{value}