Course Blog Newsletter Subscribe

Color in UI Design: A (Practical) Framework

Originally posted on Medium.

Being pretty self-taught as far as UI design goes, I’ve always wondered why so many articles and books talk about color theory and palettes. In my experience, using a “split complementary palette” is about 0% predictive of me making nice-looking designs.

I have another word for that sort of thing: useless.

So if color theory doesn’t provide a solid basis for color in UI design, what does?

Let me throw an opinion at ya’: color modifications. It’s the tweaking of color that counts, not the picking of them from the color theory hat.

Or, said another way: The fundamental skill of coloring interface designs is being able to modify one base color into many different variations.

I know this sounds a little odd. Hear me out. I’m going to give you a framework for adjusting color in your UI designs.

This framework will:

  • Allow you to modify one theme color for basically any purpose in your UI (this is hugely powerful, and, as we’ll see, what apps like facebook are already doing)
  • Help you to predict what color changes will look good
  • Make color seem less subjective (“subjective” is often a word for “I haven’t figured out how it works” — and it’s a word you hear a ton when folks talk about color)

Are we cool? We’re cool?

Great.

Darker & Lighter Variations

One thing I’ve noticed across many great-looking interfaces is that they often have darker and lighter variations on a particular theme color.

You didn’t think that search bar was just a translucent black overlay, did you? Spoiler alert: it’s not. No opacity of black overlaid on that blue will give you the color of the search bar. It’s a variation picked by some other magic.

Quick, now look at Swell Grid, the beautiful surf forecast app.

Sha-BAM. We just got hit with a boatload of variations. How many are there? Go to the website and count ’em yourself. Practically everything on this page is a variation of the initial blue.

Or, here’s another simple example:

Even element states are variations on a color. This isn’t best described as “a palette of 3 blues”. It’s one blue with variations.

But this begs the question: how do you actually modify a color to get good variations?

We’ll get there, but I want you to understand this stuff from the ground-up. So here are our 2 trusty principles for figuring this stuff out:

  1. We’ll look to the real world for reference cues. Even though our interfaces are “fake”, we still copy like mad from the real world, because after decades of seeing things in the real world, we just expect light and color to work in certain ways.
  2. We’ll use the HSB color system. The short of it is: it’s the most intuitive color system with broad usage (for my purposes, Sketch and Photoshop). If you don’t know what hue, saturation, and brightness are, let’s break and meet back in 10.

Real-World Color Variations

Alright, look around you. What “color variation” are you undoubtedly seeing two dozen instances of every time you glance around your room?

Shadows.

You can think of a shadow as a darker variation on a base color.

Photo by David Blaikie

With me?

Now let’s jump into Sketch and get our color pickers and figure out exactly what happens when a shadow falls on our coral wall.

Like I mentioned, we’ll be figuring this out in HSB.

Note: Monitor/image color profiles might make these exact measurements different for you.

The brightness moves down — OK, so that was pretty obvious. But hold up – before we go generalizing too much, let’s actually look at another example.

Photo by Matthias Uhlig

Do shadows work the same way in Cuba? We’re about to find out.

Alright, now we can compare and contrast. Notice a pattern?

When there’s a shadowed variation of a color, you can expect brightness to go down and saturation to go up. We just looked at this in two instances, but as far as I’ve ever seen, it’s a solid rule you can go by.

Now hue is a bit crazier — it went down for the coral wall shadow, and up for the teal wall shadow. There is an explanation for that, but it’s much less important and a bit more esoteric than saturation/brightness — so we’ll come back to hue later.

The Rules

Let’s unpack these concepts a bit more…

Read the rest on Medium.

The Top 5 Free Fonts for UI Design

Never wonder what font to use again. Get a free guide to the best free fonts for UI design.

The Design Newsletter, featuring in-depth articles every month or six. Join 10,000+ others. No spam.

You Might Also Like: