Highcharts Palette Helper

This tool helps creating the variations of the neutral color and highlight color for Highcharts. The results can be pasted into highcharts.css.

The general idea of the Highcharts neutral and highlight colors is that one color of full contrast or weight is defined, then variations of this are generated with decreasing contrast against the background color. Neutral color is used for text and must have a good contrast against the background. The highlight color is used for highlighted text and selections. The highcharts.css file documents where the different variations are used.

Background color Neutral color Highlight color

Data colors:

Randomize

Palette preview

Chart preview

CSS output

If you're using styled mode, this CSS can be pasted into your style sheet. Remember that the highcharts.css file must be imported first.

JavaScript output

If you're not using styled mode, this JSON structure can be applied using Highcharts.setOptions to set the global theme.

JavaScript with CSS variables

As above, but can be combined with the CSS variables of the CSS output to create a dynamic theme, for example supporting light/dark mode.