A Step-By-Step Process for Creating Professional Colour Schemes

In my earlier life, it was originally my ambition to become a graphic designer. I spent years playing around with Photoshop and eventually made a bit of money designing websites and logos for people. This path more or less ended for me when I decided to continue programming and pursue a degree in software engineering. But, there is overlap between the programming and graphic design worlds, so I’ve been able to make some use of those design skills as a developer.

Because of this prior experience, but without a strong background in design, I was always “okay” at picking colours in the applications I was building. It wasn’t until I started getting into Pixel Art as a hobby that I started really learning the concepts behind colour theory and creating consistent and appealing colour pallettes because damntheyjustlooksogood. The difference a good colour pallette can make is truly remarkable, you could take the exact same piece of art or an application, and it will look an order of magnitude better if the creator knows what they are doing with colours.

However, the world of colours is deep and broad, and to get really good at creating beautiful colour schemes is going to take a long time and a lot of learning.

I don’t consider myself to be all that great at creating colour schemes, but I understand enough now to be pretty good. Fortunately, the key things you need to understand to be pretty good aren’t all that difficult to learn. You can even use a, more or less, step-by-step process for creating a good colour scheme for your applications - an application has much simpler colour requirements than a beautiful pixel art indie game:

The process I will be showing you doesn’t even necessarily require you to have any sense of what colours look good.

My goal is to give you just enough information in this tutorial such that you can walk away from it and implement these practices in your own projects right away. In other words, if you’re not interested in diving too deeply into the world of colour theory, you should be able to read this tutorial once and be pretty good at creating consistent colour schemes for your application.

This is being written with Ionic developers in mind, but the lessons here are not specific to Ionic. Ionic does have some automated colour generation tools available which we will discuss, and which you can use even if you’re not using Ionic, but that won’t be required if you don’t want to use it.

The main points we will be covering throughout this tutorial are:

• Don’t create your entire colour pallette before you start coding (you can do this, but it will take a lot of time/effort/consideration and might just put you off this whole enterprise entirely)
• Use HSLA instead of hex codes to format colours (and understand the role of hue, saturation, and lightness)
• Always use CSS variables to define and use your colours (e.g. --light, --lighter, --lightest)
• Avoid using names that refer to the colour directly (e.g. use --primary instead of --pink and --warning instead of red)
• Utilise hue shifting
• Start with your main colours and only add new colours as necessary (and only if it is necessary, pretend each new colour you add is eating into some kind of imaginary colour budget)
• Always generate related colours from your base colours

Before we get into the step-by-step process for creating professional looking colour schemes in your application (without actually needing to be good with colours), let’s cover some important theory - again, just enough to get by. We will be using CSS Variables heavily in this tutorial.

Understanding HSLA (Hue, Saturation, Lightness, Alpha)

We can define colours in our CSS in any of the following formats:

• #ffffff Hexadecimal
• #ffffffad Hexadecimal (with transparency)
• rgb(255 255 255) RGB (Red, Green, Blue)
• rgb(255 255 255 / 66%) RGBA (Red, Green, Blue, Alpha/Transparency)
• hsl(255, 100%, 100%) HSL (Hue, Saturation, Lightness)
• hsla(255, 100%, 100%, 0.6) HSLA (Hue, Saturation, Lightness, Alpha/Transparency)

All of the values above are either white or white with some transparency. It is most common to see colour values defined with the hexadecimal format. However, I think the only really useful format (at least in my experience) is HSL/HSLA.

Both the RGB and the HSL formats give us some way to realistically modify colours directly in their definition. The RGB format creates colours by specifying how much red, how much green, and how much blue is in the colour (with the max being 255). However, unless you are a colour whiz, it is going to be difficult to know how to change the colour by knowing how much red, blue, or green to add or remove.

The HSL format is much easier to work with. The Hue defines what the colour is (e.g. red, blue, green, pink, orange, purple), the Saturation defines how vibrant that hue is or how much of the hue is in the colour, and the Lightness defines how bright/dark the colour is. That might not be the most accurate description of what exactly these values are doing, but it is perhaps the best way to understand it initially.

The beauty of this is that we can easily create consistent variations of our colours just by changing the saturation and the lightness values. Here are some examples for how we might define some light background colours for our application:

--lightest:hsla(235, 10%, 99%, 1);--lighter:hsla(235, 30%, 98%, 1)--light:hsla(235, 50%, 93%, 1)

Which would give the following results:

