Dark Mode Color Palette: How to Pick the Right Shades Without Eye Strain

Darkish mode has been the default choice for a extensive chew of customers considering round 2019, whilst iOS and Android both shipped machine-level guide for it. By using 2026, most design structures bring both a light and dark subject matter as a baseline expectation. And but the excellent of darkish mode implementations has now not caught up with how not unusual they are.

The failure mode is nearly always the equal: a clothier takes their mild mode palette, inverts the apparent values, swaps white backgrounds for close to-black, and calls it executed. What ships looks sharp in a Figma mockup on a calibrated show in a dim room. What users experience is a UI that feels harsh after ten mins, text that seems to pulse or glow slightly at the edges, and accent colors that look like they belong on a gaming keyboard as opposed to a professional device.

The trouble isn't darkish mode. The trouble is treating darkish mode as a beauty layer on pinnacle of a mild mode palette, instead of a parallel gadget built on different perceptual rules.

Why pure Black Is the wrong place to begin

The instinct to apply pure black (#000000) or close to-pure black (#0D0D0D) because the base background in darkish mode is comprehensible. Darkish mode have to be darkish. Black is the darkest aspect. So black backgrounds need to be the maximum darkish-mode component viable.

In practice, pure black backgrounds create problems that compound each different.

The Halation hassle

Halation is the visual phenomenon wherein high-evaluation edges among very vibrant and really dark elements appear to bleed or glow slightly. It is maximum reported on OLED shows — together with the iPhone 16 pro, Samsung Galaxy S25 extremely, and the majority of flagship Android telephones — exactly because OLED produces genuine black by way of turning pixels off completely, developing a luminance ratio among white text and black heritage which could exceed 1,000:1.

At that comparison ratio, white textual content on a natural black history creates a sort of visual vibration on the letterform edges. The human visible system's contrast sensitivity is not designed to technique that a great deal difference. The end result is that text appears to glow at the edges — no longer due to the fact there's definitely a glow, but because your eye's cone cells are slightly oversaturated via the adjacent intense values. Read that interface for twenty mins and you may note a diffused fatigue that doesn't happen with a dark grey history and barely dimmed textual content.

This isn't a minor aesthetic quibble. The cloth layout team documented this precise problem after they moved from pure black to #121212 as their endorsed darkish subject floor in cloth layout 2. Apple uses #1C1C1E as their popular darkish mode historical past in UIKit, no longer black. Neither of these is an coincidence.

What the satisfactory dark UIs Use

Look closely at the background colors in production dark interfaces from teams who have put serious thought into this:

The L* column is the key perception right here. These are not random choices — they cluster among L* 7 and L* 12 for primary page backgrounds. That range is dark enough to experience like a proper dark mode, mild enough to keep away from the halation and eye fatigue troubles of actual black, and sundry sufficient to create clean elevation hierarchy while you layer surfaces on pinnacle of every other.

Constructing Your Darkish Background Scale

A dark mode that handiest has one history colour isn't without a doubt a darkish mode gadget — it is a dark mode hack. Real intensity in a dark UI comes from a layered surface system where every elevation degree has a wonderful, perceivable (but not jarring) historical past coloration.

The 5-Layer Surface System

Think about your dark mode backgrounds as five layers stacked from deepest to maximum elevation:

Each step is more or less four to six L* units — a difference this is significant as a awesome shade whilst elements overlap, but subtle sufficient that the interface does now not experience like a staircase of gray packing containers.

In which most designers go incorrect: They pick out a base background and a card background which can be only 2 L* units apart. On a calibrated screen in a vibrant room, they appearance one-of-a-kind enough. On an uncalibrated pc screen viewed at an perspective, or on a telephone in a darkish bed room, the two surfaces are indistinguishable and the UI appears flat.

Selecting Your Base Hue for Darkish Surfaces

Pure neutral gray (#121212, #1E1E1E) is secure but sterile. A subtle hue to your dark surfaces — simply enough to sense intentional without being apparent — makes the interface sense warmer or extra subtle relying on what you select.

The trick is to maintain the chroma (saturation) extremely low in OKLCH phrases. Most professional dark usathat feel polished use a chroma of C=0.005 to C=0.005 in OKLCH — barely any color at all, but enough to differentiate them from a flat gray.

The differences among these are invisible in a screenshot evaluation — they most effective register when you take a seat with an interface for a couple of minutes and experience whether or not it's miles at ease or scientific. However they are the difference between a dark mode that feels designed and one that appears like a dark mode checkbox changed into ticked.

Convert Your colorings to HEX, RBG etc

The Text Contrast Trap: Why complete White Hurts

This is the second area darkish mode implementations continuously fail. Full white textual content (#FFFFFF) on a darkish heritage passes every WCAG comparison checker with flying colours — the ratio in opposition to #121212 is about 18.1:1, some distance exceeding the 7:1 AAA threshold. Mechanically correct. Perceptually harsh.

Contrast Ratios vs. Perceptual Consolation

WCAG evaluation ratios measure luminance distinction the use of a method calibrated on the whole for mild backgrounds. At the extreme stop of dark mode — close to-black backgrounds blended with complete white textual content — the ratio is so excessive that it creates the equal halation difficulty mentioned in advance, wherein the attention struggles to hold consciousness at the letterforms due to the fact the surrounding context is so much darker.

The counterintuitive fact: Reducing your body text from natural white to a dimmed white with L* round 85 to 90 (something like #E2E2E2 or #DEDEDE) actually improves legibility for extended reading in darkish mode, even though the WCAG ratio quantity is lower. The assessment is still extraordinary — properly above 4.5:1 — but the luminance spike at each character is much less excessive.

Human analyzing in dark environments is customized to slightly decrease contrast than in bright environments. Your mind adjusts its benefit whilst the ambient light drops. An interface that ignores that adjustment and maintains hammering maximum contrast at the reader is preventing their visual system, not running with it.

The text Hierarchy for Dark Mode

A practical text opacity system gives you clean hierarchy with out building out separate color tokens for every textual content degree:

The key flow is retaining chroma (C) at 0.005 throughout all text stages, with a completely moderate cool hue (H=264). This offers the textual content a subtle blue-grey quality that reads as slightly cooler and more current than a flat neutral grey, while ultimate absolutely readable at each supported tier.

Do not pass underneath 4.5:1 for something a user desires to study. The disabled row is blanketed to expose where the machine bottoms out — no longer to suggest that 2.3:1 is suitable for informational content.

Accent colors in dark mode: The Saturation Hassle

Right here is the aspect about accent shades in dark mode that most tutorials pass completely: the accent colour from your mild mode palette is nearly truely incorrect for darkish mode — now not due to the fact the hue is wrong, but due to the fact the chroma (saturation) that looked outstanding at L* 40 on a white heritage seems competitive and garish on the identical chroma on a close to-black history.

Why Your mild-Mode Blue seems incorrect in dark Mode

To your mild mode, you likely have a emblem blue sitting around L* 45 to 55 with mild-to-high chroma — some thing like oklch(0.50 0.22 264). On a white background at L* a 100, that blue reads as confident, expert, and clean. It has sufficient comparison against the white to be definitely interactive with out being neon.

Drop that exact same blue onto a darkish background at L* 8. Now the blue is sitting against something 40 L* devices darker than it turned into earlier than. The chroma has not modified, however the perceptual effect of that chroma has modified rather because the surrounding context has shifted. The same saturation that examine as confident now reads as electric powered. In a darkish surroundings, excessive-chroma colorations feel extra severe — the identical manner a lamp seems brighter when you switch it on in a dark room than whilst you turn it on during sunlight hours.

This isn't an opinion. It's miles how luminance variation works in the human visual system. And it approach that dark mode accessory colours almost constantly want to be lighter (better L*) and barely less saturated (lower C) than their mild mode equivalents.

Adapting accent shades with OKLCH

The OKLCH adjustment for a dark mode accent follows a predictable sample: growth L* by means of 15 to 25 gadgets, and reduce chroma through 10 to 20%.

The hue perspective (H) remains locked. The alternate is totally in lightness and chroma — that's simplest possible to do cleanly in OKLCH. try to do this in HSL and the hue will glide as you alter S and L values, because HSL isn't always perceptually uniform. A blue adjusted closer to lighter in HSL will shift barely in the direction of cyan or crimson depending at the hue perspective. The equal adjustment in OKLCH stays exactly at H=264 because the axes are orthogonal in perceptual space.

The result of this adjustment is an accent shade that passes contrast in opposition to your dark surface at a relaxed ratio, does now not experience neon or aggressive, and — crucially — nevertheless reads because the identical brand shade because the light mode equal, because the hue has not moved.

Semantic shade Roles in dark Mode

Each mature design device separates colour into semantic roles: no longer simply what the colour looks like, however what it way. In darkish mode, this separation will become extra important, not less, due to the fact the perceptual weight of colours shifts and a poorly selected semantic colour can talk the wrong urgency.

A note on the caution shade especially: yellow in dark mode is a known problem. natural yellow (#FFFF00 or similar) on a dark heritage is nearly unusably harsh — the luminance spike of a especially chromatic yellow towards near-black creates excessive halation. Maximum dark mode caution shades work higher inside the amber-orange range (H round 55 to 70 stages) at substantially reduced chroma compared to the light mode equivalent.

Shadows, Glows, and Elevation in dark Mode

Elevation in light mode is communicated typically thru shadows — a drop shadow underneath a card reads without delay as that card sitting above the floor. In dark mode, shadows stop running. A dark shadow on a darkish historical past is invisible, and a light shadow looks as if a border, not intensity.

Dark mode elevation calls for a totally one-of-a-kind device: surface lightness as elevation. The higher an detail sits inside the visible stack, the lighter its background surface is. This is the logic at the back of the 5-layer floor gadget described in advance — elevation is encoded in heritage luminance, no longer shadow depth.

For cases where you truly want to signal elevation with a visual impact (a floating motion button, a toast notification, a command palette), darkish mode makes use of subtle ambient glow outcomes rather than drop shadows:

The border technique — a 1px border at white with 6 to 12% opacity — is one of the maximum useful equipment in dark mode UI and is underused. It reads as a diffused separation between surface degrees with out including seen contrast, and it works due to the fact the mild lightness of the border reads in opposition to both the element heritage and the web page history simultaneously.

The whole dark Mode Palette Reference

Placing all the above together right into a single reference. That is a workable place to begin for a professional dark mode gadget — not the simplest answer, but a properly-reasoned basis you may adapt to any emblem.

Each price on this desk can be proven and adjusted the usage of a shade converter that helps OKLCH enter. The approximate HEX values are sRGB gamut conversions — on a P3 show, the OKLCH values will render slightly greater shiny than the HEX equivalents recommend.

Checking out Your dark Palette before You deliver

Darkish mode palettes fail in predictable approaches that do not show up on a calibrated screen in a lit studio. Here are the 4 tests that catch the problems before users do.

Test at full brightness on OLED. Pull your layout up on an iPhone or Samsung flagship at most brightness, in a normally lit room. This is where halation seems maximum actually. In case your textual content glows at the rims or the surface layers are indistinguishable, you will see it right here earlier than anywhere else.

Test at minimal brightness in a dark room. This catches the other hassle: surfaces that appeared distinct at excessive brightness fall apart into the identical color at low brightness because the luminance variations are too small. Your L* steps need to work across the entire brightness variety your users will absolutely use, now not just at your studio default.

Take a look at every semantic colour towards every floor degree. Your errors red needs to be readable on bg-depth, bg-surface-0, and bg-surface-3. Run the evaluation ratio for each combination. At least one will wonder you — normally an accessory colour that passes on the darkest history but fails on the lightest surface level due to the fact the L* values are too close.

Evaluate with shade blindness simulation. Red-green difference in darkish mode is more tough than in mild mode because the perceptual pop of both shades is decreased in darkish environments. Your blunders and achievement colorings need to be distinguishable by using more than hue alone — icon form, text label, or contrast difference all help.

Dark mode isn't a dark model of your mild mode palette. It's far a parallel color gadget that operates below a fundamentally distinctive set of perceptual rules — guidelines about how the human eye responds to luminance in low-mild environments, how elevation is communicated without shadows, and the way accessory colorations want to shift when the context around them modifications from white to near-black. Get those guidelines right and the end result is an interface that users pick out to stay in, now not one they tolerate.