Website Color theory: Create your own website color scheme

In the first two parts of the color theory series, we mainly discuss the meaning behind the color and the terminology about color. Although this information is very important, I believe many people are very interested to know when to start the discussion to create some real color schemes.

Well, this article, the third part of this series, will introduce this issue. We'll start from the beginning to discuss ways to create your own color scheme. We will also discuss traditional color scheme patterns (such as monochrome design, analogy design, complementary design, and so on), and how to create custom programs that are not strictly based on a pattern. At the end of this article, you will learn to use tools and techniques to create a beautiful palette for your design projects. The best way to improve your skills is to practice, so setting yourself a goal and creating a new color scheme every day is a good idea.

Quick Review

Let's take a look at the first part and the second part first. In the first part, we talk about different countries and cultures, all of which have different meanings that are inherited and inherent. These implications have a direct impact on how the site's visitors understand the site, even if the impact is just a subconscious level. The colors you choose may or may not be useful for the brand identity you are trying to create.

In the second part, we discuss the color terms: hue (what color, such as blue or red), chroma (color contains a single standard color composition, lack of white, add black or gray), saturation (the color of the bright degree is strong or weak), lightness (color is bright or dark); Hue (created by adding Gray in a pure hue), shadow color (created by adding black in a pure hue), and a light color (created by adding white in a pure hue). Familiarity with these terms is important for continuing to learn to create our own color schemes.

The traditional color scheme type

There are a number of predefined color schemes that make it easier to create new scenarios, especially for beginners. Here are the traditional scenarios, each with a few examples.

The basic 12-spoke color wheel is an important tool for creating color schemes.

Monochrome

A monochrome color scheme consists of a different hue, a shaded and light-colored color within a particular hue. This is the easiest way to create a color scheme, because they all come from the same hue, so although it's possible, it's hard to create a discordant or ugly scenario.

Example:

Here are three examples of monochrome color schemes. For most of these color schemes, the first color from left to right is usually used as the color of the caption. The second color will be used for the body, or as a background. The third color will probably be used for the background, and if the color is used as the background, then it will be used in the body. And the last two colors will be emphasized, or used in graphics.

Analogy

An analogy color scheme is the next color scheme that is easy to create. The analogy scheme is created by three colors that are adjacent to the 12-spoke color wheel. In general, the analogy color scheme has the same chroma level, but through the use of tonal, shaded and light-colored, we can increase the interest of these schemes, and can adapt to the needs of our website design.

Example:

This is a traditional analogy color scheme, although its visual appeal is very strong, but for the design of an impressive site, color contrast is not strong enough.

This one has the same hue color scheme as the above image, but the chroma adjustment reflects diversity. It is now more suitable for web design.

Another example of a traditional analogy color scheme.

The above topics have been modified for web design.

Complementary

Complementary color schemes are created by fusing the colors of the opposites on the color wheel. The most basic form of these color schemes is made up of only two colors, but it can be easily extended by tonal, light-colored, and shaded colors. Hint: Even the colors that are adjacent to each other with the same chroma or degree of color may look very discordant, and in a strict sense, their boundaries look dazzling. So it's best to avoid this by leaving them white between them, or by adding another transition color between them.

Example:

A wide range of light-colored, shaded, and tonal applications make this color scheme look very generic.

Another complementary color scheme with wide range of chroma.

Don't forget that beige and brown are actually orange tints and shades of color.

Breakdown of Complementary

The split complementary color scheme and complementary color scheme are almost as simple. This color scheme uses two colors that are adjacent to the hue at the opposite corner of your base color, not the color on the diagonal of the color wheel.

Example:

The image above is a color scheme with yellow-green as the base hue. It is important to have enough chroma and lightness differences between colors of this type of color scheme that you choose.

Another palette example with a wide range of shades.

Ternary color scheme

The ternary color scheme consists of a hue that has an equal interval in the 12-spoke color wheel. This scenario is slightly different than the other color schemes.

Example:

In the ternary color scheme, use a light or dark version of one color, with two shades/shades/tints of the other two colors, so that the single color is neutral in the color scheme and can be used as a medium and a color.

Alternatively, using a very bright hue with a pair of soft hues can make this bright hue more pronounced.

Double complementary (four RMB) color scheme

Four collocation color scheme is probably one of the most difficult and effective solutions.

Example:

The picture above is very humble four collocation color scheme. The best way to use this color scheme is to treat one color as the primary color in the design, and the other colors to be used only to highlight it.

When you create a color scheme with similar shades and lightness, the four-dimensional color scheme works very well. Just add a medium and a color to use as text and accent, such as using dark gray or black.

For dark color schemes, it works very well.

Custom

