Setting up a color scheme for your application

Picking the right colors for your application can be tricky. All too often I see CSS files with many different colors throughout the CSS. This is not only hard to maintain, it might also lead to an inconsistent design. Using CSS variables is a great way to avoid ending up like this. Especially if you start with setting up a color scheme before you start coding and styling. Here's how I like to set up a color scheme for an application. And you can use our Color Designer to help you get started.

For a great design you don't need that many colors. For consistency it is even better to use just a few colors. I like to think in the following structure.

The Main Colors

First of all the page itself should have a background and text color. White is used often, though often I use a little off-white (like #F5F5F5) that is easier on the eyes if you have to work in an application all day. For the text is black the obvious color then, though there I tend to pick a dark gray to reduce the contrast. Again to make it easier on the eyes. Be sure to keep good contrast though. A lot of websites use lighter greys on white which admittedly looks nice but can be difficult to read sometimes.

Next you more 2 colors. One darker color which you can use for contrast with the page itself. And one brighter accent color to use for headers, buttons and everything else you want to have the user's focus.

For the Main Colors I usually go for the website of the customer that ordered the application and get the brand colors. If you are just trying out your skills, a great website to get inspiration (and colors) from is brandcolors.net where you can find the colors of many different companies.

The Supporting Colors

Besides the Main Colors you should one color in about 5 different shades. I often pick shades of grey for this since it goes well with whatever you choose for the Main Colors. The shades then go from a lighter grey that does not really stand out but it just a little bit darker than the page itself. Going up to a darker grey with good contrast to the page. Be sure the Supporting Colors match well with both the page and the darker Main Color so you can use the same 5 shades on top of both.

The Action Colors

Some elements on your page should really stand out to get the user's attention. Like buttons, but also error messages and success notifications. So I always pick the colors for Error Messages, Success Messages, Active elements and Disabled elements.

Using the Color Scheme

Once you have your desired color scheme, put them in your CSS as variables. From there on, don't specify any other color unless you are sure that none of these colors will do. If you use my Color Designer you would get a CSS root like this:

:root { 
  --pageBG: #FAFAFA
  --pageTxt: #333333
  --backBG: #335577
  --backTxt: #CCDDFF
  --accent: #FF8A00
  --lowContrast: #EEEEFF
  --lowerContrast: #CCCCDD
  --mediumContrast: #AAAACC
  --higherContrast: #777799
  --highContrast: #555577
  --errorBG: transparent
  --errorTxt: #CC0000
  --successBG: #00AA33
  --successTxt: #FFFFFF
  --activeBG: var(--accent)
  --activeTxt: #FFFFFF
  --disabledBG: #CCCCCC
  --disabledTxt: #777777
}

Let's wrap it up

So this is how I like to set up the color scheme for an application. Just use a few colors, about 5 shades of grey and a few extra colors for special cases. Put all these colors in CSS variables and avoid using any other color. Use colors for contrast and separation of sections in your application that contain different functionality. Use the shades for headers, borders or shadows when there is a need for it. Other than that, keep it simple and clear for the user.

That's it for this post. Check out the demo for this on our website. Feel free to leave a comment or send a question to andre@silveressence.net. Let me know if you got inspired and may the source be with you!