Home » Misc » Primary color design

Primary color design


A Complete Guide to Color Wheels & Color Schemes

While text-based content is always important when seeking answers to a question, creating visuals such as infographics, charts, graphs, animated GIFs, and other shareable images can do wonders for catching your readers' attention and enhancing your article or report. Knowing color theory and design can help you make content stand out.

I know what you might be thinking: "I don't know how to design awesome visuals. I'm not creative." Neither am I, yet I found a strength in data visualization at HubSpot, where I've spent most of my days creating infographics and other visuals for blog posts.

Consider this your introductory course to color theory, types of color schemes, and the use of palettes. We'll be covering the following topics:

What is color theory?

Color theory is the basis for the primary rules and guidelines that surround color and its use in creating aesthetically pleasing visuals. By understanding color theory basics, you can begin to parse the logical structure of color for yourself to create and use color palettes more strategically. The result means evoking a particular emotion, vibe, or aesthetic.

Why is color theory important in web design?

Color is an important aspect, if not the most important aspect of design, and can influence the meaning of text, how users move around a particular layout, and what they feel as they do so. By understanding color theory, you can be more intentional in creating visuals that make an impact.

While there are many tools out there to help even the most inartistic of us to create compelling visuals, graphic design tasks require a little more background knowledge on design principles.

Take selecting the right color combination, for instance. It's something that might seem easy at first but when you're staring down a color wheel, you're going to wish you had some information on what you're looking at. In fact, brands of all sizes use color psychology to learn how color influences decision-making and affects design.

Understanding how colors work together, the impact they can have on mood and emotion, and how they change the look and feel of your website is critical to help you stand out from the crowd — for the right reasons.

From effective CTAs to sales conversions and marketing efforts, the right color choice can highlight specific sections of your website, make it easier for users to navigate, or give them a sense of familiarity from the first moment they click through.

But it’s not enough to simply select colors and hope for the best — from color theory to moods and schemes, finding the right HTML color codes, and identifying web-accessible colors for products and websites, the more you know about using color, the better your chances are for success.

Read on for our designer’s guide to color theory, color wheels, and color schemes for your site.

Color Theory 101

Let's first go back to high school art class to discuss the basics of color.

Remember hearing about primary, secondary, and tertiary colors? They're pretty important if you want to understand, well, everything else about color.

Primary Colors

Primary colors are those you can't create by combining two or more other colors together. They're a lot like prime numbers, which can't be created by multiplying two other numbers together.

There are three primary colors:

