Are Your Eyes Receiving or Deceiving?

Color Palette Guidelines

The Meaning of Color?

The color itself does not have any meaning. Rather its meaning is derived from the context of the composition. The value of a color can only be determined by its relationship to another color. If you place a light figure on a white background and the same figure on black, the white background will appear darker, giving an impression of light, gentle heat. On the other hand, the black becomes extremely light, eliciting a colder, more aggressive demeanor.

For better or worse, personal preferences, experiences, cultural differences, and context often distort the meaning that individual colors provide. Each human perceives colors subjectively based on their unique context, which depends entirely on the conditions of use. To each their own. Some users will prefer certain colors and dislike others. And, this is unpredictable. Color is not verbal or rational. It’s contextual and emotional.

Is Color Harmony Subjective or Objective?

Often, when communicating about color harmony, people rely on subjective feelings based on their personal experience. In reality, color harmony is an objective regularity. Color Theory, dating back to the 18th century, tells various visual stories. We do know that color harmony is present when in equilibrium when the asymmetry of various forces combines. Complementary colors create this balance. The color gray is an exception; it is neutral, essentially colorless. The human eye does not conjoin any additional color to it. In the visual arts, not to be confused with vision science or colorimetry, we use the color wheel as our guide towards achieving harmonious combinations. Various color ordering systems have been created over time, but most reflect the same underlying principle. Among the most popular systems used in Digital Design today is the color wheel with the color circle and triangle of primary colors (image below). The opposite colors in this circle are сomplementary.

The quantitative ratio of colors is important in achieving proper color composition. All combinations of colors in the twelve-colored circle, each connected to the others through an equilateral or isosceles triangle, squares, and/or rectangles, make them harmonious.

These figures can be rotated within the circle and all combinations will remain harmonious.

The Role of Color Contrast

There are seven types of color contrast, each of which plays a distinct role:

1. Tone
2. The contrast of light and dark
3. The contrast of cold (blue, violet) and warm (orange, red, yellow) colors or the combination of both warm and cold colors, depending on which appears more yellow or blue.
4. Complementary colors contrast
5. Simultaneous contrast - one color can change how we perceive the tone and hue of another when they are placed side-by-side. The actual colors themselves don’t change, but how we see them is altered.
6. The contrast in saturation, which captures the opposite between rich, pure with faded and muted colors.
7. The contrast of hue is illustrated by undiluted colors appearing in their most intense luminosity.

How to Create Your Color Palette?

With millions of shades of colors, we need to narrow it down to just one. This color will be the core color by which all other company design elements will be born, starting with the brand. Before you can create your complete color palette, you need to select the primary color. 

Tips for selecting a primary color:

• Use what you already have. If the client already has a logo with an established color scheme, it would be wise to remain within the same schema. At least, use the existing theme as the baseline for starting the new effort.

• Avoid colors/shades of your competitors and peers. As a matter of principle, it would be best to create your own set of color tones and schemes that represent your business. You don’t want to run the risk of a customer mistaking your brand for another and vice versa. We encourage you to remove your competitor’s colors from your schemes as a means for ensuring you distinguish yourself. You don’t want to mirror a competitor’s brand; you want to create your own unique identity.
• Think of your target audience. If you are designing for an audience of male athletes, you would less likely use the color pink than you would if the target audience was little girls and their favorite Barbie dolls. Each audience is likely to be very different. Think about who will use the site and how you want them to perceive it. As with most marketing efforts, the first step is to identify your target audience and define their likes, dislikes, where to find them, etc. Once you have defined who they are, you can better determine by what means they will be most attracted, including appealing colors. The color palette used for a car dealership would most likely differ from the one used in creating a day spa.

• Be original. Instead of doing what the world already perceives as cliche, go against the grain and develop a new concept. You’ll enjoy far more accolades for doing something new and unique than you will following the assumptions.

• Wordplay. If you find yourself struggling with identifying a central color for the corporate identity, reverse engineer your process by writing down all the words you associate with the brand. Go through these words and perform an association with colors; for example, angry and powerful may represent red, whereas sunny, shiny, happy may be perceived as suitable for yellow. Feel free to peruse the various tools available online to help draw parallels.

Once you select a starting point, you may visit Dribbble or Designspiration to help you expand on your concept. You would enter your primary color’s HEX code into Dribbble. When you click on “Colors,” you will see a palette of colors from which you can select a particular shade. HEX code can be obtained in various ways; among the simplest is using an online service such as https://htmlcolorcodes.com/. Upon entering your primary color’s HEX code, these online tools will provide examples of use cases with similar color schemes for your review and consideration and to use as inspiration.

Choose a relevant shade for your project. For a fresh and vibrant brand, you’ll need brighter shades. For serious corporate sites choosing neutral colors tend to work best.

Selecting Shades and Tints

Review sites that you find appealing to see how other designers have used your color. Once you’ve selected the appropriate shade, you intend to apply, select a tint using an eyedropper to add an extra element of sparkle and shine. Eyedroppers are commonly found as online extensions you can easily download for continuous use. At this point, we have created our primary color.

Most palettes include far more colors than apparent to the naked eye and more than you could ever possibly need or use. Typically, a brand identity includes three neutral colors that are incorporated into the overall design element. Using any more than five neutral colors will realize an element that is too opaque or too dull for maximum efficiency. A company/product brand must be attractive and engaging while evoking a meaningful graphic illustration of the unit it represents. It is not meant to be flashy or loud, ornate or brazen, just representative of the body it represents. In some instances, that may mean three colors; in most it will include 4-5 colors/accents, which is more than sufficient:

• Primary color
• Secondary color (color accent - see below)
• White
• Dark grey
• Light-grey (not always necessary)

There are various websites available to assist you in identifying an appropriate accent color. For example, if you visit ColorSpace and then enter the associated color code you’ve retrieved from Dribbble into the required field and click on Enter, the site will provide complimentary accent color schemes for you.

The color gray is very useful and present in most web projects, particularly highlighting other colors. The dark shade is usually used for text, and light-grey to create borders with everything else white (usually for the background).

Useful Resources

• https://mycolor.space/ — color palette generator
• https://color.adobe.com/ru/create/color-wheel/ — color wheel for a palette
• https://coolors.co/ — random palette generator
• http://colorhunt.co/ — a collection of color palettes
• https://material.google.com/style/color.html — primary material colors
• https://www.materialpalette.com/blue/yellow — material palette based on 2 colors
• http://material.colorion.co/ — material style palette
• http://www.flatuicolorpicker.com/all — flat colors
• http://swisscolors.net/ — swiss colors