In this guide, I'll share the step-by-step approach I've used to create color schemes throughout my design career. Here's an overview of the steps to expect.
Selecting a base color
Choosing an action color
Picking a greyscale
(Bonus) next steps
Select your main color
The first thing to do when you create a color scheme is select your main color. This color is the foundation of your scheme.
In most cases, you can pick a favorite color or the color from your logo if you already have one.
Here's a pro tip. Make sure the color you pick reflects the overall mood or theme you want to create with your product. Consider the emotions and associations triggered by certain colors and choose accordingly.
For example, users can see red as the color of energy, love, and passion. At the same time, it is a risky color because it is also associated with danger, stopping in front of traffic lights, and errors in digital applications.
On the other end, blue is connected to calmness and trust. It is a safe choice because many people have blue as their favorite color. The downside of blue is that it is used a lot. That makes it harder to stand out.
An example
To help you better understand how to create a color scheme, I will create an example as we go through the steps.
Picking the main color can sometimes feel a bit random because of personal preferences or branding rules that are already in place. You can't go wrong here.
I'm going with a nice and soft shade of green here. Its hex value is #76D095.
#76D095
Choose your accent colors
The next step is to pick your accent colors. It'll complete the main part of your color scheme.
In addition to your primary color, you only need one or two accent colors, depending on your needs. Don't go over two accent colors. It would make your color scheme too crowded.
Picking accent colors is a lot more challenging than picking the main color of your scheme. You have to start using color scheme structures. Here's a list of common structures that you can use.
Monochrome. This means that you only use shades of your main color. Using accent colors like this can result in a very peaceful color scheme.
Complementary. In this case, you pick opposites colors on the color wheel. When used well, you can create a lot of contrast to help certain parts of your design stand out.
Analogous. This is a hybrid of the previous two options, where you pick colors next to each other on the color wheel. The result is more exciting than a monochrome color scheme but less in-your-face than a complementary scheme.
An example
Let's continue with our example. We already have our green main color. I'm going to add accent colors now.
In this case, I'm using an analogous color scheme. As discussed, it is a bit of an in-between color scheme, making it a safe bet you can use for many use cases.
Looking at the color wheel, we could go from green to blue and from green to yellow. Yellow is hard to combine and use in design, so I'm going for blue as an accent color. Here's our new and updated color scheme.
#76D095
#76BED0
Add shades of grey
Main and accent colors are useful for visual and interactive elements like buttons and mockups. You'll also need a greyscale for your color scale.
Using a greyscale for different text elements creates a clear visual hierarchy. This helps your users to scan your content quickly, which is good for increasing the conversion rate of your designs.
In most cases, you'll need a shade of grey for these text elements.
Headings.
Body text.
Inactive text and elements, like a disabled button or text link.
An example
For the next example, I'm going to follow two best practices that'll make our greyscale better.
I will create five shades of grey that are equally spaced out.
Instead of using a pure grey color, I will add a little bit of our main color to have the greys blend in better.
Here's what we get if I apply these rules.
#0A1E11
#36463C
#626E66
#8D9590
#B9BDBA
Next steps
And that's it! We have now created a complete color scheme. The main color, accent color(s), and greyscale should be enough to get you started.
You can add a few more colors if you need a more specific color scheme.
Add a background color by using a very light version of your main color. In our case, we could turn our main color (#76D095) into #F0FAF3 as a background color.
Add variations for button states, shadows, and light sources. Again, pick your main or accent color and create a scale by increasing or decreasing the brightness by 20% for each step.
