How to make a color palette for a website and more (algorithm + tips)

In Design Mania, there have already been several publications with similar topics: in the article about color matching services for sites, in addition to resources of inspiration, we considered a couple of useful web tools; there was also a post with an overview of palette generators, etc. However, without understanding the logic of how to make a color palette, they can all be ineffective. Today we will try to fill this gap and clarify some theoretical points that are well described in this article.

Those of you who have already used the newfangled online generators are aware of their principle of operation: first, you choose some basic values, set up a number of parameters (whose names resemble some musical terms), and then as a result you get a list of 4- 5 shades recommended for developing web projects.

Such a technical and partly automated approach seems, at first glance, incredibly interesting and progressive, but in reality everything turns out to be not so optimistic. Of course, if you don t want to see your site / application something like this:

What you need to create a color picker

It is quite obvious that you cannot implement a complete worthwhile project using only five HEX codes for web colors. You need a broader set of elements to create a perfect working prototype.

Let s divide our palette into three groups.

Shades of gray

Texts, toolbars, backgrounds, etc. – in most interfaces, they are almost always gray.

It is possible that in your case you will need a lot more options for gray. At first it seems that 3-4 is more than enough, but soon you will want to, for example, add an element a little darker number 2, but a little lighter number 3, etc.

Practice shows that for a full-fledged result, 8-10 grayish shades will be enough – this is not so much for you to go to extremes and suffer when choosing, but at the same time it is quite enough not to make compromises so often.

As a rule, pure black looks a little unnatural, we recommend starting with the most saturated dark gray, and then moving to white step by step.

Primary color (s)

In most sites, two basic colors will be enough, which, in fact, form the general appearance of the interface – this is how Facebook is associated with blue shades, although in reality there are more often grays in design.

By analogy with the previous paragraph, in order to make a good color palette, you need 5-10 options, which give you more choice when designing the appearance: lighter shades can be used as a background for notifications; while dark ones are perfect for text decoration.

Accent colors

In addition to the basic ones, any web interface requires several visual “accents” to draw attention to one or another important information. You can use eye-catching solutions such as aqua, pink, yellow, and more:

You will also need ways to showcase certain events and states. Let s say that you will highlight in red important / critical information and messages about possible dangerous consequences of the selected action:

… yellow (similar to traffic lights) will warn visitors:

… and with the help of green you can highlight the positive dynamics:

While these colors should be applied fairly sparingly in the user interface, you want to work on a few shades of each.

If, when developing a website / application, you need to create a color palette to classify or distinguish similar objects (calendar events, tags, graph lines, etc.), then you may need more accents. When creating complex or non-standard UI-interfaces, up to 10 different colors with 5-10 semitones for each are often taken.

First of all, decide what shades you need.

If your task requires lighter or darker tones, don t use the lighten or darken CSS settings that generate results on the fly. As a result, they give a rather wide range of values, which are only slightly different from each other. In order to avoid such problems, first make up your own set of shades that you are going to use in your work.

But how do you make a palette of colors like this?

Start with a base color

The chosen “base color” for the gamut you want to get will be located in the middle, and lighter / darker ones are created based on it.

There is really no scientific way to do this, although there is one good rule of thumb – choose such basic and accent shades that can be successfully used as a button background…

There are no specific rules in this matter, each color has its own characteristics, so you often have to rely on your eyes / experience, especially since the UI design is different in different countries.

Define extreme shades in the palette

The next step is to select the lightest and darkest solution. Again, there is no strict methodology, this advice will help you: think about where you are going to use them, and based on this, make your choice.

The darkest colors are usually intended for text, while the lighter ones often set off the background of one or another element. A good example is the simple notification block shown in the picture below, where both extreme options are present at once.

Take your main color and start adjusting its saturation / brightness until you are satisfied with the result.

Filling in the blanks

Once you pick up the base / extreme values, you just have to fill in the “gaps” between them. When creating websites and online interfaces, at least 5 shades of each color are required. Ideally, you can reach up to 10 of them, so as not to limit yourself too much in the future.

By the way, nine is a pretty convenient number, great for separating / filling all shades. For convenience, let s call the lightest option – 100, the main one – 500, and the darkest one – 900. Then we begin to select the shades 300 and 700 – those that are in the center between the base ones. They should look like perfect interim solutions.

Now (just like above) we need to fill in four more gaps in the current color scheme.

As a result, you should have a balanced model with which you can realize your design ideas without limiting your imagination.

What s with the gray?

If you are working with a gray scale, then the main shade is not so important, but in all other respects the selection of halftones is done in the same way: start with the extreme values, and then fill in the remaining gaps until you get what you want.

Choose as dark gray as possible based on how dark the text in your project can be. Then choose the lightest element taking into account how good it will be as an unobtrusive background.

This is not an exact science

As tempting as it may be, it is impossible to create an ideal color palette relying solely on mathematical calculations. The systematic algorithm described above works well for shade selection at the initial stage, but do not be afraid to make adjustments if necessary.

As soon as you start using the selected gamma, you will inevitably want to make some changes: add saturation to the colors or make them a couple of tones darker / lighter. Rely on your eyes, not numbers!

A little tip: if possible, try not to expand the palette too often. If you do not reasonably limit your imagination in this matter, you will not get a balanced final result.