Dark Mode Color Palettes: What Actually Works

Dark mode is not a light palette with the colors flipped. Invert a design that works on white and you usually get glowing text, muddy brand colors, and shadows that have quietly stopped existing. A dark palette is its own system with its own rules: a near-black that is not black, text that is not pure white, brand colors pulled lighter and less saturated, and depth signalled by lightness instead of shadow. Here is what actually works, with the numbers behind each rule.

Start with near-black, not black

Pure #000000 is the most common dark mode mistake. Against white text it produces a 21:1 ratio — the maximum possible — and that extreme edge is exactly the problem. On OLED screens the black pixels are literally off, so every letter sits on a void and bright text bleeds visually into it (halation), which is worse for the very large share of people with astigmatism. Pure black also leaves you nowhere to go: you cannot build a surface that reads as “below” black.

Use a near-black in the #121212 range instead. White on #121212 is still 18.7:1 — far above any accessibility requirement — while giving you room to stack lighter surfaces above it. That single decision is what makes the rest of a dark palette possible.

Dim the text, too

Full-strength white body copy on a dark field is heavier than it looks. The usual fix is a small emphasis scale rather than one flat white:

Before building a dark surface ladder, decide whether your grays should run warm or cool. The undertone carries through every elevation step and affects how your accent colors sit on top. See how to choose a neutral and gray color palette for a step-by-step approach to undertone selection and scale generation.

