The Dark Art of Designing for Dark Mode

I assembled this info as part of a talk I gave on September 20, 2025, at XO Ruby New Orleans, but I’ve added extra content and resources here.

If you use dark mode on any of your devices—or even if you don’t—if you work closely with technology, you’ve probably seen a lot of interfaces or even website themes in dark mode.

Framer, Google Fonts, Linear’s website, and many others showcase designs in dark mode, even if you’re viewing them with “light mode” on:

Screen captures of three websites are layered on top of each other, each appearing with a dark mode look and feel: Google Fonts, Framer, and Linear.

There’s a surprising amount happening here. Even using dark mode all day every day on my machine for years as a professional designer, I didn’t fully intuit what design principles to follow when designing for dark mode.

After designing dark mode for several client products I’ve developed a sense for guidelines to follow when designing for dark mode, thanks to plenty of trial and error.

There are many ways to talk about, identify, and work with color. A lot of how we talk about and work with color depends on the medium.

  1. CMYK, color spaces, Pantone - you’re probably dealing with printed materials!
  2. Subtractive color vs. additive color - pigmented color (paint, ink, etc.) is subtractive vs. colored light (theater lighting, etc.) is additive
  3. P3 and other color gamuts - Color gamuts often come into play when we’re dealing with digital devices and how many colors they can display
  4. HSL / HSB / RGB / RGBa / Hex - Any and all of these are used on the web and when designing software.

Since we’re talking about software UI and dealing with color on screens, we’ll focus on #4—specifically HSB, or hue, saturation, and brightness, which is what I like to work with to manipulate color when I’m designing.

Color terminology 101

Let’s step back and define some of these terms. All color is a result of how our eyes physically process light waves. Each color has a different wavelength in the spectrum of light.

On the left is a chart showing a list of colors in the left column, with wavelengths in the right column in nm: red (650-800nm), orange (590-640nm), yellow (550-580nm), green (490-530nm), blue (460-480nm), indigo (440-450), and violet (390-430nm). On the right side is a rainbow ring of all the colors.

In color theory, we often talk about “the color wheel” which is really just the spectrum of light twisted around so that the violet and red ends are joined.

Hue is often what we mean when we say “color”—like red, green, blue, yellow. Hues have different wavelengths in the spectrum of light. Hue is the “H” value in both HSL and HSB.

Four color swatches with their H or hue values beneath each. From left to right: red (H: 359), green (H: 103), blue (H: 209), yellow (H: 45)

Here you can see the different H values for each color.

Saturation can also be called a color’s intensity. It is a measurement of how different from pure gray the color is. Saturation isn’t really a matter of light and dark, but it’s more like how pale or intense the color is.

Four color swatches move from high saturation on the left side with a bright, intense red to low saturation on the right side with a pinkish gray. Under the most saturated red on the far left are the values H:359 and S:99. The second swatch from the left is a dark pink color with the values H:359 and S:50. The third swatch is a dusty pink with the values H:359 and S:25, and the far right grayish swatch has the values H:359 and S:5.

Here you can see high saturation on the left moving to low saturation on the right, with a constant hue or “H” value of 359.

When we talk about how light or dark a color is, we’re talking about brightness. The higher the brightness of a color, the more light it emits on a screen.

A grid of around 80 color swatches shows white in the top left corner, black in the bottom left corner, intense saturated red in the top right corner, and dark burgundy reds in the lower right quadrant. The grid is labeled on the x axis as moving from low saturation to high saturation left to right. The y axis of the grid moves from low brightness on the bottom to high brightness at the top.

On the right you can see how brightness and saturation impact a color.

A 3-dimensional cylinder of colors has a pie slice removed from it. In the center of the cylinder are very light white-ish colors with an arrow pointing down that's labeled 'brightness'. Moving down the central line of the cylinder the colors darken to black. From the center of the cylinder to its perimeter is an arrow labeled 'saturation' with colors moving from white in the center to more saturated along the perimeter. In a circle following the perimeter is an arrow labeled 'hue,' indicating that from orange to yellow to green to blue the hue is changing.

