# Dark-first data palette > Ops dashboards live on dark screens all night and the chart colors have to survive it. - Canonical: https://patterns.konigi.com/dashboards/dark-first-data-palette - Group: Color - Level: context - Status: published - Updated: September 10, 2026 - Also called: dark mode charts, NOC palette --- ## Problem The palette was chosen on a white background in the afternoon. It ships to a room where the lights are off, the screen is charcoal, and the person reading it has been awake for nineteen hours. ## Solution Design the dark version first and derive the light one, rather than the other way round, because the dark case is the constrained case and the one that actually gets used at 3am. Inverting a light palette does not work, and the reason is worth understanding. On white, a colour is distinguished largely by its darkness—you can pick from a wide range of lightness values and every one contrasts with the background. On charcoal, every usable colour has to be lighter than the background, which collapses the available lightness range and forces hue and saturation to do work they were not carrying before. Colours that were clearly different on white converge into a set of similar pale tints on black. The specific casualties are predictable. Saturated blues disappear into dark backgrounds. Pure yellow and pure white are painfully bright and cause halation, especially for viewers with astigmatism. Mid-tone greys that read as "muted" on white read as "barely there" on charcoal. And the amber that meant warning becomes almost indistinguishable from the yellow that meant one of the series. NN/g's research is a useful corrective against treating dark mode as strictly better: light mode measured better for people with normal vision on reading and acuity tasks, because positive polarity produces more light, contracts the pupil, and sharpens focus. Dark mode measured better for people with cloudy ocular media such as cataracts. The honest conclusion is that neither wins outright, which is the argument for supporting both properly rather than picking one and inverting. WCAG's non-text contrast floor applies to chart elements as much as to buttons, and it is the requirement most often missed in dark themes, where a series line at 2:1 against the background looks fine to the person who chose it on a good monitor. ## Use when The primary context is dark: NOC walls, on-call tooling, terminals, anything watched overnight. Also whenever the product offers a theme toggle, because both themes then need to be first-class. ## Don't use when The output is print, PDF or a projector, where dark backgrounds waste ink and wash out. If a dashboard is regularly screenshotted into documents, the light theme is the one that ships. ## Trade-offs Maintaining two palettes doubles the work and doubles the drift, and the second theme is usually the one nobody checks. Dark themes flatter poor contrast, so problems surface only on the cheap monitor in the actual control room. Photographs, logos and embedded content assume white and look wrong. And a dark chart screenshotted into a light document arrives as a black rectangle, which is a small daily friction for teams who write incident reports. ## Checklist - Was the dark palette designed first, or inverted from a light one? - How many series colours stay distinguishable on the actual background at the actual size? - Is pure white or pure yellow used anywhere large, and does it halate? - Does every series colour meet the non-text contrast floor against the dark background? - Do the status colours stay distinct from the categorical series colours in both themes? - Have both palettes been checked for the common colour vision deficiencies? - Has this been looked at on the worst screen it will actually run on? - What happens when a dark chart is pasted into a light document? - Do grid lines, axes and labels recede properly, or do they compete? - Does the theme follow the system preference, and can it be overridden? ## Compare **Grafana** ships dark as its default theme and has done for its whole life, which is why its palette reads as the reference NOC palette and why its light theme has always felt like the derived one. **Netdata** also defaults dark and pushes further into density, which makes its per-series distinctions harder and its resting state calmer. **Honeycomb** supports both and leans on a heatmap where the colour ramp rather than the categorical palette carries the meaning, so the theme question is mostly about the ramp's endpoints. **ColorBrewer** predates all of this and is still the most useful reference for the underlying problem, because it was built around whether a scheme survives colourblind viewers, photocopying and projection, which is the same durability question a dark theme asks. **Cloudflare Radar** ships both grounds as equals and holds its hues fixed across them, which shows what that costs. Capture the same page twice and the dark blue that dominates on white is the line closest to the background on charcoal, while the pale blue that was the quiet one carries the chart. Nothing was swapped; the lightness relationship simply ran out of room. ## Related Categorical series palette is where the distinguishability problem gets solved in detail. Semantic status color has to stay separable from the series colours in both themes. Grayscale with alerts is the discipline that makes a dark palette workable by needing fewer colours. Wallboard mode is the context where the dark palette meets a bad screen and a long viewing distance. Sequential and diverging scales covers ramps, which behave differently again on dark grounds. ## Examples ### Cloudflare Radar (Cloudflare) A public dashboard with no account, no filters worth the name, and an audience of journalists. Designed for people who will read one number and leave. **Worldwide Overview, dark** — captured September 11, 2026, Public site, signed out; no version string exposed. public, medium density, dark theme, desktop-web. The same page and the same figures, captured minutes apart on the other ground. Only the promotional strip at the top differs, and it rotates. Radar is worth the pair because it does not restate its palette in the dark: the hues are the same, and what changes is how much light each one carries against what is behind it. In the traffic chart the dark blue that reads as the heavier of the two series on white is now the one closest to the background, and the pale blue that was the quiet one carries the chart. The stacked attack bars show the milder version of the same thing—WAF still holds the largest share and still looks it, but the lighter segment beside it pulls more attention than its 39.7% has earned. The red on the browser deltas is the one colour that reads the same on both grounds, which is what you want from a colour carrying meaning and what a colour carrying identity cannot promise. Hotspots in this capture: - [Dark-first data palette](https://patterns.konigi.com/dashboards/dark-first-data-palette) *(this pattern)* — Same two hues as the light capture. On charcoal the darker series is the one fighting the ground. - [Categorical series palette](https://patterns.konigi.com/dashboards/categorical-series-palette) — Four categories, four fixed hues, held across both grounds. Which one dominates the eye is not held. - [Delta indicator](https://patterns.konigi.com/dashboards/delta-indicator) — The one colour that reads the same on both grounds, because it is carrying meaning rather than identity. ### Grafana (Grafana Labs) The reference implementation for panel grids, template variables, and stat panels; most other tools are defined by how they differ from it. **Examples / Stats, light theme** — captured September 10, 2026, Grafana Play (signed out; ?theme=light). analytical, dense density, light theme, desktop-web. The same dashboard as the dark Stats capture, same data, same palette, one URL parameter apart. Put them side by side and the palette turns out to have been designed on charcoal. On the dark version the value colours carry because they are brighter than the ground—reds, oranges and greens against near-black. Here they have to carry by being darker than the ground instead, and the same hues arrive as pale pink and pale salmon. Look at the Color value panel: six numbers at 30-odd pixels, and 93.5, 88.7, 93.4, 81.6, 77.6 and 87.9 are all light pink on white. The column on the right is worse, because 63.8 GB lands on pale orange. Nothing about the theme switch is broken, and nothing was chosen for this ground. That's the whole argument for designing the dark case first and deriving the other one: the constrained case should set the lightness range, and here the unconstrained one did. Hotspots in this capture: - [Dark-first data palette](https://patterns.konigi.com/dashboards/dark-first-data-palette) *(this pattern)* — The same six values as the dark capture. Bright-on-charcoal became pale-on-white, and the contrast went with it. - [Dark-first data palette](https://patterns.konigi.com/dashboards/dark-first-data-palette) *(this pattern)* — 63.8 GB in pale orange on white. On the dark version the identical colour was the readable one. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) — Whole-tile fills survive the switch, because the text sits on the colour rather than being the colour. - [Grayscale with alerts](https://patterns.konigi.com/dashboards/grayscale-with-alerts) — Ninety green rectangles, identical in both themes. Nothing here can read as abnormal on either ground. - [Sparkline](https://patterns.konigi.com/dashboards/sparkline) — The area fills under each value drop to near-white here, so the shape that was legible on charcoal is a smudge. **Examples / Stats** — captured September 10, 2026, Grafana Play (signed out; no version string exposed). analytical, dense density, dark theme, desktop-web. A showcase rather than a working dashboard, which is what makes it useful: it is Grafana demonstrating every visual option the stat panel has, in one place, with nothing else competing. Two things are worth reading it for. The first is that across roughly sixty tiles here, not one carries a comparison. Every option on display is about how the number looks—background colour, value colour, orientation, text mode, grid packing—and none is about what the number should be measured against. The panel type that most needs a delta and a base is being shown off without either. The second is the colour. Every single tile on this page is coloured, and the "No text" panel is ninety-odd green rectangles carrying no label and no value at all, which is colour as the sole carrier of meaning at its purest. Both of those are reasonable for a catalogue of options and neither survives being copied onto a real page. Hotspots in this capture: - [KPI tile](https://patterns.konigi.com/dashboards/kpi-tile) — Label, value, unit and a sparkline behind it. No delta, no base, no window. - [Dark-first data palette](https://patterns.konigi.com/dashboards/dark-first-data-palette) *(this pattern)* — The dark half of the pair. The same six values in the light capture arrive as pale pink on white. - [Sparkline](https://patterns.konigi.com/dashboards/sparkline) — A column of them, each scaled to its own series, which is the comparison Tufte warns the arrangement invites. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) — Whole-tile background colour: the loudest channel available, spent on all six. - [Grayscale with alerts](https://patterns.konigi.com/dashboards/grayscale-with-alerts) — Seven rows, seven different colours, no resting state. Nothing here can read as abnormal. - [KPI tile](https://patterns.konigi.com/dashboards/kpi-tile) — Thirty numbers with no labels—the value with nothing attached to it. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) — No text at all. Colour is the only carrier, which is the WCAG failure stated as a feature. - [Header KPI strip](https://patterns.konigi.com/dashboards/header-kpi-strip) — Six tiles sharing one anatomy, which is the arrangement that reads as a row rather than as six things. ## Related patterns - [Categorical series palette](https://patterns.konigi.com/dashboards/categorical-series-palette) — Twelve services on one chart need twelve colors a person can tell apart. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) — State has to be readable before the number is. - [Grayscale with alerts](https://patterns.konigi.com/dashboards/grayscale-with-alerts) — If everything is colored, nothing is; normal should be gray. - [Wallboard mode](https://patterns.konigi.com/dashboards/wallboard-mode) — The dashboard is on a wall, ten feet away, with no mouse. - [Sequential and diverging scales](https://patterns.konigi.com/dashboards/sequential-and-diverging-scales) — Magnitude and direction need encoding in color, and the wrong ramp lies. ## Sources - [Nielsen Norman Group, Dark Mode vs. Light Mode—Which Is Better?](https://www.nngroup.com/articles/dark-mode/) - [W3C, WCAG 2.2—Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html) - [ColorBrewer](https://colorbrewer2.org/) --- Screenshots on patterns.konigi.com are reproduced for commentary and criticism. Product names and marks belong to their owners.