How to pick dashboard series colors for dark mode

Chart colors that look clear on a white page can blend into a dark dashboard, or become hard to tell apart when several lines sit together. A color may also look different from the code you expected once it is shown on your actual screen.

You can sample colors from your dashboard, compare their values, and test a small palette before using it in a chart. TooLab's Color Picker reads a color from anywhere on your screen and shows its HEX, RGB, HSL, and other values.

Pick and compare series colors

1. Open the Color Picker on a computer in Chrome or Edge. Picking colors from anywhere on the screen works in those browsers. Other browsers may offer a reduced version or no screen picker.
2. Open the dashboard or chart with its dark background visible. Sample the background and note its HEX value so you can compare each series color against the surface it will appear on.
3. Sample the current chart colors, if there are any. Note each HEX or HSL value, then check whether two colors are too close in brightness or hue to tell apart quickly.
4. Try candidate colors in the dashboard itself. Check them in the chart, the legend, and any labels, then adjust a color that blends in or looks too similar to a neighboring series.

Sampling a color on screen tells you its displayed value, not whether it is a good chart choice by itself. The important test is whether the colors remain distinguishable at the chart's normal size and in the context of the whole interface.

Choose a palette that works on dark surfaces

Use colors that are light enough to show up

Very dark blue, purple, or green can disappear against a charcoal background. Try a lighter, moderately saturated version of the hue instead. For example, a bright cyan or soft gold may be easier to follow than a deep navy or brown on a dark gray chart.

Do not make every line extremely bright. A group of glowing colors can compete with the data and make the screen tiring to read. Keep the background subdued, and reserve the strongest colors for the series that matter most.

Separate neighboring series by more than hue

When two lines have similar brightness, they can be hard to distinguish even if one is blue and the other is purple. Use a mix of hue and lightness differences. If your chart supports them, add different marker shapes or line styles as another clue.

For a small set of series, you might test cyan, warm gold, lavender, and mint on the actual background. Treat these as starting points, not a guaranteed palette. The shades need to work with your chart size, display, and other interface colors.

Keep labels and legends easy to read

A chart line and the text next to it have different jobs. A bright line may stand out while small text in the same color remains difficult to read. Keep labels legible against their own background, and do not assume the line color alone will make a legend clear.

For important values, consider direct labels or markers as well as a color-coded legend. This helps people identify a series when colors look similar on their screen or when viewing the chart in grayscale.

Check emphasis and meaning

Use one accent color for a highlighted series and quieter colors for background comparisons. If colors already have a meaning in your dashboard, such as red for a warning, avoid reusing them for unrelated data unless the chart explains the difference.

Refine colors that do not look right

1. Lighten a color that vanishes. Sample the color and compare it with the background. Try a lighter shade of the same hue in your chart settings, then check it again at normal chart size.
2. Change one property at a time. Adjust the hue, lightness, or saturation rather than replacing the whole palette at once. HSL separates these properties: hue is the color family, lightness is how light it appears, and saturation is how vivid it looks.
3. Separate colors that look alike. If two series merge visually, change their lightness as well as their hue. If the chart allows it, give them different line patterns or point markers too.
4. Check the legend on its own background. A line can be clear in the plot but hard to identify in a compact legend. Increase the visual distinction or add a short text label near the series.
5. Review the chart at its real size. Zooming in can make thin lines and small markers look more distinct than they are in regular use. Check the chart at the size people will actually see.

Why a sampled color can look different

A color value describes the pixel you sampled, but it does not guarantee the same appearance on every screen. Display brightness, color settings, and the surrounding colors all affect how a shade looks. A thin line can also appear less vivid than a large color swatch because it covers fewer pixels.

Use the Color Picker to identify and compare values, then make the final choice in the dashboard where the color will be used. The screen picker works in Chrome and Edge on a computer; if it is unavailable in your browser, compare the palette directly in the chart instead.