So in this visual, we have hue, which is going around the circle. There’s saturation, where the center of the circle is less saturated than the edge, which has high saturation. And the brightness is moving from top to bottom, where the brightest colors are at the top, and the least bright colors are at the bottom.

When I work with clients on design projects, I’m usually given just two or three brand colors total, from which I derive a full color ramp based on those colors. HSB is what I use to do that.

On the right is a color ramp of 11 different purple swatches with hex codes and contrast values inside each square. Every color in the ramp is purple in hue, with very light-colored purples at the top moving to much darker purples at the bottom.

I manipulate the saturation and brightness of a brand color to make a color ramp with many steps. For this purple palette, the H value or hue stays the same. As you move from top to bottom, saturation increases and brightness decreases.

As you move from 50-950 on a color ramp (from top to bottom)

  • Hue stays the same
  • Saturation increases
  • Brightness decreases

This mimics how light and shadow impact color in the real world.

Two photographs from Erik Kennedy's article about color show colors in the real world. On the left is a street lamp casting a shadow against an orange wall, with color swatches showing two oranges—one taken from the orange wall in sunlight and one taken from the area of the street lamp's shadow against the wall. On the right is a street scene showing a palm tree casting a shadow against a blue wall as a man walks past. Two color swatches show the blue of the wall in sunlight vs. the darker blue where the tree is casting its shadow.

In these examples, the area of shadow has higher saturation and lower brightness than the area not in shadow.

Color and accessibility

Now that we’ve talked about hue, saturation, and brightness, let’s cover some basic accessibility guidelines when it comes to color.

Fortunately there are some well-documented accessibility standards we can follow for using color.

If you’re not familiar with WCAG, it stands for the Web Content Accessibility Guidelines. WCAG standards aim to make web content more accessible to people with visual, auditory, physical, cognitive, and neurological impairments. So it’s not just about color.

WCAG supplies us with guidelines for color contrast ratios—or the difference in contrast between two colors.

Three blue buttons with color swatches showing the text vs. the background, the button background vs. the page background, and the color contrast ratios for each. The top button has white text against a royal blue background for a contrast ratio of 4.5:1, and the blue button against the white page background has a ratio of 4.1:1 (both pass). The second button has dark blue text against a light blue background, with 9.5:1 contrast ratio for text, but the blue background fails contrast against the white page background with only 1.1:1. The last button has a turquoise background with white text, for 3:1 text contrast and 3:1 contrast of the button against the background.

For example, in the second button, the dark text has a contrast ratio of 9.5 to 1 against the blue button background. The same blue button background has a contrast ratio of only 1.1:1 with the white page background.

WCAG standards aim to make web content more accessible to people with visual, auditory, physical, cognitive, and neurological impairments. So it’s not just about color. But it’s really useful to have some guidance on color! Did you know that there are several different types of colorblindness?

8 different color ramps showing grays, reds, oranges, yellows, and greens show together under the label "Normal color vision", followed by the same color ramps with simulated colorblindness for deuteranopia and deuteranomaly where reds and greens are more difficult to tell apart.

8 color ramps showing grays, reds, oranges, yellows, and greens show under the label "Normal color vision" followed by the same color ramps under a colorblindness simulator labeled "Protonopia" and "Protanomaly"—types of color blindness that make yellows and greens look very similar.

As you can see with some of these oranges, yellows, greens, and reds, color contrast might help with legibility, but high color contrast alone may not be sufficient for certain types of color blindness to help with color differentiation.

WCAG cheat sheet:

  • Don’t use color as the only way to convey information
  • 3:1 - Buttons against a background
  • 3:1 - Large text (24px+)
  • 4.5:1 - Normal text against a background (any size)
  • 3:1 - Icons & graphs, any size
  • 3:1 - Focus rings, UI elements, or other signifiers

That’s why one of the standards from WCAG is not to rely on color alone as the only way to convey information. But even if all you’re going to do is comply with contrast ratios, it’s a lot to consider. Especially since this is not a complete list.

