Let’s talk about color for a minute.
I’ve worked with a lot of developers and designers in my career, and a major distinction between how developers and designers perceive their ability to design can be narrowed down to a few factors. These factors include things like drawing ability, a natural eye for composition, the ability to choose harmonious color themes, and others.
In fact, one of the problems I’ve heard most from developers who want to learn about design, is that they have a hard time coming up with color themes. This means choosing a color theme for a website, for a native application, or even to spruce up documentation for an API that they’re writing.
Color makes an incredible impact on how we perceive and retain information, but psychology and color theory aside, there’s something satisfying about creating something colorful and connected.
A (Short) Primer on Color Theory
If you’d like, you can skip the theory and read about how you should choose colors. But if you’d like to learn some basics, read on. I promise it won’t be boring.
Forget everything you think you know about color. Unless you know a whole lot about color. Then you probably shouldn't forget it.Me, just now.
We grow up learning about primary colors Red, Yellow, and Blue (we’ll call it The RYB Model) and that if you combine them you get black. While that is technically kind of true if you’re talking about pigment (e.g. paint, ink) it’s actually not the case when talking about light, which is the medium that computer monitors use. Likewise, the RYB color model is antiquated, and modern color theory dictates that the primary colors of pigment are actually Cyan, Magenta, and Yellow (CMYK - K means black) and not coincidentally the colors you have in your printer. Combining pigment colors to create darker variants is known as Subtractive Color.
With light, however, the primary colors are Red, Green, and Blue (RGB). You may be familiar with this knowing that monitors display in RGB, or that you sometimes define colors in code as some variant of
rgb(xxx,xxx,xxx). When you combine these colors together, you get lighter variants, and when combining all three together, you get white. This is known as Additive Color.
We could explore a lot more on color theory, but the main point I’m trying to drive home is that when you’re designing something, you’ll generally work in an RGB model for screen, or a CMYK model for print.
In design tools like Photoshop it’s possible to switch between modes, but some colors don’t translate easily from one model to another, and this is known as being out of gamut. For example pure Red cannot be accurately reproduced using combinations of the colors in the CMYK model. Gamut is a complex topic and one you won’t really need to know, but I’ve introduced it here to help outline a bit more of the difference between CMYK and RGB color models.
Hue, Saturation, and Value
Colors can also be represented in the HSV model. All I want you to understand here is that color is made up of three components: hue, saturation, and value (or lightness, or brightness, or whatever). Basically these mean:
Changing HSV values creates any color, much in the way changing the values in RGB or CMYK do.
HSV can also be represented numerically, but we’ll leave that as an exercise for the reader if he or she wants to learn more. Oh, and just because we have these different models doesn’t mean the colors are any different. Red is Red. Blue is Blue. The color models are simply different ways of describing the color, much like saying a Tesla is a “Best In Class Fully-Electric Vehicle” or a “Super sweet ride, maaaaan”.
When I first published this article, the first feedback I received was “Why didn’t you talk about contrast?!” It’s true that no article about color in design would be complete without at least an introduction to contrast.
Contrast is the difference in luminance or color that makes an object (or its representation in an image or display) distinguishable. It is measured in a scale of Contrast Ratio. I’m paraphrasing here, but this is basically what Wikipedia tells us.
Higher contrast makes things stand out more (Black text on a White background). Lower contrast makes things stand out less (medium Green text on a dark Green background). The more important an element is in your application, the more important contrast is in its presentation.
Contrast is incredibly important for accessibility and depending on your audience you can set higher or lower requirements in your design. For example, if your software targets a small niche of younger, probably-design-savvy student types then you can generally choose a color palette with lower contrast, provided of course that you’re not likely to exclude important users with compromised vision or color blindness. If, however, your audience is older or more general population, you will probably want to consider choosing a color palette with higher contrast.
There is loads of information online about how to quantify contrast and minimum recommended contrast ratios for accessibility depending on text size, proximity, etc., but the point I’m trying to drive home is that your information should be accessible to your users, and contrast is one tool to help with that.
Let’s look at some examples:
|Contrast Ratio 13.7||White on Darker Blue|
|Contrast Ratio 7.9||White on Darker Red|
|Contrast Ratio 2.0||White on Gold|
It’s also important to note that contrast can be deceptive. Taking the colors above and converting them to grayscale (same hue, same lightness, zero saturation) shows very clearly the differences in contrast.
Contrast Ratios (Grayscale)
|Contrast Ratio 13.7||White on Darker Blue|
|Contrast Ratio 7.9||White on Darker Red|
|Contrast Ratio 2.0||White on Gold|
When in doubt, higher contrast is generally better, and with carefully chosen colors won’t adversely affect the color palette as a whole.
Here are some tools that help you understand contrast in design:
- Contrast Ratio Tool from GitHub. A simple tool that tells you the contrast ratio between two colors. We’ll talk about what the numbers in the tool mean shortly, but as an example you can enter Red as the background color, and Blue as the foreground color. Why these colors exactly? Because the combination is terrible and I want to make it clear why color choice is important.
- Colorable (Demo). A demo of a tool which is actually a Node package. This tool’s website has some other demos too which allow you to quickly test colors together and see their contrast ratio.
- Chrome Accessibility Developer Tools. An extension for Google Chrome that points out potential accessibility issues on websites, including contrast ratios. Accessed via right click → “Inspect Element” in Chrome.
- Color Contrast for Better Readability. An excellent article published by the firm Viget Labs. And yes, I stole my color combinations from this blog post (shhhhh).
Lastly, I should also mention that users with compromised vision generally have options available to increase contrast, but it’s not necessarily something you should rely on.
Enough about contrast though, let’s talk about math.
Color Theory in Numbers
I’ve introduced color theory because of the math behind color, which is the part of color choice that I’m certain will resonate with developers. The idea that colors can be broken down into mere numbers, and with simple arithmetic, used to create variants of colors, is fascinating.
On screen, the primary colors in the RGB color model are represented with simple integer values from 0 to 255 (just like an array, it’s a 0-based index, so there are 256 values). If you’re paying attention, you’ll notice that 256 is a square, with the square-root value of 16 (16^2 = 256), and this becomes important later on.
We break down RGB color into its three components and assign a value to them, always remembering that if we combine them all at full value (remember, Additive Colors) we get White.
A simplified example
|rgb(0, 0, 0)||Black|
|rgb(119, 119, 119)||Middle Grey (50%)|
|rgb(255, 0, 0)||Pure Red|
|rgb(0, 255, 0)||Pure Green|
|rgb(0, 0, 255)||Pure Blue|
Some other examples
|rgb(0, 172, 237)||Twitter Blue|
|rgb(187, 0, 0)||YouTube Red|
|rgb(255, 0, 132)||Flickr Pink|
And so on.
This is for illustration purposes. You don’t really need to understand this at anything more than face value. Colors are represented in software using numbers. That’s it.
Now, remember I said that the root of 16 becomes important? If we break those numbers down into their hexadecimal equivalent (base-16 system) we can generate hex color codes usable on the web (or our software, if our environment allows it). Hexadecimal color codes are in the format
#RRGGBB, which correspond to the RGB values, again with 0 (zero) being the lowest and F being the highest.
For example, with Black we have an RGB value of rgb(0, 0, 0) which equates to a hex code of
#000000. With White, we have an RGB value of rgb(255, 255, 255) which equates to a hex code of
#FFFFFF. Here are our exmaples from above represented using hexadecimal codes:
Simple Hex Example
|#777777||Middle Grey (50%)|
Other Hex Examples
How You Should Choose Colors
There’s a lot more to color theory of course, but I wanted to introduce the basics to help you understand why colors are broken down into numbers and introduce what those numbers mean. Every color tool out there will generate color in RGB, CMYK, and Hexadecimal (there are other models too) so you don’t really have to know much beyond that. But it’s nice to know.
So what else do we need to know about colors?
I have some thoughts:
- Choose colors that resonate together. This is a vague concept, to be sure. By and large, and in lieu of color blindness, humans are good at detecting whether colors go well together. If a combination of colors looks “off” in some way, then it probably is.
- Be strict about colors. The following list will help you define some colors, and I recommend storing them in constants or variables of some sort. Make them immutable, both in mindset and practice. Color harmony is our goal here.
- Use a simple palette, and add to it sparingly. Start with a very limited set of colors that you like. Expand on it slowly and only when necessary to convey your message or draw attention to things.
Tips for choosing a palette:
- Choose 2-3 colors from your brand, including an accent color. I prefer to use 1-2 colors from my branding (logo, or company colors) as my main theme and 1 optional accent color. If you don’t have a brand, pick them using one of the tools I’ll cover shortly.
- Define 1 dark non-black color, 1 light non-white color. The goal here is to have some neutral colors that you can use for fonts, panel backgrounds, outlines, and other layout features. You can use varying shades of these colors for different components in your layout. For example, on a sidebar you can use a dark blue-black color, but you may want to have content panels with a lighter variant of that color, and a complementary border color. To create variations on these colors, think about changing the Saturation and the Value, as discussed earlier; we don’t want to generate new colors, we just want variations of ones we’re already using. These variations will all come from the dark and light neutral colors you choose. Oh, and don’t choose 100% Black; it’s boring and harsh. Same goes for 100% White, which is really only well suited as a background or accent color.
- Define a set of “status” colors. These will be used throughout your application. These can represent states like success, warning, error, information, and muted. That usually means a list of Green, Yellow or Orange, Red, Blue, and Grey, respectively. I often reuse brand colors in this collection.
These are just simple guidelines, and of course there are exceptions!
No Designer or Brand? Here’s How You Choose Colors.
Fortunately, there are a lot of great tools to help you choose color themes if you don’t have a base to work from.
This is one of my favorite tools because it is dead simple to use, if even just to come up with ideas. Simply go to the website, open the Generator, and press the spacebar to randomly generate color themes. When you see a color you like, click on it to lock it, and continue generating themes that complement your locked selections.
If you do have one or two brand colors that you’d like to base a theme on, you can enter those into Coolors.co and lock them. Then the Generator will continue to generate random themes that complement them.
Following is an example of an exact palette I used on a recent project, which I used Coolors.co to create (I actually later developed a new logo and based the entire brand on this color theme):
With the above palettes, we literally have every color we need to build a beautiful interface for our software. Again, our goal is color harmony, and by sticking to a limited set of colors, we can easily achieve that.
Coolors.co is an excellent tool, both for inspiration and for choosing concrete color themes. Native apps are available for iOS and Android (not free, but worth every penny), and there’s also an Adobe addon if that’s more your style (also not free, but presumably worth it).
####Adobe Color CC
A bit more advanced and a different paradigm than Coolors.co, Adobe Color CC provides tooling which lets you select a base color and then generate harmonious themes around it by simply dragging a color slider around. This allows you to generate themes of “complementary”, “analogous”, “triad”, and other forms of color combinations based around rules of color theory and harmony.
You don’t need to know about these terms, but clicking through them should show a pretty clear example of what they mean. Below is an example after entering our primary color,
#00AEEF into the center base color of the tool:
One cool feature of Adobe Color CC is the ability to upload a photograph, and it will generate a set of well-integrated color palettes from that photo. It’s long been a designer tip to extract colors from photographs, and Adobe Color CC provides an automated way of doing it here.
I recently discovered COLRD, a site for quick inspiration on color palettes with a layout much like Pinterest. Their tagline is “Create and share color inspiration with the world”, and a quick visit reveals why. Much like the Adobe Color CC photo option, COLRD also contains tons of photos and their extracted color themes.
Clicking on a listing brings you to a detail page where you can view color data in RGB, HEX, or HSL values, and likewise see licensing for the colors. By and large, the palette licensing is Creative Commons Zero, and let’s be honest, copyright on a color palette is ludicrous. That said, be respectful to the authors if you want to use a palette that requests attribution.
There’s nothing wrong with using a site like COLRD as inspiration, or to find a primary color you like to place into a tool like Coolors.co or Adobe Color CC.
Now that you’re equipped with some tools to generate color themes, you’ll definitely want to make sure you define your colors in your code in a way that makes it easy to use them (and not misuse them), and I’d also recommend some sort of documentation to keep track of your selections. This is typically done in a Style Guide, a document that serves as a contract for the colors, fonts, composition rules, and other design considerations for your project. You likely don’t have a style guide, but they can come in handy, especially if you may bring other designers or developers into your project at some point.
Thanks for reading. Do me a favor and comment below to let me know what you thought about this article. If I’ve missed something or can clarify any of this information, please let me know.
Also, if you’d like to be notified when I write more articles like this, please subscribe below. I’d love to keep in touch.
Free eBook: 10 Killer Tips for .NET Web API
Be awesome. Download my free 56-page eBook for building performant, scalable, maintainable software using .NET Web API. (There's also a bonus chapter on effectively using HTTP Status Codes.)
Enter your email address below and get it immediately.