Last time in the series, I highlighted some really nice hacks others shared to up your color game. This time, I’d like to share a few of my own design color hacks for UI design.

Avoid Intense Neutrals

Just because white on black is the best contrast you can get and great for web-to-print, some people have a very hard time with extreme contrasts. Also, due to some OLED device limitations, pure black can create ghosting on scroll when other colors are present on screen.
Try using a small black and white offset and get the same general feel and OLED power savings in your UI elements. Plus, you can reserve the white and pure black for when you really need to punctuate something. And remember, if you want something to look natural and personal, true white and black seldom exist in nature, so using it automatically adds a level of sterility to design.

For dark mode, consider using a dark color with warm tones to offset the blue light sleep issues so many developers are trying to counteract these days. I would even suggest using warm tones for your whites as well to help reduce eyestrain over a long period of use, as the pure whites and blueish light of a monitor can wear on users over time.

Ditch Primaries

Unless you are interested in making a statement or brutalist design, ditch the straight primaries. Try adjusting the Hue in the HSL value down. It can add a lot of character to your palette. One thing to note, the green and teal tones have a very high vibrancy on some monitors, it may also be valuable to bring down the lightness a tad as well.

Avoid the Mud

Often in design systems, there is a baseline color, and then steps up in brightness or darkness. And while it seems easy enough to bump the lightness up & down, it creates a muddy, desaturated look.

Looking for a quick win and a bump on color richness? Increase saturation alongside your lightness value. If you’re looking to get real radical vibrancy, pivot the hue for lightening toward your primary lighting source’s color (Yellow-Orange is generally where I lean), and darkening toward your primary ambient light color shading (again, I generally lean toward Indigo here). How drastically you apply these changes depends on the intensity of the lighting you’ve chosen for your theme.

Color Contrast Plus

For my final set of design color hacks, I’ll focus on contrast. Color contrast awareness is all the rage for accessibility checks these days. Essentially, if it’s text that must be read, it should be 4.5:1 to the background color. If it’s imagery that is critical for understanding intent or input region, 3:1 is your target.

With all that out of the way, know that some hues, such as blue, indigo, violet, work very well with very light-colored pairings. Yellows, oranges, greens, and even teals work better with very dark-colored pairings. Red works well with both light or dark pairings.

An additional contrast hack not often discussed is Alpha (transparency). In UI custom theming, taking a dark tone and applying transparency is more robust for calculated contrast than using a fixed color. However, it can get muddy if not handled well, so take care.

Bonus hack – Bootleg Dark Mode

If you don’t have time and desperately want to have a dark mode for your project, consider using a CSS filter on the root element to color offset your current UI. Just undo those filters on media elements that aren’t meant to be flipped.

Conclusion

These are some of my helpful design color hacks, but I’d be interested – what tips of yours did I miss? Drop me a line, would love to hear about them!