As if that’s not complicated enough, when you add dark mode to your website or application, you effectively double the amount of color combinations that you need to ensure are accessible.

I’m not going to go in depth about the solutions for dealing with this complexity, like setting up color systems with color variables, but I’ll include some resources at the end that may help you with that.

Color + your brain

I said earlier that all color is a result of how your eyes physically process light waves. That’s true. What’s also true is that colors are the way your brain, by use of your eyes, interprets those colors in a given context.

Color is perception—yes, the physical mechanisms like rods and cones in your eyes and wavelengths of light.

But there’s an added influence given how our brains process those physical inputs, like:

  • Proximity to other colors
  • The color temperature and amount of light in our given context
  • The way light reflects off of something (your glass phone screen, shiny vs. matte paper, etc.)

This could mean that the kind of light a color is seen in impacts the colors we think we see.

The dress from a popular meme of 'is this dress blue and black? or white and gold?' appears 3 times in slightly different lighting emphasizing either the perspective that it's blue and black (higher saturation and contrast) or white and gold (lower light, lower contrast and lower saturation) to illustrate the point that color perception is contextual.

Is this dress black and blue? Or is it white and gold?

A man in a dark room with a bright light shining on his face lifts his head off a pillow with raised eyebrows and very squited eyes. Above him in meme-style text is written "When I wake up to check my phone and my brightness is higher than 2%."

I bet you have some personal experience with this if you’ve ever looked at your phone screen when you’re in a dark room.

Our color perception is influenced by literally what colors appear next to each other.

A midnight blue rectangle with a smaller, less-saturated blue rectangle in its center. In the bottom left corner of the larger blue rectangle is another small rectangle that's brown. Under the blue rectangles is a large red rectangle with a small reddish rectangle in its center. In the upper left of the red rectangle is a dark blue rectangle.

For example, when you focus on the smaller boxes in the center of the blue and red, the small boxes at the center appear similar in color.

The same image of a large blue and large red rectangle with small rectangles inside them, but now there are numbers labeling each of the smaller rectangles. The small blue rectangle inside the large blue rectangle is labeled "1" and so is the blue rectangle in the upper left of the large red rectangle, indicating that both the "1" rectangles are actually the same color, even though our eyes do not perceive them that way. The small brown rectangle at the bottom left of the large blue rectangle is labeled "2" as is the reddish rectangle in the center of the large red rectangle. It appears very brown against the dark blue, very different than against the large red rectangle.

In fact they are very different colors. But we don’t perceive them that way because of the field of color surrounding them.

The small boxes next to 1 and 1 are the same color. And the small boxes next 2 and 2 are the same color. When you change the colors next to or surrounding them, it impacts your perception of the color.

This notion of “perception” or what I like to call “color relativity” is especially relevant for dark mode. Your punchy, vibrant brand colors or the reds you’re using to grab the user’s attention for errors may read really differently when they’re on a dark background.

Against a light background are two buttons with white text: the first button is red, the second button is dark blue.

The same red and blue buttons from the previous image but against a dark background. The blue button does not have a lot of contrast with the background so it has a "muddy" feeling by comparison than when it appeared against a light background.

A bright red or a punchy blue on a light background can feel muddy and against a dark background. Yes, checking our color contrast ratios here can guide us. But there’s a little more going on here. The perceived saturation of a color is not constant. It varies depending on the surroundings and what light a color is seen in.

Another way that our brains interpret and perceive information from our eyeballs has to do with light sources and shadow. In daylight, items that are more distant appear lighter in color.

[mountain image]

But—and this might sound obvious—in the dark, items that are closer to a light source appear lighter in color. Given the way we rely on light in the darkness to help us see, items closer to us and our eyes (and a nearby light source) appear lighter in color.

[hallway image]

This perception informs one of the key principles of designing for dark mode. In light mode we can rely on shadows alone to convey elevation. But in dark mode, items that are “closer” to us in the UI should get a lighter background to create that sense of elevation and proximity.

[elevation graphic]

