Color Considerations

Vera Zago
Vera Zago
Jul 28, 2017 · 4 min read

It’s been an incredible time here at the Flatiron School. In the last few weeks of the program we are tasked with building our final project. Many of the members of my cohort already have an idea of what they would like to create. We dream of leveraging on data rich APIs and are plotting on how to best structure our front-end React components, along with our back-end data models. There’s just one more thing we also need to consider: how it will look.

No matter how useful or innovative your web application is, without good or, at the very least, decent design….peeps are less likely to use it. Your brilliant application deserves to be served up in a neatly wrapped package with a lovely bow on top.

In my former professional life, I worked with some amazing user experience and interface designers. I’d like to think a little of their knowledge has rubbed off on me. Today I’d like to pass on a few tidbits on just one important design element…..color.

A few basic tips:

  • Start with three colors: a background, base, and an accent
  • Please do not use more than five colors, even if you love rainbows
  • Stay away from Neon colors
  • Be mindful of how text reads on top of all your colors

Need a bit more detail? Well then, here you are :

Background Color
This color is used the most and sets the general tone and feel of the application.

Base Color
This color is used to break up the background and is neither boring nor flashy but the glue that holds it all together.

Accent Color
This color is used the least but gives the application a little personality. Unless you’re using a monochromatic color scheme, your accent color will have a stark contrast to both your background and your base color. This is typically your boldest color. You may use this for those call to action areas such as buttons and links to major features.

Tools to help you pick your color palette:

Picking one color is easy but coming up with a palette can be a challenge. Luckily, there are several online tools to aid you with this task. Here are a few of my favorites.

DesignInspiration

This site is similar to PinInterest in that you will find an assortment of interesting images. If you are interested in the color scheme of an image you may click it to see it’s color palette. By clicking on one of the colors listed you will given another set of images which contain that color.

Here’s an example of when you click on a image to see it’s palette.

Dribble

This site is similar to DesignInspiration as it allows you to explore color schemes tied to various images.

Note that the six character code following the # is the color hex code. It’s the simple representation of that color for CSS and HTML. You will use it when you set a color and/or background color for an element. Here’s more info on that.

The color dashboard feature found on Dribble.com/colors

Coolors

By far one of my favorite sites. I use this once I have picked my first few colors and would like to explore palettes which include them.

If you create a login, you can even save them for reference later on or use the export tools to download a PDF of your palette.

Click the lock icon to keep that color. Press the spacebar to generate complimenting colors.

Flatiron Presents….brilliant use of color!

By far, one of the best examples of a color scheme in action for an application hails from a team of Flatiron grads. I encountered the Pops iOS App while attending a Flatiron science fair.across.

What really struck me about their design, is the playful interaction of the colors and cheerful tone. I enjoyed their unconventional usage of pink and how lovely it pops against a black background.

How adorable is Pops?
Don’t like Pops? Then go with Chad.

I’ve only scratched the surface. There are many, many designers that have much wisdom to share about color theory and how color affects the design of your web applications and sites.

Here are a few interesting articles I have come across on this topic:

Next time we’ll briefly cover some thoughts I have about Typography…….until then, please feel free to post comments below. Thanks!

Vera Zago

Written by

Vera Zago