• High emphasis (~87% white, about #E0E0E0) — body text and headings. On #121212 that is 14.2:1.
• Medium emphasis (~60% white, about #A0A0A0) — captions, secondary labels, metadata. Still 7.2:1, comfortably past AAA for normal text.
• Disabled (~38% white) — genuinely inactive controls only, never information a user needs to read.

The point is not the exact percentages; it is that hierarchy in dark mode comes from stepping down from white, the same way light mode steps up from black. Verify the steps you pick rather than trusting the numbers — drop each pair into the Contrast Checker and keep body text at 4.5:1 or better.

Contrast does not survive the flip

The most expensive assumption in a dark mode project is that a palette which passes in light mode will pass inverted. It often does not, because relative luminance is not symmetric. A worked example with a common UI blue, #0D6EFD:

• On white: 4.50:1 — passes WCAG AA for normal text, exactly at the line.
• On #121212: 4.16:1 — fails.

Same color, same thresholds, different result. The thresholds themselves do not change in dark mode — 4.5:1 for body text, 3:1 for large text and UI components — so both themes have to be measured independently. WCAG Contrast Ratios Explained covers where those numbers come from and which one applies to a given element.

Desaturate and lighten your brand colors

Saturated mid-tone colors are the second thing that breaks. A vivid purple like #6200EE scores 2.46:1 on #121212 — unreadable as text and visually vibrating against the dark field, because highly saturated hues on near-black push the eye’s focusing system hard. Lift the same hue toward a lighter, less saturated version — #BB86FC — and it lands at 7.07:1.

The move is mechanical: keep the hue, raise the lightness, cut the saturation. Generate the steps instead of eyeballing them with the Shades & Tints Generator, then pick the first step that clears your contrast target. That is exactly the tint/shade relationship described in Tints, Shades, and Tones — dark mode mostly consumes tints of your brand color, while light mode consumes shades.

Map roles before replacing colors

A reliable conversion starts with an inventory, not a global search for black and white. List the colors used for the canvas, raised surfaces, primary text, secondary text, borders, links, focus indicators, and semantic states. Then give each role a light value and a dark value. This keeps a single HEX code from carrying several unrelated meanings. A gray that works as a decorative divider, for example, should not automatically become the border that makes a form field identifiable.

Work through one complete component before converting the whole product. A card is a useful pilot because it contains most of the system: canvas behind it, raised surface, heading, body text, link, border, and an interactive state. Build and measure that small set in both themes. Once it holds together, reuse those role decisions rather than creating a slightly different dark gray for every screen. The result is a compact palette with explainable steps, not a collection of local patches.

Elevation comes from lightness, not shadow

Drop shadows are a light-mode device: a dark shadow on a dark surface is invisible. In dark mode, the higher an element sits, the lighter its surface gets. A workable ladder from a #121212 base is roughly #1E1E1E for cards, #242424 for menus and dialogs, #2C2C2C for the topmost popovers — each step a small, deliberate increase in lightness. Keep the increments small; the difference between adjacent surfaces should be visible but never look like a different color.

Do not confuse elevation with importance. A destructive button may be important without floating above the page, and a menu may be elevated without deserving the strongest accent. Surface lightness should explain physical layering; color and typography should explain priority. Keeping those signals separate makes the interface easier to scan and prevents every dialog from becoming a bright slab.

Use a perceptual color space to build the ramp

Building these ramps in HSL is frustrating, because equal lightness steps in HSL are not equal perceptual steps — hues shift brightness as you move. OKLCH fixes that: lightness is perceptually uniform, so a ramp built in OKLCH keeps its hue identity while stepping evenly. Convert your existing brand colors and read their lightness and chroma with the Color Code Converter; the mechanics are in HEX, RGB, HSL, and OKLCH Explained.

Design every interactive state

A passing resting color is only the beginning. Buttons, links, fields, tabs, and toggles also need hover, pressed, selected, focus, and disabled treatments. Test each state on every surface where it can appear. A focus ring that is clear around a control on #121212 may disappear when the same control moves onto a #242424 dialog. A selected tab may pass as text while its subtle filled background is indistinguishable from the panel behind it.

Be cautious with opacity as a shortcut. A translucent foreground produces a different final color on every surface beneath it, so one “60% white” token can have several actual contrast ratios. Opacity is useful when that blending is intentional, but the composed result is the pair that must be measured. Disabled controls are a special case: they may be visually subdued, yet their label should not be the only place where essential instructions or status appear.

Rebalance the proportions

Accent colors carry more visual weight against a dark field than a light one, so the ratios that worked in light mode feel loud when inverted. If you use the 60-30-10 rule, treat the accent as a ceiling in dark mode rather than a target — closer to 5% than 10% is usually right. The dominant near-black stays dominant, the elevated surfaces do the structural work, and the accent gets used only where you genuinely need a signal.

Reserve that smaller accent budget for actions, current selection, and focus rather than decoration. If large illustrations, badges, links, and primary buttons all use the same luminous hue, the interface loses its hierarchy even when every pair technically passes. A quieter supporting tint can preserve brand character in broad areas while the strongest version remains available for the moment that needs attention.

Keep theme choice predictable

Dark mode is usually an environmental preference, but it should not become a moving target. Respect the operating-system preference as an initial choice, provide a clear user override, and keep that choice consistent across pages. Switching themes during navigation makes users re-adapt and can produce a bright flash in the exact low-light setting where dark mode is most useful.

Also check content that does not inherit interface tokens. Syntax highlighting, maps, charts, illustrations, status badges, and third-party widgets often carry fixed light-theme colors. Review them as separate palettes. The goal is not to darken every pixel; photographs and intentionally light content can stay light when a contained treatment makes the boundary clear. The important rule is that controls, labels, and meaning remain legible around them.

Check it the way people actually use it

• Both themes, every pair. Text on surface, text on accent, borders and focus rings against their neighbours (3:1 minimum).
• Images and logos. Assets with baked-in white backgrounds turn into glowing rectangles. Provide a dark variant or a transparent PNG/SVG.
• Semantic colors. Success green and error red both need lighter, less saturated dark-mode variants, and they still have to be distinguishable without hue — run them through the Colorblind Simulator. Color Blindness Types Explained covers why hue alone is never enough.
• Charts and dashboards. Data colors break first on a dark field: saturated series vibrate, thin strokes disappear, and light-mode ramps lose their bottom end. Data Visualization Color Palettes covers rebuilding categorical, sequential, and diverging sets so lightness still separates the series.
• Real brightness. Dark mode is used at night at low screen brightness. A palette that looks refined at 100% brightness can turn into indistinguishable grays at 20%.

Finish with a component-by-component review rather than a page screenshot alone. Keyboard through the interface to expose focus states, open menus and dialogs to reveal the full elevation ladder, and inspect validation, loading, empty, and error states. Then compare the same task in both themes side by side. The two palettes do not have to look like photographic negatives, but they should preserve the same information hierarchy and make the same next action obvious.

The short version

Base on a near-black around #121212, not #000000. Step text down from white instead of using it at full strength. Lighten and desaturate every brand and semantic color, and re-measure every pair — light mode ratios do not transfer. Build surfaces upward in small lightness increments instead of reaching for shadows, generate the ramp in a perceptual space, and use the accent sparingly. Dark mode is not an inversion; it is a second palette that happens to share your hues.

Try it yourself

Everything on ScanHue is free and runs in your browser: Photo Palette Extractor · Contrast Checker · Color Code Converter. How these guides are written and checked: editorial standards.