Custom color schemes are the hardest to create. Custom color schemes are not based on any formal rules, rather than following a predefined color scheme as discussed above. When creating this type of color scheme, keep in mind chroma, lightness and saturation, and so on.

Example:

All colors in the above image have the same level of chroma and saturation.

Also, using colors with similar chroma and saturation is very effective, and the entire color scheme that you can create is very cohesive.

Using a high chroma color in all low chroma colors is another effective method, and this high chroma color can be used as an emphasis.

Create a color scheme

Creating your own color scheme may sound a little daunting. But it's not as complicated as many people think. From the start, there are a number of tips you can use to create a great palette.

We've covered different kinds of color schemes above. Now, let's start by trying to create a part of our own color scheme. There are a number of online tools available to help create a color scheme, but from now on we're going to discard these tools and just use Photoshop to do the work.

Let's try to break out of the color scheme I've already mentioned and create some custom schemes. While it's important to understand how different colors interact, and how traditional color schemes are created, it's not necessary to strictly follow any predefined patterns for most design projects that you might be able to create a custom color scheme.

Therefore, for our project objectives, we will create three color schemes, each for two different sites. Our virtual client is a modern architectural design blog and a high-end female clothing retailer influenced by Victorian style.

To have a perceptual knowledge of each solution, let's start with the most basic monochrome color scheme. Although I have mentioned that traditional color scheme patterns are not used in design, the monochrome color scheme is an exception to this rule. You will probably find that the monochrome scheme used is a fairly common basic principle.

For our clothing store, the addition of white as medium and color is a traditional color scheme.

For our design blog, we have a color scheme that consists of shadow color and light gray.

The above image can be seen as an analogy color scheme, but we omit a color. It is dark purple and red-purple composition. These two colors are adjacent to each other on the color wheel and look good, especially when they use different levels of lightness and saturation.

Adding two shades of red in a gray color scheme can be visually interesting, as well as adding potential special emphasis to specific parts of your design.

In the above picture, we no longer use the purple hue and instead use the wine red. Wine Red is also on the color wheel and red purple adjacent color. We also add a pale yellow hue on the color wheel that is located on the purple diagonal. It serves as our medium and color, and looks more like white than any of our other hues.

While this color scheme looks like another standard gray and red palette, if you look at it more closely, you'll find that Gray is actually blue. Blue and red make up two-thirds of the four-order color scheme, but they look good when there is no yellow, especially when the red remains high purity and the blue tones fade to the point of almost gray.

Why shadow, hue, and light are important

As you can see in the color scheme above, it is important to use light-colored, tonal, and shaded colors in your color scheme. Pure hue has a level similar to the degree of visibility and saturation. This has led to a color scheme that is both overwhelming and tedious to be irreplaceable.

When the concepts of hue, shadow, and light are mixed together, the original 12-spoke color wheel concept will expand to infinity in the number of colors you can use in your design. The easiest way to create a professional-looking color scheme is to choose a hue for a specific color of a non-pure hue, light and shadow colors are added to another pure, or near-pure hue, which is used to accent colors at intervals of at least three colors (three-dimensional, four-dimensional, or a complementary color scheme) in the color wheel. This method adds a visual impact to your color scheme while still feeling balanced.

Add some neutral color

Medium and color are another important part of creating a color scheme. Gray, black, white, brown, brownish and grayish white are usually considered neutral colors. Brown, brownish, and grayish white often make the color scheme visually warm (as they are actually orange and yellow tones, shaded and light-colored). The color of the gray is a warm or cool effect based on the surrounding colors. Black and white can also be warm or cool, depending on the color surrounding it.

Black and white are the simplest and can be added to almost any color scheme with a neutral color. However, in order to add more visual impact, consider using a lighter or slightly darker gray to place in white or black.

Add brown, tan, and gray-white tones with a little more finesse, but with some practice you'll find it's getting easier. For Brown, consider using a very dark chocolate brown in the black position. Pale white In many cases can replace white or light gray. And Tan can also replace the gray position (it will be easier to create tones by adding small shades of gray).

Use a photo in a color scheme

My personal favorite way to create a color scheme is to use photos. Online automation tools can do this for you automatically (Adobe Kuler is my personal favorite in these tools), or you can use Photoshop to do the work.

Using Adobe Kuler, you can not only search photos on Flickr, but also upload pictures of yourself on this computer. If you're racking your brains about what colors to use in your web design, try searching for relevant words on Flickr. Sometimes, this approach can find a color scheme that you might not have thought of at all.

Let's try this two way using Kuler and Photoshop. Find photos of what you like in Flickr that will inspire the design sensations you want to create. I chose this one:

The following is the original color scheme created by Kuler based on this picture:

