colouriser
HomeLearn

Dark mode isn't just flipping the colours

Tim Knowles (opens in a new tab)13 min read

You can't make a good dark mode by reversing your colours. Reversing swaps your brand's hue, and even the smarter automatic flips turn yellow panels muddy and purples pink. What works instead is a near-black background, off-white text, and every accent colour re-picked lighter until it reads again. Blues and purples lose a bit of their vividness on the way, whereas reds needn't.

Try out three ways to flip a design dark

The first three dark versions sit on the same dark grey, #121212, so you can compare them fairly. The last one uses a near-black tinted with your colour.

Your light design

Button textreadable

#1D4ED8. Your colour reads well on white.

Reverse the colours

Button textreadable

#E2B127. Your colour became its opposite (177° round the colour wheel).

Flip the lightness slider

Button texttoo faint

#2758E2. Your colour barely changed.

Automatic dark mode

Button textreadable

#A3B0FF. Your colour drifted 12° in hue, towards purple. The pale yellow panel went olive-black.

Made lighter, on purpose

Button textreadable

#4077FF. Lightened until it reads, keeping 97% of its colour.

Royal blue: readable on white. Reversed, it becomes #E2B127 and is readable. Lightness slider flipped: too faint. Automatic dark mode: readable. Made lighter on purpose: readable.

For the curious: what each flip does

Reverse the colours is RGB inversion: each of red, green and blue becomes 255 minus itself, which turns every hue to roughly its opposite. Flip the lightness slider sets HSL lightness to 100 minus itself and keeps hue and saturation; HSL calls most vivid colours about 50% light, so they barely move. Automatic dark mode follows Android’s Force Dark and Chrome’s Auto Dark: CIELAB L* becomes min(110 − L*, 100) with a* and b* kept, text is only ever lightened and backgrounds only ever darkened. That’s why an already-light text colour is left alone. The hexes are approximate, because colours that land outside the screen’s range are brought back in simply. Made lighter, on purpose raises OKLCH lightness with the hue held, keeping as much colour as the screen can show, and stops at the first version that reaches 4.5:1 against its background, which is #121212 with 8% of your colour laid over it.

The chips use the WCAG 2.2 contrast ratio. Body text uses #333333 in light mode and 87% white (#E0E0E0) in the lightened version; the highlight panel is a pale yellow, #FFF4CC.

Three quick ways to flip a design dark, and the one that keeps your brand.

Why doesn't flipping the colours give you a dark mode?