In this case, I started by defining the --lightest colour first which is just slightly off-white. We have a hue of 235 which is actually in the blue part of the spectrum - typically we can make our lights/darks look better by mixing a bit of blue into them (if we want them to have a “cool” feel) or by mixing a bit of yellow/orange into them (if we want them to have a “warm” feel). We have a saturation of 10% which means there is just a little bit of our blue hue added to the colour, and a lightness of 98% which means that it is very bright (almost entirely white… but not quite).

From there, we can generate our lighter colour just by increasing the saturation and decreasing the lightness. Reducing the lightness will make the colour darker, and increasing the saturation will add more of our blue hue to it.

We then just repeat the same process again to create the light colour by once more increasing the saturation and decreasing the lightness.

You can play around with the saturation/lightness amounts here to see what you like (and if you know what looks good), but otherwise you could just create these alternate colours just by conservatively following this guide:

• Creating darker shades: Decrease lightness by 3%-5% and increase saturation by 10%-15%
• Creating lighter shades: Increase lightness by 3%-5% and decrease saturation by 10%-15%

If we applied the guide above to our original --lightest colour we would get the following result:

Understanding Hue Shifting

In the section above we played around with the lightness and saturation values, and we touched on the hue a bit by discussing how subtly mixing in blues/oranges into lights/darks can make them look much nicer.

However, we can take advantage of the hue value to a greater degree by understanding hue shifting. Rather than just changing the lightness and saturation values as we are making our colours brighter/darker, we can also change the hue itself subtly. The impact of this can be quite impressive.

Let’s take a look at an example with a yellow base colour that creates shades through only changing saturation and lightness:

--primary:hsla(47, 95%, 56%, 1);--primary-lighter:hsla(47, 80%, 61%, 1);--primary-lightest:hsla(47, 65%, 66%, 1);

This is fine, but let’s see what we can achieve with hue shifting:

--primary:hsla(47, 95%, 56%, 1);--primary-lighter:hsla(43, 80%, 61%, 1);--primary-lightest:hsla(39, 65%, 66%, 1);

Notice that the hue value changes just slightly for each new shade… If we are creating darker shades we can slide the hue value closer to the colder side of the colour spectrum, and if we are creating lighter shades we can slide the hue value closer to the warmer side of the colour spectrum. Remember that you are just moving the hue ever so slightly in that direction, you don’t just change the hue to be blue/red otherwise it will alter the colour too much.

The result we achieve with hue shifting is much more pleasant to look at. It is hard to quantify these sorts of things, but the set of colours with hue shifting has a more vibrant and warm feel to it, whereas the colours without hue shifting look kind of dirty and uninviting.

With an understanding of hue shifting, let’s update our guide:

• Creating darker shades: Decrease lightness by 3%-5% and increase saturation by 10%-15%, increase hue by 3-5
• Creating lighter shades: Increase lightness by 3%-5%, decrease saturation by 10%-15%, decrease hue by 3-5

Having an understanding of the concepts we have discussed above will help you a lot in approaching colours. However, if all you take away from this is just mathematically following the guide above, you will still probably be able to create great colour pallettes.

A Simplified Process for Creating and Managing Colours in Ionic

Now that we have just enough theory under our belts, let’s walk through a simple process for approach colours in your own applications. The main idea behind this is not getting overwhelmed by having to create an attractive and consistent colour scheme upfront.

A lot of developers probably don’t want to spend a chunk of their time working out colours before they dive into the code/layout for their application. What can tend to happen then is that new colours are picked manually with the DevTools colour picker whenever a new shade is required, and there ends up being 20 different shades of dark orange in the application and everything looks a mess.

Where was that colour I used for that one thing? Ah, screw it, I’ll just use this colour… yeah that looks about right

With this process, you can get to work right away and just add colours as you need them. The one main rule is that you HAVE to use CSS Variables with a consistent naming scheme to keep yourself on track. If you want to use a colour anywhere it MUST come from your list of theme colours as defined by your CSS Variables.

1. Pick your base colours

We are going to start off with just two colours: a primary/highlight/accent colour and a background colour which will typically be some kind of either white or black.

If you have some kind of existing branding then you could just pick your primary colour from there, otherwise, just pick something nice from a colour pallette you like. You can use flatuicolors.com to find great colours - don’t pick an entire pallette, just one single colour. Don’t just pick a colour at random from the colour picker, unless you are confident in your ability to pick good colours.

For your background colour, just use white or black with a bit of blue or yellow mixed in to create either a cool or warm vibe respectively (as we discussed above). Here are some example starting colours:

