Colors are an important part of a product's brand. It is very important to choose the right color scheme for the logo, which will comprise the corporate identity. It is equally important to put together the correct color scheme for your website or application.
Colors draw audience attention to relevant information, influence the overall experience, create an emotional connection with the user, and increase brand awareness.
But it would be too rude to take identical colors from the brand book and use them on the site. The perception of colors depends on many factors that cover many aspects: user interaction and behavior, business of the product and current design trends. There is no one specific option that works for all purposes.
Choosing a Color Palette
Find the Context
Whenever you create a color scheme, it's important to start with your target audience and their needs. Color is not perceived by itself, it needs a context in which it will be perceived.
Think about who your potential users are and what they want from your product. Target audience preferences are always a good key to making color decisions about a product.
Find out what your product means to the user. Each niche has its own characteristics, trends and standards. With the help of certain colors, you can create the desired mood. The color schemes of entertainment products are mostly bright and bold with lots of accents, while the corporate style is cooler, neutral and simpler.
By identifying the main goals of your UI, you can easily find arguments for choosing specific colors. For example, if the user interface is mostly text, then a lighter colored theme will create a space in which to focus on reading. While photo editing interfaces are often darker to make images appear deeper.
Choose the Main Colors
Perhaps your product already has a brand and its main colors. This is a good start from to help you start building.
If you are creating a design from scratch and you don’t already have a color palette ready, you can start with any that is associated with the product. These should be 1–2 display colors that are immediately visible against the background of others and highlight important interfaces such as buttons, links, and other interactive elements.
Set Additional Colors
Most people will easily perceive the interface in a combination of 2–3 colors. Too many colors blur the hierarchy of elements in a design and make it harder to focus on the right things.
A good rule of thumb when designing color schemes is not to use more than 3–4 primary colors. Instead of a large number of colors, it is better to use their shades and tones.
Don’t forget Accessibility and Dark theme
Thanks to the proliferation of OLED screens, which is not susceptible to black pixels, and the capabilities of the new operating systems from Google and Apple, the dark theme today is not an easy way to add variability to design, but already a standard for interfaces. Therefore, when creating a color scheme, you need to remember how it can be adapted to dark mode.
Another important aspect that designers forget about is the individual perception of certain colors in people. They see your design in completely different colors, which may have a different shade or contrast. This special perception destroys all the usability of the interface that the designer intended. It is important to design schemes so that their colors will match when used by people with different color perceptions.
Remember to test color combinations on different devices and screens and under different conditions. Testing reveals the strengths and weaknesses of a color scheme even before the user sees the product.
Trick and Tips
Spin the Color Wheel
The color wheel is the simplest but most important designer tool. Among the colors in the color wheel, there are three primary colors red, green, blue which are referred to as the primary colors. All other colors can be created by mixing these three colors.
By combining these colors according to some rules, you can create a huge variety of color schemes that will suit your product.
For example, if you use opposite colors on a wheel, they form a pair that complements each other. This color scheme will provide maximum contrast and is used for design accents.
If you need a less contrasting scheme, it is better to use colors that are next to each other on the color wheel.
Triadic color schemes are the best choice when you want a balance between contrast and comfort.
To keep the design balanced with color, use your colors in the following proportion: 60% for the main shade, 30% for the color that complements it, and 10% for accents. This color balance will be easier to maintain in your design and will be user-friendly. Also, don't forget to add colors to your design system.
Instead of using a neutral gray for the interface (#CCCCCC or #DADADA), add a shade of color to it. The colors we are accustomed to always have some kind of shade of warm or cold tones. Also in nature, nowhere is pure black #000000 found. It should also be diluted with a color from your palette.
Don’t use same colors for Dark theme
Oftentimes designers make the mistake of simply inverting the colors for a dark theme. On a dark background, lighter colors will come forward; while on a light background, darker colors come to the fore. When designing a dark theme, you actually need to reassemble the color scheme, relying on interaction with the interface in a dark environment. You will have to dim the accent colors a little, change the light background to a dark one, and turn down the brightness in the text. See how Google and Apple feel about the dark theme.
Take care of accessibility?
When choosing palettes and color combinations, the designer should consider users of different ages, with special needs or disabilities.
One of the challenging groups are users that are color blind. More than eight percent of men and about 0.5 percent of women suffer from this disease. It is important to use palettes that are tailored and customized to suit the many varieties of color blindness. The corresponding modes in graphic editing tools or plugins for checking contrast will help you with this.
Play with Gradients
Gradients are design trends of recent years. You can combine several colors at once in one gradient to add depth to objects and emphasize their shape. Also try using different types of gradients (radial or angular instead of the usual linear) and different angles. Combine similar colors: warm with warm, and cold with cold. The best gradients are often very subtle, without much difference between colors. These gradients are more natural and pleasing to the eye.
Tools that will help
Today there are many tools available to help you match colors or test them in different conditions.
- Newbies should check out the Google Material Design and Apple HIG guides.
- Adobe lets you quickly create color schemes based on color wheel combinations.
- Simple palette generator.
- Services for checking color contrast.
- Collection of colors used by brands.
- Gallery of beautiful gradients.
It's always good to have the tools to help you get the job done quicker and easier.