Because "flipping" can mean three different things, and all three go wrong in their own way. I ran royal blue (#1D4ED8) through each one, then checked the result as text on Material Design's dark grey, #121212.

Way to flipWhat it doesRoyal blue becomesWhat goes wrong
Reverse the coloursSwaps every colour for its opposite, like a photo negative#E2B127, a mustardYour blue brand is now yellow
Flip the picker's lightness sliderSwaps 30% light for 70% light, and so on#2758E2, nearly the same blueStill too faint on dark (3.19:1)
Automatic dark modeFlips lightness on a scale built to follow the eye, keeps the colour#A3B0FF, a pale blueReadable, but pale yellows turn muddy and purples drift pink

Reversing gives you a film negative, so skies turn orange and faces turn blue. Material's purple, #6200EE, comes out as a lime green.

The lightness slider hardly moves a vivid colour at all. That's because your picker already calls most vivid colours about 50% light, and if you flip 50 you get 50.

Automatic dark mode is what Chrome and Android use when they generate a dark theme for a page or an app on their own. Their source code flips the lightness and leaves the hue and strength of each colour alone, which makes it the best of the three. But it still turns a brand-yellow panel (#FFCC00) a muddy brown (about #563600), and it pushes purples towards pink. That drift has its own article: Lighter versions of a colour without it turning purple. Logos can also disappear into the dark background. When Atlassian built Jira's dark theme, more than 1,200 images needed alternatives.

So it's no surprise the people who build dark themes say the same thing. In Apple's words, its dark colours "aren't necessarily inversions" of the light ones. GitHub's team puts it as "not as simple as inverting colors".

Colours that work on white can fail on dark

Say you've switched your design to dark and your royal blue links suddenly look faint. The colours that give you trouble have swapped sides. A text colour needs 4.5:1 contrast with its background, and the maths treats light and dark exactly the same. The thing is, your colours don't sit evenly between them. A deep blue is far from white but close to black. A yellow is the other way round.

ColourOn whiteOn #121212
Royal blue #1D4ED86.70 ✓2.80 ✗
Material purple #6200EE7.63 ✓2.46 ✗
Crimson #DC143C4.99 ✓3.75 ✗
Orange #FF7A002.61 ✗7.17 ✓
Yellow #EAB3081.92 ✗9.77 ✓

Blues, purples and reds that read well on white fail on near-black, and yellows and oranges do the reverse. So changing the background is only half the job. Every accent colour needs a second look.

And you can't dodge it with one in-between colour either. To pass 4.5:1 on white, a colour has to be dark enough. To pass on #121212, it has to be light enough. Those two limits never overlap, which means no colour of any hue passes 4.5:1 as text on both white and #121212. Against pure white and pure black, only a narrow band of mid-greys around #767676 just scrapes through both. If you'd like the contrast maths itself, that's in Can everyone actually read your design?

Worth knowing: white on #121212 isn't 15.8:1. That figure gets repeated a lot, but it's Material Design's minimum for dark surfaces that carry white text, set so white text still passes on the lightest raised panel. White on #121212 itself is 18.73:1. Material's own purple accent, #BA86FC, drops to 4.41:1 on its highest panel, just under the 4.5:1 line.

Good dark modes make every accent lighter

Every major design system I checked lightens its accent colours for dark: Google's Material Design, Apple, IBM's Carbon, GitHub's Primer, Radix and Microsoft, which makes its accent colours separately for each mode.

System and colourLight modeDark mode
Material Design 2, primary purple#6200EE#BA86FC
IBM Carbon, link blue#0F62FE#78A9FF
GitHub, accent text blue#0969DA#4493F8
GitHub, danger red#D1242F#F85149
Apple, system blue (since June 2025)#0088FF#0091FF

Apple's blue barely moves, because it was already light to begin with. (Its familiar #007AFF and #0A84FF are the values from before 9 June 2025.)

Now, a lot of guides get this part wrong. Material Design tells you to avoid saturated colours in a dark theme, and the advice spread. But Material's own method is to pick a lighter version of the colour, "the 200 tone of the primary color" instead of the 500. Its purple gets much lighter and loses about 38% of its colourfulness as a side effect, so the label says "less colour" while the method says "lighter".

That's why "desaturate" on its own can make things worse. One published guide "tones down" #007BFF to #357ABD for dark mode. On #121212 that takes it from a pass (4.71:1) to a fail (4.17:1), because the new colour is darker. When you adjust an accent for dark mode, reach for lightness first and leave the saturation slider alone.

Why do blues fade in dark mode while reds stay vivid?

Screens simply can't show a vivid light blue. The lighter a blue or purple gets on screen, the less strong it can be. Even Material Design's newer version admits a bright light blue is "not quite possible".

Reds get away with it because their strongest point sits higher up the lightness scale, so they can lighten enough to pass and lose almost nothing. I lightened each colour until it matched the contrast it had on white:

ColourDark-mode versionColourfulness kept
Royal blue #1D4ED8#6998FFabout 74%
Material purple #6200EE#A399FFabout 52%
Crimson #DC143C#F53950all of it

If you only want to reach 4.5:1, royal blue costs almost nothing (#3B73FF). The design systems show the same split, too. IBM's dark link blue lost 44% of its colourfulness, whereas IBM's, GitHub's and Apple's dark reds all stayed within 4% of their light versions.

In other words, "desaturate for dark mode" is true for blues and purples, because the screen forces it on them. For reds it's optional, and really a matter of taste. If your dark-mode blue looks a little washed out next to your light one, that's the screen's limit, not a mistake on your part. Why screens have these limits at all is in Why your brand colour looks different on your phone.

Try out lightening an accent until it reads on dark

Spring sale

Shop now#1D4ED8
49%
Readability on near-black2.80:1 · too faint
▲ 4.5:1, readable◆ your light design: 6.70:1 on white
How vivid it can be100% of yours
Striped: the most colour the screen can show at this lightnessLine: your colour’s own vividness

#1D4ED8 on near-black: 2.80:1, too faint. Keeps 100% of your colour’s vividness.

For the curious: how this is measured

Lightness and vividness are OKLCH L and C. The slider keeps the hue angle and asks for your colour’s own chroma; where the sRGB gamut can’t reach it, you get the most chroma sRGB can show at that lightness. The striped bar is that gamut edge. Readability is the WCAG 2.2 contrast ratio against #121212, Material Design’s dark surface. “Matches your light design” is the lightness where the contrast on #121212 equals your colour’s contrast on white.

Blues fade when they lighten because screens can’t show a vivid light blue. Reds don’t have to.

What background should a dark design use?

Go for a near-black, not pure black. Material recommends #121212, IBM uses #161616, and GitHub uses a blue-tinted #0D1117. Tinting the near-black with your brand colour is common practice too. Material's branded dark surface, #1F1B24, is #121212 with 8% of its purple laid over it. Apple is the exception, with a true black base and lighter grey panels above it.

On a dark background shadows don't show up, so depth has to come from lightness instead. Material lays a little white over each raised surface, from 0% up to 16%, which takes #121212 up to #383838 at the top. IBM's Carbon says its "layers become one step lighter" in dark themes. And Material still allows true black where saving battery matters most, such as on OLED screens.

A side note: "pure black causes eye strain" has no study behind it. Material Design, Microsoft's Fluent and plenty of dark-mode guides say pure black or very vivid colours strain the eyes, but none of them cites a source, and I couldn't find a study that shows it. Near-black is still a good choice for depth. It just isn't proven medicine.

Bright colours look harsher on dark

Colours look more colourful as they get brighter, and a dark neighbour makes them stand out even more. Apple says it plainly: "In dark environments, colors appear bright and saturated." So a vivid accent that was perfectly fine on white can start to glare. How neighbours change a colour is the subject of The same colour looks different in different places.

That's why you keep big areas dim. Material warns against bright colours on large surfaces, and Apple suggests softening white image backgrounds so they don't glow. Be careful with vivid blue text on black as well. In a 2026 study on an iPad, blue text on black was the hardest for the eye to focus, and 73% of readers found it the hardest to read. You'll often read that saturated colours "vibrate", but the honest version is narrower than that: some of them can be hard to focus.

Light text on dark also looks a touch bolder. Light spreads a little inside the eye, and the eye picks out dark detail more sharply than light, so light shapes on dark look slightly bigger than they really are. In a dim room your pupil opens wider, which blurs the image a little more again.

Dark mode isn't easier on your eyes for most people. Most studies find dark text on light reads better, and a 2009 study showed why: match the screen brightness and the difference disappears. Dark mode does worst with small text in a dim room, and fatigue studies mostly find no clear difference. The popular "half of people have astigmatism" claim traces back to an uncited 2008 blog quote.

What should you do differently in your next dark design?

Don't flip anything. Re-pick your colours for dark, one by one, and check each pair as you go.

  1. Make a second set of colours. In Figma, add a Dark mode to your colour variables. The new column starts as a copy of your light values, so you'll need to re-pick every one. In Canva, duplicate the page: when I checked in September 2026, Canva had no one-click dark version of a design, and its dark mode changes the app, not your designs. Figma's AI can now attempt a conversion, but check its colours with the same rules.
  2. Start from near-black. Use #121212 or a brand-tinted near-black. Make raised panels lighter, and keep big areas dim.
  3. Use off-white for body text. Material uses 87% white, which works out to #E0E0E0, at 14.19:1 on #121212.
  4. Lighten every accent until it passes. Raise each colour's lightness and stop at the first version that reaches 4.5:1 on your dark background (3:1 for large text and button edges). For small coloured text, aim higher, since Apple asks designers to strive for 7:1.
  5. Let blues and purples soften, and keep reds strong. The screen decides how much colour a light blue gets to keep.
  6. Save the full-strength brand colour for one or two things. Material allows it on one or two branded elements, such as a logo or a key button. There's more on colour roles in Building a brand palette that works.
  7. Check every accent on every surface. Your lightest raised panel is the hardest test, and Material's own purple fails it by a hair on its highest one.

Frequently asked questions

Should dark mode use pure black?

Usually not. Most design systems use a very dark grey, often tinted: Google's Material Design recommends #121212, IBM uses #161616 and GitHub a blue-black #0D1117. A dark grey lets lighter panels and shadows show depth, and it softens the jump to white text a little. Apple is the exception, with a true black base and lighter grey panels above. Pure black is fine where saving battery on OLED screens matters most.

Is dark mode better for your eyes?

Not for most people. With normal vision, you'll usually read dark text on a light background more accurately, because a brighter screen makes the pupil smaller and the image sharper. Dark mode does worst with small text in a dim room, and eye fatigue studies mostly find no clear difference. Nielsen Norman Group notes that some people with low vision, such as those with cataracts, may do better in dark mode, so it recommends letting people switch.

Does dark mode save battery?

Only on OLED screens, and less than you'd think. OLED pixels use power to light up, so dark pixels cost less, but an ordinary LCD keeps its backlight on whatever the colour. Purdue's Pranab Dash and Charlie Hu measured a minute of use in six popular Google apps on four OLED Android phones, with a tool that isolates the screen's share of the drain. At 30–50% brightness, typical indoors, dark mode saved only 3–9% on average. At full brightness, 39–47%.

Can one colour work on both a light and a dark background?

Not for text, in practice. A text colour needs 4.5:1 contrast with its background. Against pure white and pure black, only a narrow band of mid-greys around #767676 just passes both. Against white and the dark grey most dark themes use, such as #121212, no colour passes both at all. That's why design systems give every colour its own light-mode and dark-mode version.

How do I make a dark-mode version of my brand colours?

Make each one lighter until it's readable again, rather than flipping it. Put your colours on a near-black background and raise their lightness until text passes 4.5:1 contrast. Blues and purples will lose some vividness along the way, because screens can't show a vivid light blue, but reds can stay strong. Keep the full-strength brand colour for your logo or one key button.

For the curious

The three flips are RGB inversion, an HSL lightness flip, and a CIELAB L* flip. Android's Force Dark (CanvasTransform.cpp) and Chrome's Auto Dark (dark_mode_color_filter.cc) both use min(110 − L, 100) on L*, keeping a* and b*. Backgrounds are only darkened and text only lightened. My hexes for the auto-dark flip are approximate, because I clipped out-of-range values simply.

Contrast is the WCAG 2.2 ratio, (L1 + 0.05) / (L2 + 0.05), which has no direction. WCAG 3's contrast method is still "yet to be determined" in the 10 September 2026 draft. "Lightness" and "colourfulness" in the body are OKLCH L and C, measured in Color.js. I re-ran my checks of published contrast figures in culori, and the two agreed. The vivid-light-blue limit is the edge of the sRGB gamut.

Colourfulness rising with light is noted under CIE term 17-22-072, and neighbours changing a colour is chromatic induction, 17-22-075. Bright text looking bigger is called irradiation. Blue text focusing poorly is linked to chromostereopsis. On the web, prefers-color-scheme and light-dark() let a site follow the viewer's setting.

Sources (24)

Who wrote this

Tim Knowles

Websites, marketing strategy and AI training

Tim has worked in marketing since 2000. At Your Marketing Specialist he builds the websites, and colouriser is one of them. He is self-taught, and learns each subject in depth before he advises on it.

Each Article is written from Tim's own research, and every Figure runs on colouriser's own colour maths.

More about Tim (opens in a new tab)

Read next

  • Contrast and accessibility

    Can everyone actually read your design?

    The 4.5:1 contrast rule rests on a 1988 office-monitor standard, an allowance for older eyes and a fixed guess about room lighting. It's right most of the time, it never forbids your brand colour, and it flatters you in one place: light text on dark backgrounds. Where the number came from, where it slips, and whether to switch to APCA.

    18 min read

  • Screens and print

    Why your brand colour looks different on your phone

    Your phone can almost certainly show your brand colour exactly, so something else is changing it. Here's how to spot the three usual causes: your phone's colour settings, a screen that stretches colour, and a file set to the wrong colour range. Plus a five-minute check and what to keep fixed.

    13 min read

  • Building a palette

    Lighter versions of a colour without it turning purple

    Why light blue looks purple, and how to lighten a colour without changing its hue in Canva or Figma. Pale blues drift towards lavender for two separate reasons, your eyes and some older colour maths, and the fix is to steer the hue as you lighten, then check by eye.

    12 min read

  • Screens and print

    Why bright designs go dull in print

    A screen makes its own light, but paper can only reflect it. About half of a standard screen's colours can't print on standard European coated paper, and about four in five can't on uncoated. Here's which colours lose the most, why blue can print purple, and why free hex-to-CMYK converters can make it worse.

    15 min read

  • Screens and print

    Why your gradient goes muddy in the middle

    A gradient between two good colours can turn grey, olive or dark in the middle. There are two separate causes, and web browsers still blend hex colours the old way. Here's which colour pairs are risky, and how to fix the middle in Canva or Figma without any code.

    12 min read

All articles