For example, this dropdown menu on Linear’s website pops over the top of the page behind it. To give that sense of “closeness” to a light source near our eyes, it uses a lighter gray background than the page behind it.

[Linear graphic]

Common misconceptions

If you haven’t spent much time thinking about or dissecting why dark mode looks the way it does, it might seem pretty straightforward. What’s the big deal?

Let’s talk about some of the common misconceptions.

“Just invert the colors”

Isn’t dark mode just inverting all the color? Not exactly. That would mean any UI elements with shadow would have a soft glow around them. True color inversion might be fine for white or black elements like backgrounds and text. It will also change things like brand colors, which are often used for UI elements like buttons.

[inverted colors graphic]

“So…just invert the color ramps then?”

So just invert the color ramps and flip where the dark colors and light colors get used, right? So your yellows in dark mode are…well…darker?

Not exactly. That gets us that “muddy” feeling in dark mode, like with this dark red alert, which doesn’t have much contrast against a dark background.

[image of saturated alerts]

Or depending on the specific colors in the ramp, inverting the color ramp may mean that something that’s not that important (like our green success alert) steals a lot of visual attention from primary content or a call-to-action button.

“Can’t we just throw Tailwind’s ‘.dark’ class on it and call it a day?”

Haven’t tools like Tailwind solved this problem for us? Well…yes and no.

[tailwind docs image]

Tailwind dark mode docs

You can add Tailwind’s “.dark” class to the body of a page. But that assumes that you’ve specified the right color for every element you want recolored for dark mode. Or that you’re using pre-styled Tailwind components without customization or any additional brand colors.

Tips & tricks

So what parts of a color’s formula do you manipulate for a successful design in dark mode? What tips and tricks can you follow to do dark mode “the right way”?

1. Avoid using saturated colors.

It can be hard to pass accessibility requirements with saturated colors on dark backgrounds.

Desaturated colors are easier on the eyes, but also because of the way we perceive color, a desaturated color will feel more intense when it’s on a dark background.

[image]

Highly saturated colors will feel too intense in dark mode. Lower saturation will be easier on the eyes. Because of how we perceive color, it will still “feel” colorful in dark mode.

Keep the intense, saturated colors reserved for expressing brand or for call-to-action situations where you really do need to grab attention.

[image]

2. Don’t just invert your light mode colors.

Like we talked about before, don’t just invert your light mode color scheme. It won’t necessarily have enough contrast to meet accessibility standards.

Be patient and create a dark mode specific color palette that has enough contrast and is pleasant to the eye.

[image comparison from FL app]

Just inverting which your color palettes will probably result in icons or buttons not meeting contrast requirements against dark backgrounds.

[image of FL app #2]

3. Avoid using pure white or pure black.

White text on a pure black background can be challenging or painful to look at with certain vestibular or vision impairments. [ add anecdote about astigmatism]

4. Communicate elevation with lighter surfaces.

In light mode, we use shadows to communicate depth. The higher the surface is, the closer it is to the “light source” and the bigger shadow it casts.

This doesn’t work the same way in dark mode. But we can use the same “light source” theory and apply it to surface color.

[image of elevation swatches]

For elements in the UI that are “in front” like flyout menus or dialogs, use soft grays rather than dark blacks and bright whites. Shadows will still show on grays. It will still feel dark, but it’s much softer feeling and nicer to look at.

[example image of bottom sheets]

If you’re using grays and not blacks, shadows still help create depth in addition to the gray scale giving that sense of elevation.

[swatches of bottom sheets image]

5. Use a robust gray palette that carries some of your brand color

If your gray palette isn’t totally neutral, but carries a very desaturated version of a brand color, it will create harmony with other UI elements and feel more sophisticated and easier on the eyes.

[image]

Google’s Material Design guidelines [ add link!] recommend developing a gray palette with the brand color at 8% transparency.

Conclusion

Write it HERE

Resources

If you’re looking for a team to help you discover the right thing to build and help you build it, get in touch.

Design
#DarkMode
#Accessibility
#Color
#Wcag

Published on October 13, 2025

By
Glynnis Ritchie Glynnis Ritchie