The best thing about creating a color scheme based on a picture on Kuler is its "Choose the tone" option. Includes color, bright, soft color, dark, and dark color. The following color schemes are each of the tones we use to get the same picture.

Color

Bright

Soft color

Dark

Dark Color

Now let's use the same picture to create a color scheme in Photoshop. Compared with Kuler, this method is scientific and lesser. I usually use the eyedropper tool to select a color and then click on the different points in the image until I find another color that matches it. Here is the result. This method saves no more than five minutes with Photoshop, so it's not as time-saving as it is rumored to be:

Creating a color scheme based on a picture in Photoshop is the easiest way to start with a related monochrome. Using images with a relatively rich color can make it more difficult.

This time let's try a more color-rich example. Here's a picture of what we're going to work on:

Here are the five color schemes that Kuler has given us based on this picture:

Color

Bright

Soft color

Dark

Dark Color

The following illustration is a color scheme that is based on the same picture using Photoshop:

As you can see, the version you get with Photoshop is completely different from the version provided by Kuler, but all of these color schemes are visually appealing. The Photoshop version here takes longer than the previous example, partly because of the diversity of image colors.

The simplest color scheme

As we mentioned earlier, adding accent colors to other neutral color palettes is the easiest way to create a color scheme. Using this method can also create the most compelling visual effects. If you have no confidence in the technology you are creating a custom color scheme, you can start with this type of palette first.

Here are a few examples to help you understand what I just said:

Here you can see how to use brown, not gray, to make the whole solution look more warm, even when highlighted in blue.

In this type of scenario, you can use any color hue instead of gray or brown, and you can get the simplest results just by keeping it close to the gray range. As a general rule, cold grey and pure grey are the best choice for modern design. In traditional designs, shades of warm gray and Brown look Better Together.

How many colors are there?

You will notice that the color scheme used throughout this article has only five different colors. Five is a good number, it provides a number of options for the concept diagram here, and it is also a viable figure in the design. Of course, you can choose more or less colors in your own scheme.

The vast majority of sites may use only 3 colors in their design. Even some use only 2. Some may use 8 or 10 of them, which is more difficult than a site with only a few colors. Decide how many colors to use in your design by experimenting. But you may want to start with a five-color palette, and then decide whether to increase or decrease the color in the design process to achieve the most appropriate state.

The easiest way to add a color is to base it on an existing traditional color scheme and then start working on these color schemes. This will at least give you a direction to position until there are other colors to consider.

10 Big websites with color schemes

To give you more inspiration, here are 10 sites with a perfect color scheme to refer to. Some of the following color schemes may look strange at first glance, but you can see how they are displayed using the widest possible range of color schemes.

Wentings Bicycle & Mountain Bike Shop

Color scheme:

Trivuong.com

Color scheme:

Oscar Barber

Color scheme:

Northeast Regional Peace Partners

Color scheme:

MBA Architecture

Color scheme:

13 Studio

Color scheme:

Joy Project

Color scheme:

Morphix Blog

Color scheme:

El Salvador Cooperative Design

Color scheme:

Lemonstand

Color scheme:

Conclusion

In this series we just touch the fur of the color theory. There are specialized experts who have spent years making their choice of color the ability to refine it to fit any environment.

The best way to learn to create an excellent color scheme is to practice. You can specify a daily learning plan. You can use automatic tools first (such as Kuler's image to create the tool for this program), or just open Photoshop and start. You can start with an automated tool, such as a kuler tool that creates a color scheme based on a picture, or you can start with Photoshop. If you have a particularly beautiful or compelling color in your daily life, try creating a color scheme around this color. You can take advantage of sites that allow you to upload color schemes and organize them for later reference. This approach can make those color schemes more realistic and easier to use in the future.

More Resources

The following resources should help you create your own color scheme and more links to traditional color schemes.

• 10 Super useful tools for choosing the right palette
  A great tool for finding and creating palettes from the Web design Ledger rollup 10.
• Random Colors 2.0
  The page contains 100 random colors in hexadecimal code. If you are looking for color inspiration, this site is a good place.
• Classic color scheme
  This article on Color Wheel Pro covers the details and examples of all the traditional color schemes.
• Colormunki
  A different color scheme tool. Its color library label is useful when looking for and creating a monochrome color scheme.
• Colorschemer
  A free online version of a color scheme library and tools.
• COLOURlovers
  A color and design circle that contains a palette, search features, and a huge gallery of tools to create your own palette. A color and design community that includes a lot of palette footage, search capabilities, and tools to create your own palette.

Cameron Chapman
Cameron Chapman is an expert in web and graphic design with over 6 years of experience. She wrote a number of blogs, including her own blog Cameron Chapman on writing. She is also the Internet famous:a practical Guide to becoming a Online celebrity book author.