Think of primary colors as your parent colors, anchoring your design in a general color scheme. Any one or combination of these colors can give your brand guardrails when you move to explore other shades, tones, and tints (we'll talk about those in just a minute).

When designing or even painting with primary colors, don't feel restricted to just the three primary colors listed above. Orange isn't a primary color, for example, but brands can certainly use orange as their dominant color (as we at HubSpot know this quite well).

Knowing which primary colors create orange is your ticket to identifying colors that might go well with orange — given the right shade, tone, or tint. This brings us to our next type of color ...

Secondary Colors

Secondary colors are the colors that are formed by combining any two of the three primary colors listed above. Check out the color theory model above — see how each secondary color is supported by two of the three primary colors?

There are three secondary colors: orange, purple, and green. You can create each one using two of the three primary colors. Here are the general rules of secondary color creation:

Keep in mind that the color mixtures above only work if you use the purest form of each primary color. This pure form is known as a color's hue, and you'll see how these hues compare to the variants underneath each color in the color wheel below.

Tertiary Colors

Tertiary colors are created when you mix a primary color with a secondary color.

From here, color gets a little more complicated, and if you want to learn how the experts choose color in their design, you've got to first understand all the other components of color.

The most important component of tertiary colors is that not every primary color can match with a secondary color to create a tertiary color. For example, red can't mix in harmony with green, and blue can't mix in harmony with orange -- both mixtures would result in a slightly brown color (unless of course, that's what you're looking for).

Instead, tertiary colors are created when a primary color mixes with a secondary color that comes next to it on the color wheel below. There are six tertiary colors that fit this requirement:

The Color Theory Wheel

Okay, great. So now you know what the "main" colors are, but you and I both know that choosing color combinations, especially on a computer, involves a much wider range than 12 basic colors.

This is the impetus behind the color wheel, a circle graph that charts each primary, secondary, and tertiary color — as well as their respective hues, tints, tones, and shades. Visualizing colors in this way helps you choose color schemes by showing you how each color relates to the color that comes next to it on a rainbow color scale. (As you probably know, the colors of a rainbow, in order, are red, orange, yellow, green, blue, indigo, and violet.)

When choosing colors for a color scheme, the color wheel gives you opportunities to create brighter, lighter, softer, and darker colors by mixing white, black, and gray with the original colors. These mixes create the color variants described below:

Hue

Hue is pretty much synonymous with what we actually mean when we said the word "color. " All of the primary and secondary colors, for instance, are "hues."

Hues are important to remember when combining two primary colors to create a secondary color. If you don't use the hues of the two primary colors you're mixing together, you won't generate the hue of the secondary color. This is because a hue has the fewest other colors inside it. By mixing two primary colors that carry other tints, tones, and shades inside them, you're technically adding more than two colors to the mixture — making your final color dependent on the compatibility of more than two colors.

If you were to mix the hues of red and blue together, for instance, you'd get purple, right? But mix a tint of red with the hue of blue, and you'll get a slightly tinted purple in return.

Shade

You may recognize the term "shade" because it's used quite often to refer to light and dark versions of the same hue. But actually, a shade is technically the color that you get when you add black to any given hue. The various "shades" just refer to how much black you're adding.

Tint

A tint is the opposite of a shade, but people don't often distinguish between a color's shade and a color's tint. You get a different tint when you add white to a color. So, a color can have a range of both shades and tints.

Tone (or Saturation)

You can also add both white and black to a color to create a tone. Tone and saturation essentially mean the same thing, but most people will use saturation if they're talking about colors being created for digital images. Tone will be used more often for painting.

With the basics covered, let's dive into something a little more complicated — like additive and subtractive color theory.

Additive & Subtractive Color Theory

If you've ever played around with color on any computer program, you've probably seen a module that listed RGB or CMYK colors with some numbers next to the letters.

Ever wondered what those letters mean?

CMYK

CMYK stands for Cyan, Magenta, Yellow, Key (Black). Those also happen to be the colors listed on your ink cartridges for your printer. That's no coincidence.

CMYK is the subtractive color model. It's called that because you have to subtract colors to get to white. That means the opposite is true — the more colors you add, the closer you get to black. Confusing, right?

Think about printing on a piece of paper. When you first put a sheet in the printer, you're typically printing on a white piece of paper. By adding color, you're blocking the white wavelengths from getting through.

Then, let's say you were to put that printed piece of paper back into the printer, and print something on it again. You'll notice the areas that have been printed on twice will have colors closer to black.

I find it easier to think about CMYK in terms of its corresponding numbers. CMYK works on a scale of 0 to 100. If C=100, M=100, Y=100, and K=100, you end up with black. But, if all four colors equal 0, you end up with true white.

RGB

RGB color models, on the other hand, are designed for electronic displays, including computers.

RGB stands for Red, Green, Blue, and is based on the additive color model of light waves. This means, the more color you add, the closer you get to white. For computers, RGB is created using scales from 0 to 255. So, black would be R=0, G=0, and B=0. White would be R=255, G=255, and B=255.

When you're creating color on a computer, your color module will usually list both RGB and CMYK numbers. In practice, you can use either one to find colors, and the other color model will adjust accordingly.

However, many web programs will only give you the RGB values or a HEX code (the code assigned to color for CSS and HTML). So, if you're designing digital images or for web design, RGB is probably your best bet for choosing colors.

You can always convert the design to CMYK and make adjustments should you ever need it for printed materials.

The Meaning of Color

Along with varying visual impact, different colors also carry different emotional symbolism.

Worth noting? Different audiences may perceive colors differently. The meanings listed above are common for North American audiences, but if your brand moves into other parts of the world, it’s a good idea to research how users will perceive particular colors. For example, while red typically symbolizes passion or power in the United States, it’s considered a color of mourning in South Africa.

While it’s possible to create your website using a combination of every color under the rainbow, chances are the final product won’t look great. Thankfully, color experts and designers have identified seven common color schemes to help jumpstart your creative process.

What are the seven types of color schemes?

The seven major color schemes are monochromatic, analogous, complementary, split complementary, triadic, square, and rectangle (or tetradic).

Let’s examine each type of color scheme in more detail.

1. Monochromatic

Monochromatic color schemes use a single color with varying shades and tints to produce a consistent look and feel. Although it lacks color contrast, it often ends up looking very clean and polished. It also allows you to easily change the darkness and lightness of your colors.

Monochromatic color schemes are often used for charts and graphs when creating high contrast isn't necessary.

Check out all the monochromatic colors that fall under the red hue, a primary color.

2. Analogous

Analogous color schemes are formed by pairing one main color with the two colors directly next to it on the color wheel. You can also add two additional colors (which are found next to the two outside colors) if you want to use a five-color scheme instead of just three colors.

Analogous structures do not create themes with high contrasting colors, so they're typically used to create a softer, less contrasting design. For example, you could use an analogous structure to create a color scheme with autumn or spring colors.

This color scheme is great for creating warmer (red, oranges, and yellows) or cooler (purples, blues, and greens) color palettes like the one below.

Analogous schemes are often used to design images rather than infographics or bar charts as all of the elements blend together nicely.

3. Complementary

You may have guessed it, but a complementary color scheme is based on the use of two colors directly across from each other on the color wheel and relevant tints of those colors.

The complementary color scheme provides the greatest amount of color contrast. Because of this, you should be careful about how you use the complementary colors in a scheme.

It's best to use one color predominantly and use the second color as accents in your design. The complementary color scheme is also great for charts and graphs. High contrast helps you highlight important points and takeaways.

4. Split Complementary

A split complementary scheme includes one dominant color and the two colors directly adjacent to the dominant color's complement. This creates a more nuanced color palette than a complementary color scheme while still retaining the benefits of contrasting colors.

The split complementary color scheme can be difficult to balance because unlike analogous or monochromatic color schemes, the colors used all provide contrast (similar to the complementary scheme).

The positive and negative aspect of the split complementary color model is that you can use any two colors in the scheme and get great contrast ... but that also means it can also be tricky to find the right balance between the colors. As a result, you may end up playing around with this one a bit more to find the right combination of contrast.

5. Triadic

Triadic color schemes offer high contrasting color schemes while retaining the same tone. Triadic color schemes are created by choosing three colors that are equally placed in lines around the color wheel.

Triad color schemes are useful for creating high contrast between each color in a design, but they can also seem overpowering if all of your colors are chosen on the same point in a line around the color wheel.

To subdue some of your colors in a triadic scheme, you can choose one dominant color and use the others sparingly, or simply subdue the other two colors by choosing a softer tint.

The triadic color scheme looks great in graphics like bar or pie charts because it offers the contrast you need to create comparisons.

6. Square

The square color scheme uses four colors equidistant from each other on the color wheel to create a square or diamond shape. While this evenly-spaced color scheme provides substantial contrast to your design, it’s a good idea to select one dominant color rather than trying to balance all four.

Image Source

Square color schemes are great for creating interest across your web designs. Not sure where to start? Pick your favorite color and work from there to see if this scheme suits your brand or website. It’s also a good idea to try square schemes against both black and white backgrounds to find the best fit.

Image Source

7.

Rectangle

Also called the tetradic color scheme, the rectangle approach is similar to its square counterpart but offers a more subtle approach to color selection.

Image Source

As you can see in the diagram above, while the blue and red shades are quite bold, the green and orange on the other side of the rectangle are more muted, in turn helping the bolder shades stand out.

Image Source

No matter which color scheme you choose, keep in mind what your graphic needs. If you need to create contrast, then choose a color scheme that gives you that. On the other hand, if you just need to find the best "versions" of certain colors, then play around with the monochromatic color scheme to find the perfect shades and tints.

Remember, if you build a color scheme with five colors, that doesn't mean you have to use all five. Sometimes just choosing two colors from a color scheme looks much better than cramming all five colors together in one graphic.

Examples of Color Schemes

Now that you are familiar with color scheme types, let’s take a look at some in the wild.

1. Canva

Type: Monochromatic

Image Source

The use of blues and purples really make this monochromatic blueberry-inspired template stand out. Each shade builds on the next and provides ample contrast despite remaining within the same color family.

2. Newfoundland and Labrador Tourism

Type: Triadic

Image Source

As we mentioned earlier, nature is a great way to get inspiration for your color palette. Why? Because mother nature already has it figured out. Newfoundland and Labrador Tourism took advantage of these triadic shades to showcase the region’s natural beauty.

3. Daye

Type: Analogous

Image Source

Eco-friendly Women’s health company Your Daye uses a blend of pastels and earthy tones for its analogous color scheme. The effect is soothing and pleasing to the eye.

How to Choose a Color Scheme

  1. Leverage natural inspiration.
  2. Set a mood for your color scheme.
  3. Consider color context.
  4. Refer to your color wheel.
  5. Draft multiple designs.

1. Leverage natural inspiration.

Once your site operations are solid, it’s time to start selecting colors.

Not sure what looks good? Take a look outside. Nature is the best example of colors that complement each other — from the green stems and bright blooms of flowering plants to azure skies and white clouds, you can’t go wrong pulling context from natural colors and combinations.

2. Set a mood for your color scheme.

With a few color choices in mind, consider the mood you want your color scheme to set. If passion and energy are your priorities, lean more toward red or brighter yellows. If you’re looking to create a feeling of peace or tranquility, trend toward lighter blues and greens.

It’s also worth thinking negatively. This is because negative space — in either black or white — can help keep your design from feeling too cluttered with color.

3. Consider color context.

It’s also worth considering how colors are perceived in contrast.

In the image below, the middle of each of the circles is the same size, shape, and color. The only thing that changes is the background color.

Yet, the middle circles appear softer or brighter depending on the contrasting color behind it. You may even notice movement or depth changes just based on one color change.

This is because the way in which we use two colors together changes how we perceive it. So, when you're choosing colors for your graphic designs, think about how much contrast you want throughout the design.

For instance, if you were creating a simple bar chart, would you want a dark background with dark bars? Probably not. You'd most likely want to create a contrast between your bars and the background itself since you want your viewers to focus on the bars, not the background.

4. Refer to your color wheel.

Next, consider your color wheel and the schemes mentioned above. Select a few different color combinations using schemes such as monochrome, complementary, and triad to see what stands out.

Here, the goal isn’t to find exactly the right colors on the first try and create the perfect design, but rather to get a sense of which scheme naturally resonates with your personal perception and the look of your site.

You may also find that schemes you select that look good in theory don’t work with your site design. This is part of the process — trial and error will help you find the color palette that both highlights your content and improves the user experience.

5. Draft multiple designs.

Draft and apply multiple color designs to your website and see which one(s) stand out. Then, take a step back, wait a few days and check again to see if your favorites have changed.

Here’s why: While many designers go in with a vision of what they want to see and what looks good, the finished product often differs on digital screens that physical color wheels — what seemed like a perfect complement or an ideal color pop may end up looking drab or dated.

Don’t be afraid to draft, review, draft again and throw out what doesn’t work — color, like website creation, is a constantly-evolving art form.

How to Use Color Palettes

While color schemes provide a framework for working with different colors, you’ll still need to use a color palette — the colors you will select to use for your project. If you’re stumped about what colors to use, consider using a palette generator to get your creativity flowing.

Here are some best practices to make the most out of your color palette:

1. Work in grayscale.

This may sound counter-intuitive but starting with black and white can help you see exactly how much contrast exists in your design. Before getting started with color, it’s important to lay out all the elements like text, CTAs, illustrations, photos, and any other design features. The way your design looks in grayscale will determine how well it looks in color. Without enough light and dark contrast, your design will be hard to view, leaving your audience with a less than satisfactory user experience. Low contrast designs also make them inaccessible for those with a vision impairment.

2. Use the 60-30-10 rule.

Often used in home design, the 60-30-10 rule is also useful for website or app design.<

While you’re certainly not limited to using just three colors, this framework will provide balance and ensure your colors work together seamlessly.

3. Experiment with your palette.

Once you’ve made your color selection, experiment to discover which work better together. Consider how copy or type looks on top of your designated main color (60% is typically used as the background color).

Try not to use your main colors for buttons since you’re already using it everywhere else. Consider one of your accent colors instead.

4. Get feedback or conduct A/B testing.

So you’ve finished your draft. Now it’s time to test it. Before sending your design to market, you’ll want to test how users interact with it. What may look good to you, may be difficult to read for others. Some things to consider when asking for feedback:

Getting another set of eyes on your design will help you spot errors or inconsistencies you may have missed in the creation process. Take their feedback in stride and make adjustments where needed.

Put simply? Practice makes perfect. The more you play with color and practice design, the better you get. No one creates their masterpiece the first time around.

Color Tools

There's been a lot of theory and practical information for actually understanding which colors go best together and why. But when it comes down to the actual task of choosing colors while you're designing, it's always a great idea to have tools to help you actually do the work quickly and easily.

Luckily, there are a number of tools to help you find and choose colors for your designs.

Adobe Color

One of my favorite color tools to use while I'm designing anything — whether it's an infographic or just a pie chart — is Adobe Color (previously Adobe Kuler).

This free online tool allows you to quickly build color schemes based on the color structures that were explained earlier in this post. Once you've chosen the colors in the scheme you'd like, you can copy and paste the HEX or RGB codes into whatever program you're using.

It also features hundreds of premade color schemes for you to explore and use in your own designs. If you're an Adobe user, you can easily save your themes to your account.

Illustrator Color Guide

I spend a lot of time in Adobe Illustrator, and one of my most-used features is the color guide. The color guide allows you to choose one color, and it will automatically generate a five-color scheme for you. It will also give you a range of tints and shades for each color in the scheme.

If you switch your main color, the color guide will switch the corresponding colors in that scheme. So if you've chosen a complementary color scheme with the main color of blue, once you switch your main color to red, the complementary color will also switch from orange to green.

Like Adobe Color, the color guide has a number of preset modes to choose the kind of color scheme you want. This helps you pick the right color scheme style within the program you're already using.

After you've created the color scheme that you want, you can save that scheme in the "Color Themes" module for you to use throughout your project or in the future.

Preset Color Guides

If you're not an Adobe user, you've probably used Microsoft Office products at least once. All of the Office products have preset colors that you can use and play around with to create color schemes. PowerPoint also has a number of color scheme presets that you can use to draw inspiration for your designs.

Where the color schemes are located in PowerPoint will depend on which version you use, but once you find the color "themes" of your document, you can open up the preferences and locate the RGB and HEX codes for the colors used.

You can then copy and paste those codes to be used in whatever program you're using to do your design work.

Finding the Right Color Scheme

There's a lot of theory in this post, I know. But when it comes to choosing colors, understanding the theory behind color can do wonders for how you actually use color. This can make creating branded visuals easy, especially when using design templates where you can customize colors.

Editor's note: This article was originally published in June 2021 and has been updated for comprehensiveness.

 

 

Don't forget to share this post!

how to decorate with primary colors |

Homes & Gardens is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission. Here’s why you can trust us.

(Image credit: Future / Emma Lee / Sally Denning)

Decorating with primary colors has somewhat gone out of fashion in recent years in favor of paler, calmer color schemes, but adding bold brights can be done in a way that's sophisticated and subtle, if the primaries are added in pops rather than swathes.

Below, our expert tricks and tips take you through the basics of decorating with primary colors – all illustrated by beautiful room shots from a recent Homes & Gardens photo shot. You really are most welcome.

See: Interior design tips – decorating secrets for the world's top experts

1. What are primary colors?

(Image credit: Future)

The primary colors are red, yellow and blue. These colors are called primary colors because they cannot be created by combining any other colors. All other colors are secondary or tertiary (etc) colors, created by mixing primary colors, with black or white added to create darker hues (also known as shades) or lighter tones (also known as tints). 

True primary colors aren't often used in interior design in large doses because they are very bold – instead you will see them as accent shades in accessories or within artwork. More commonly, you will see their shades and tints on walls, floors and furnishings. 

See: Blue room ideas – wonderful room schemes to inspire you

2. What colors go with primary colors?

(Image credit: Future/James Merrell)

Whites, blacks and neutral colors go with primary colors – and these are usually easy to coordinate. You can also successfully coordinate primary colors with lighter tints and darker shades of that color. In both cases, primary colors are often best used as the smallest of accent colors within a room, rather than as the dominant color. 

When choosing colors to go with primary colors, consider texture, too. If you are decorating with red, for example, and matching it with neutrals, picking neutral, natural textures such as wood will go some way to enriching the scheme and dampening the contrast between the two.

See: Yellow room ideas – guaranteed to turn up the heat

3.

Using the color wheel for decorating with primaries

(Image credit: Little Greene)

The color wheel can help you with coordinating primary colors with other colors, plus the tints and shades of each primary color. The color wheel separates primaries, tints and shades into warm and cool choices, with blue the only primary color on the cool side of the wheel – red and yellow being on the warm side.

When choosing primaries for decorating – and their derivations – bear in mind that cool colors recede meaning they are good choices for bright spaces that you want to feel calm and spacious; warmer colors advance, making them ideal for creating cozy, lively spaces. 

4. Introducing primary colors with accessories

Future / Emma Lee / Sally Denning

(Image credit: Future / Emma Lee / Sally Denning)

A simple and effective way of introducing color into the home is through accessories. It is a joyful way of adding to and altering the feel of a room without  committing to redecorating whole spaces.  

This calm, neutral space has been given an instant update with the addition of a vibrant glossy red lamp base . Based on an antique original, this playful lamp design takes its inspiration from the work of the mid 20th Century. Its bright pop of color makes it a wonderful, statement piece. The sculptural shapes of the lamp and vase add character and interest and the primary bold colors lift the scheme.

5. Decorating a living room with primaries

Future / Emma Lee / Sally Denning

(Image credit: Future / Emma Lee / Sally Denning)

A carefully selected array of colorful accessories and furniture add vibrant notes which bring a neutral scheme to life. The little pops of color sprinkled through the room create playful and uplifting finishing touches. 

The warm neutrals used as the main structure for the scheme are very much in vogue right now. Earthy naturals, pale plaster pinks and natural weaves all set the scene elegantly and provide an ideal backdrop for the addition of a few joyful primary colours.  

This yellow side table , though tucked unassumingly in the corner, really is one of the stars of the show here. Don't be afraid to mix and match colors, shapes and textures. The layered feel is what makes a living room such as this so inviting. 

See: Living room color schemes –the best color ideas for living spaces

6. Inject primary colors into a cool, contemporary bathroom

Future / Emma Lee / Sally Denning

(Image credit: Future / Emma Lee / Sally Denning)

A bathing space wants to feel like a calm sanctuary, so it is only right that gentle, neutral bathroom color ideas be used to create the apace. A splash of red however is a modern and joyous touch to introduce in this serene wood-clad bathing space. 

The very minimal palette of materials, from the wood panelled walls to the sleek white bath and smooth pale grey floor is complemented with the addition of a colourful, glossy side table , the perfect perch for your bathing accessories.  

The sculptural shapes within the calm space; the square contemporary window opening, the silhouetted mirror on stand and the curves of the tub all sit happily with the shapely outline of the vibrant red table. 

7. Bring primary colors into a natural dining space

Future / Emma Lee / Sally Denning

(Image credit: Future / Emma Lee / Sally Denning)

Wooden furniture and natural jute flooring is given a new lease of life with a sprinkling of bright primary colors. Create a statement with a single piece in a vivid hue. 

Here, a brightly painted chair delivers drama and works as a wonderful focal point. The block of color in the yellow artwork and glossy finish of the red chair bring an unexpected extra dimension and vibrance to the calm, natural, country feel of this relaxed dining space. 

The layering of textures adds depth to the room, with the natural woods of the table and chairs, juxtaposed with the glossy red finish of the chair paintwork and the natural weave of the jute rug and basket. Colorful accessories on the shelving add to the artfully curated feel.

See: Dining room ideas – inspiration for decorating and furnishing your space

8. Gather your favorite vessels together for an attractive display

Future / Emma Lee / Sally Denning

(Image credit: Future / Emma Lee / Sally Denning)

Open shelving offers the perfect opportunity to have a play and display your most treasured pieces for all to admire. The shelves, whilst practical as useful storage, also mean that all your shapely ceramics and tableware need not be hidden away in cupboards and can be on view to enjoy everyday. 

Here the clever mix of textural natural materials sit happily with a few pops of primary colour. The colourful twist of the yellow pigment used to create the finish on the shelves is very contemporary take on a stained wood finish and elevates a simple set of wooden shelves into something more unique.  

9. Inject primary colors into your home with unexpected combinations

(Image credit: Future / Emma Lee / Sally Denning)

A simple console painted in a bright yellow finish creates a striking perch for displaying a collection of much loved ceramics and vessels. The vibrant color draws your eye and attracts attention to the collection gathered above. A soft plaster pink wall color acts as a gentle contemporary neutral tone. 

Not overpowering, but with more personality and warmth than a neutral off white or pale grey. Texture has been added here with a woven wallhanging. The sunshiny yellow adds a playful element to the mix when combined with the quieter natural textures and materials and the warm plaster pink.

10. Use an accent primary color in a pared-back neutral scheme for an easy update

Future / Emma Lee / Sally Denning

(Image credit: Future / Emma Lee / Sally Denning)

A vibrant primary color is a sure fire way to inject personality into a neutral, pared back scheme. Here the soft textures of the tactile upholstery and natural, textural floor rugs contrast beautifully with the smooth glossy red of the small side table and plate with blue line. 

See: The monochromatic color scheme – ideas and expert advice for creating yours

There is no need to paint a whole wall or room in a bold color to enjoy living with brighter tones. Color can be brought into existing schemes easily through accessories and smaller pieces of furniture. It is the perfect way to contain the way you use colour so it doesn't feel too overwhelming. 

Emma Thomas is the Style Editor at Homes & Gardens and Livingetc magazines, looking after the decorating features. Before joining Homes & Gardens in 2014, Emma worked for over 25 years mainly as a freelance interior stylist and art director producing photo shoots for many editorial titles and commercial clients, including Elle Decoration, Livingetc (she worked on the launch issue back in 1998!), Habitat and The White Company, to name but a few. As well as overseeing and art directing the original photography we produce, Emma also leads on many of the decorating and design ideas and features you see in print and online.

Psychology of color and web design

Blue color

The emotional coloring of blue essentially depends on the tone. So light shades of blue are able to evoke a feeling of calmness, openness and security, while dark tones are associated with reliability, firmness, experience that can be trusted, and some kind of backlash. This allows us to classify the blue color as a universal color.

Violet

Violet is the color of grandeur, luxury, romance, conveyed by light shades, as well as mystery and mysticism, which are associated with darker saturated tones of purple. So the purple hue evokes an emotional feeling of an atmosphere of generosity and wealth. More gentle lavender smells of romance.

Black

Black is a neutral but very strong color associated with sophistication, restraint, power. Being present on any site and combined with other colors, black is able to evoke different or emphasize emotions and associations. Black can also be the dominant color in a design, but the danger of using it excessively is that the visitor can associate the page with evil and nervousness.

The moderate use of black for the design of individual blocks and elements of the site creates a feeling of sophistication, conciseness, minimalism, elegance, and style among visitors to the resource.

White

White is traditionally considered the color of virtue, purity, simplicity. A great option for the background of sites made in a minimalist design.

An essential feature that is unique to white is that white most favorably and effectively emphasizes all other colors, emotionally resonating with them.

Gray color

The neutrality of gray does not negate the emotional effect that it is capable of. Gray is associated with formality, melancholy, neutrality, sadness, restraint.

Gray in its various shades is an amazing play of white and black, which gives one or another interesting effect. In addition, several different shades of gray look interesting in the design, and the combination of gray with a juicy bright color of the palette looks noticeable, bright, fresh and stylish.

Beige

Beige can also be classified as neutral, as it is rather inexpressive and dull in itself. At the same time, beige goes well with other colors, taking on their character, but allowing you to dilute the overall picture, avoiding excessiveness and excessive saturation.

Beige is good both as a background color and as a second color. Lighter tones of beige look modern and fresh, while darker ones convey a sense of tradition and earthiness.

Ivory

An extraordinary color in the palette from milky to cream, it can convey the same emotions as white, only giving them more softness. Ivory is associated with simplicity, elegance and comfort, and in web page design, used instead of white, it can soften the contrast between dark colors.

The design of any site involves the selection of colors, or combinations of colors and tones in order to achieve one or another emotional subconscious effect on the visitor. There are various ways to select colors, but the most effective, harmonious and used are the triad, the double complementary system and the choice of analogous colors.

Triad

Triad, as the name implies, is a system of 3 harmonizing colors. The choice of colors is carried out on a color wheel containing 12 color options, according to the principle of an equilateral triangle. This is the most balanced system, combining the advantages of resonance and complementary effect without complicated contrasts.

Double complementary system

This system assumes the use of 4 colors, also selected according to the color wheel. Of these, 2 colors contrast, and 2 are complementary. It is more difficult to find a harmonious embodiment of such a scale in practice. Finding colors isn't hard. To do this, you need to select the first color, and the second will be a contrast for it. The third color will be located next to the first, acting as a complement. The fourth is contrasting for the third.

Color matching

This is a so-called sequential system, involving the choice of three, usually complementary colors around the color wheel. The combination of colors of analogs and the play on tones allows you to experiment with calling the necessary emotional effect for users.

Coloring for designers. Terms and Definitions.

Color is one of the fundamental features on which design is based. In the hands of a professional, it can become a powerful tool. It affects many factors that play a big role in visual perception. Color has a huge impact on our consciousness, it changes our attitude to any subject literally in seconds, and also makes people react to it and even take certain actions.

At first glance, the doctrine of color may not seem so difficult to master, but if you delve into the details, it becomes clear that many subtleties must be taken into account. The article "Color Theory: A Brief Guide for Designers" touches on the basics of this doctrine, helping the designer in his work. And in this article, we have collected all the basic terms of color theory into a handy glossary that will help graphic and UI designers better understand how color works.

Add color illustration

Color

Before going any further, it is important to understand the essence of color. It is defined in Webster's Dictionary as a phenomenon of light (such as red, brown, pink, or grey) or a phenomenon of visual perception that allows a person to distinguish between objects that would otherwise appear the same. Simply put, color is the attribute of an object that results from the light emitted or reflected by that object. A color can be visually "verified" by evaluating its properties (hue, saturation, chroma, and lightness). To fully understand the meaning of color, let's define its characteristics.

Color properties

The basic properties of color are hue, brightness, chroma, and saturation.

Hue

The term "tone" is often confused with "color", so we will have to dwell on these definitions in more detail. First, you need to understand that "color" is a generalized concept that people use to refer to all tones, semitones and keys. On the other hand, tone is exactly what we mean by asking "what color is this thing?". In general, tone is a collection of twelve pure and bright colors represented on the color wheel.

Tone is a base material that can be modified in three different ways: fade, shade, and tone. Depending on the technique used, the tone turns into a shade, shadow or tone.

It's easy to tell them apart. A hue is created by mixing a tone with white, while a shadow is a mixture of a tone with black. Toning is a more subtle process, as it requires the addition of both black and white, and so the result will look more natural than halftones and tints.

Premiumbeat

Brightness (Value)

As already mentioned, colors have certain characteristics by which they can be recognized. Lightness is a property that indicates how light/dark a color is. This feature is determined by the degree of whiteness. The more white was added to the tone, the higher its brightness.

Chromacity

Chrome, or chromaticity, shows the purity of tone. This feature is evaluated based on the presence of white, gray or black in a color. The twelve basic tones described below have the highest degree of chromaticity, as they do not contain any additional elements. High chrome colors are bright and vibrant.

Saturation

This feature has a lot in common with brightness and chrome, so sometimes they can be confused. It is very important to understand the difference here. Unlike the previous two properties, saturation does not involve mixing tones with other colors. Saturation is how a color looks under different lighting conditions, how bright or pale a color appears in daylight or low light. This property is also called color intensity.

Calendar app (Tubik)

Color wheel

If you have ever attended a painting class, you have definitely seen a circle made up of different colors. It is called the color wheel and helps you understand how colors are related to each other and how best to combine them. The color wheel is made up of primary, secondary, and tertiary colors, which are also known as tones.

The color wheel was invented by Isaac Newton in 1666 and at first looked like a scheme. Since then, it has undergone many transformations, but still remains the main tool for working with color compatibility. By design, the color wheel should work in such a way that it is easier for you to correctly mix colors.

Color types

By type, the color is divided into primary, secondary and tertiary; as well as cold, warm and neutral.

Primary colors (Primary)

These are three pigment colors that cannot be created by mixing other colors. They are the basis of the entire color system. Primary colors vary depending on the type of color system. The CMYK subtractive color model is based on cyan, violet, and yellow, while the RGB additive color model is based on red, green, and blue. And the historical color model of RYB artists includes red, yellow and blue.

Secondary colors (Secondary)

These colors are created by mixing two primary colors. Since each system has its own primary colors, secondary colors also vary. Below is a schematic explanation of which secondary colors can be formed in each of the models.

RGB:

green + red = yellow

red + blue = violet

blue + green = blue

CMYK:

yellow + violet = red

purple + blue = blue

blue + yellow = green

RYB:

yellow + red = orange

red + blue = violet

blue + yellow = green

Tertiary colors

Mixing primary and secondary colors results in tertiary colors that usually have compound names such as red-lilac or yellow-orange.

Cool, warm and neutral colors

All the colors described above can also be divided into three types: cold, warm and neutral.

Cool colors are in the blue-green part of the color wheel. They are called cold because they create a feeling of coolness. Warm colors are their opposite due to their associations with warmth. Yellow, orange and red are warm colors. Last but not least, neutral colors are not part of the color wheel. Among them are gray, brown and beige.

Weather application (Tubik)

Color options


There are several color models: RGB, RYB, CMY, CMYK.

RGB

The primary colors of the RGB model are red, blue, and green. This model is the basis for all colors used on the screen. The combination of the primary colors of this model in equal proportions results in secondary colors - cyan, violet and yellow, but you must remember: the more light you add, the brighter and lighter the color becomes. The results obtained after mixing additive colors are often unexpected for people used to the subtractive color model of paints, dyes, inks and other tangible objects.

RYB and CMY

RYB (R - Red, Y - Yellow, B - Blue) is another color model that is often used in art education, especially in painting. It served as the basis for the modern scientific theory of color, which found that blue, violet and yellow are the most successful tricolor combinations for mixing. Thus, the CMY color model was born.

CMYK

The CMY model was modified with the advent of photomechanical printing. Black ink became its key component, and the model was renamed CMYK (C - cyan, M - violet, Y - yellow, K - black). Without this extra pigment, the shade closest to black would be a muddy brown. At the moment, this color model is most often used in printing.

Printaura

Color palettes

In design, color balance is of great importance, as the impression of a site or application is formed by users at a glance, and colors have a strong influence on this. Designers have identified the main and most effective color palettes, or color harmonies.

Monochrome

It is based on one color and its various tones and shades. A monochrome palette is always a win-win, as you have to try hard to make mistakes and make everything tasteless.

Business cards Deetu

Analogue

Colors that are next to each other on the color wheel are used to create an analog palette. This type of color palette is used where contrast is not needed, including on the background of web pages or banners.

Animated Binned Logo

Complementary

A complementary palette is a mixture of colors that are opposite each other on the color wheel. This scheme is the opposite of similar and monochrome, as its purpose is to create contrast. For example, in any interface it will be difficult not to see an orange button on a blue background.

Personal account in the Home Budget app

Separate-complementary

This palette works similarly to the previous one, but uses more colors. For example, when choosing a blue color, you must also add two adjacent shades of its opposite color, that is, yellow and orange. Here the contrast will not be as sharp as compared to the complementary scheme, but more colors can be used.

Financial Service website

Triadic

When a design needs more color, a triadic scheme can be used. It is based on three separate colors equidistant from each other. To maintain balance in the scheme, it is recommended to use one color as the dominant one, and the other two as accents.

Tubik dating app home page

Quaternary/Dual Complementary

The Quaternary color scheme is intended for use by experienced designers as it is the hardest to achieve balance.

Learn more