--primary:hsla(247, 65%, 52%, 1);--lightest:hsla(235, 0%, 98%);

NOTE: If you have a light background your base colour should be the lightest shade you want to use, and it should be fully, or almost fully, unsaturated (e.g. a saturation value of 0%). If you have a dark background your base colour should be the darkest shade you want to use, and it should be fully, or almost fully, saturated (e.g. a saturation value of 100%).

If you are using Ionic, then it is a good idea to work in with their existing theme system. Ionic automatically generates and uses colours based on the base colour throughout different components, so it is a good idea to include those values as well. To do this, you can use their Color Generator. Just put your two base colours into the appropriate fields, and copy out the results into your application:

:root{--ion-color-primary: #4835d4;--ion-color-primary-rgb: 72,53,212;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255,255,255;--ion-color-primary-shade: #3f2fbb;--ion-color-primary-tint: #5a49d8;--ion-color-light: #fafafa;--ion-color-light-rgb: 250,250,250;--ion-color-light-contrast: #000000;--ion-color-light-contrast-rgb: 0,0,0;--ion-color-light-shade: #dcdcdc;--ion-color-light-tint: #fbfbfb;}

As you can see, this will automatically create some additional shade/tint values for us. If you like those values you can just use those when the time comes where you need some darker colours, or you can overwrite them with your own new values. Throughout the rest of this tutorial we will be assuming that you are using your own colours defined like this:

--primary:--primary-lighter:--primary-lightest:--lightest:--lighter:--light:

If you are using the Ionic theme variables then you can either overwrite Ionic’s additional variables, or add new ones (e.g. you could add an --ion-color-primary-lighter and ion-color-primary-lightest).

For the sake of continuing this demonstration, I will assume that all you have at this point is:

--primary:hsla(247, 65%, 52%, 1);--lightest:hsla(235, 0%, 98%);

2. Use CSS Variables whenever you need to use a colour

Whenever you find yourself in a situation where you are using a colour in CSS, the only way you should ever supply a colour value is using a CSS Variable like this:

background-color:var(--primary);

Just look in the file where all of our theme colours are defined as CSS variables and pick from the list. Don’t break this rule, because that’s when things start getting messy. If you find yourself thinking:

I’ll just quickly use this colour now and then I’ll change it to a CSS variable later

Don’t trust yourself. The probability of that manually defined colour living in your codebase forever are high.

3. Add new CSS Variables whenever there is not an existing colour available to use

When you eventually find yourself in a situation where you need an additional colour, define a new CSS variable. Likely you will run into a situation where you need a lighter or darker shade of an existing colour. In this case you will just employ the techniques we discussed at the beginning of this article to create the new shade that you need:

--primary:hsla(247, 65%, 52%, 1);--primary-lighter:hsla(243, 50%, 57%, 1);--lightest:hsla(235, 0%, 98%);

To create the lighter shade of the primary colour I just followed the same rule from before:

• Creating lighter shades: Increase lightness by 3%-5%, decrease saturation by 10%-15%, decrease hue by 3-5

Here is the result:

If you need an entirely new colour, then just repeat the same process by choosing a new base colour from an existing colour pallette. If colours are not your strong suit you should just stick to one main theme colour, but you will still likely run into scenarios where you need supplemental colours for things like Delete buttons, or Warning boxes. In those cases, you can either make use of the existing Ionic variables, or just add a new CSS variable like --warning:. If you run into a situation later where you need an additional shade of your warning colour, you can then add a new --warning-lighter variable and so on.

I would recommend following these rules when adding new colours:

• Names should be generic like --primary or --highlight as this allows you to change the colours later if you want
• The relationship between names should clearly define the hierarchy (e.g. dark, darker, darkest not grey, dark-grey, obsidian)
• Have as few shades of your base colours as you can get away with. If you can modify an existing shade such that it will be better suited to both situations you need it in, rather than creating a new shade, you should do that instead. The fewer colours you have the easier it will be to keep things looking consistent.

Summary

Colour theory can be intimidating, and frustrating, but I think that if you can understand and follow just the concepts covered in this tutorial then you will be able to create satisfying pallettes for your application. It really doesn’t matter whether you are good with colours or not, if you don’t have a “feel” for it, just follow the basic guide I outlined:

• Creating darker shades: Decrease lightness by 3%-5% and increase saturation by 10%-15%, increase hue by 3-5
• Creating lighter shades: Increase lightness by 3%-5%, decrease saturation by 10%-15%, decrease hue by 3-5

Give it a go and, if you feel so inclined, show me what you come up with on Twitter!