Cool cheat sheet on color combinations. Color wheel Color wheel online color selection

Colors play a huge role in web design. To correctly select a color scheme for a website, there are special services. I'm sure every web designer has at least one of these in their bookmarks.

Sometimes you sit and think what shade of blue to choose as the main one for the site, a little lighter or a little brighter, or maybe darker... And you still need to choose additional ones for it. You can, of course, do this by eye, but it is better to use one of the special services.

I will not talk about color theory (this is too voluminous information), but will simply publish here the services that I have in my bookmarks and that I use.

I have been friends with this instrument for many years. The most convenient tool for selecting colors (in my opinion). It has many additional features. For example, you can see an example of a light and dark page with selected colors.

It is possible to evaluate how people with color blindness and other visual impairments will see your color scheme. You can choose web safe colors.

Adobe Kuler is the second web tool that I use quite often. The selection of color schemes is almost the same as on the previous site, but that’s not why I love it. In addition to creating color schemes yourself, you can look at and use schemes that other people have created.

To do this, click the button in the top left menu “Watch”. And a gallery of all kinds of color combinations will open in front of you.

This tool is a bit similar to Colorscheme, but has fewer functions, but you can see what color blocks will look like.

I practically don’t use this site, but since I have it in my bookmarks, I decided to add it too.

The following two sites generate a palette from the image you select. It is magic:)

You choose any picture whose colors you like, the service analyzes it and gives you a color palette. The only difference between these two sites is how they provide the image.

This site requires download picture from your computer.

A very convenient tool for color selection. Based on the “Like - Dislike” principle.

As the name suggests, here you can choose colors for the now fashionable flat design. The site is interesting because once you select a palette, you can download it for Corel and Photoshop.

Another fashion trend is material design. This site helps you choose color combinations for the UI (user interface). Additionally, the site has a large set of icons.

And finally, the user interface again. Here is just a set of colors for UI design. By clicking on any color, you can see how white text will be read against a certain background.

These are the tools I have in my bookmarks.

Write in the comments what color selection sites for web design do you use?

Need a website with the right colors? , let's do it :)

Found a mistake? Select a piece of text and click CTRL+ENTER

Professional web design is not complete without creating a color scheme. This article shares 20 fantastic tools that will help you find the perfect color scheme.

There are many tools on the World Wide Web for achieving color nirvana. They seem completely different, but many of them are just modified versions of more popular and useful tools.

So to make the color selection process easier, we've rounded up 20 of the best tools available. They will help you not to get confused in search of a suitable option and feel “color bliss”

01. Cooler

Kuler is perhaps the most famous tool for working with color.

Adobe Kuler is perhaps the most popular online color theme tool, having evolved from a simple online color tool to a full-fledged resource where you can create themes and share with others. Plugins are available for all major Adobe applications, including Photoshop, Illustrator, and InDesign, making Kuler a great feature-rich tool for regular Creative Suite users.

02.ColorExplorer

ColorExplorer can perform many different functions.

It can be said that this is one of the most thoughtful tools available on the Internet. It offers a large set of tools to design, tailor and analyze your color palettes. For example, tools that help determine accessibility WCAG color selection, conversion tools that allow you to move between different systems, and everything you need to select colors and create palettes.

03. Colors on the Web

Colors on the Web is Flash-based.

Colors on the Web loads solid colors in HEX or RGB codes and produces a set of schemes based on different mathematical proportions. This tool does not work on iPad or iPhone because it uses Flash to run the program.

04. COLOURlovers

COLOURlovers is slightly reminiscent of Pinterest for color

05. Pictaculous

Pictaculous allows you to upload an image and generate a color scheme based on it.

This tool from the creators of MailChimp allows you to upload an image and create a color scheme based on its colors. It is compatible with several other tools such as Kuler and Colourlovers. Pictaculous has a handy Adobe Swatch for loading themes, making it quick and easy to "capture the colors" you need to complement a photo.

06. Contrast-A

Contrast-A creates a simulation of various visual defects.

This is not your typical color scheme tool. It is designed to ensure that you have created a WCAG-compliant color scheme by previewing contrast levels, and using techniques to simulate non-perceptual color and low visibility. Contrast-A has a ton of links to manuals that lay everything out in a more user-friendly way than the technical properties document itself.

07. ColoRotate

ColoRotate boasts a beautiful “color wheel” visualization

ColoRotate has similar features to Kuler, but differs by displaying the palette on a beautiful 3D cone and the ability to generate more than 5 colors in one scheme. The tool can be integrated with select Creative Suite applications. It is also available as an iPad app and can work in conjunction with Photoshop in color console mode.

08. Hex Color Scheme Generator

HEX creates colors that blend well with your existing color scheme.

HEX is a handy little tool for generating colors. Just enter a color code and it will display a selection of nice colors that will pair perfectly with your base colors.

09. Color Scheme Designer

Color Scheme Designer has several interesting ways to create color themes.

This online tool has similar features to Adobe Kuler. But thanks to some interesting techniques for creating color themes, it allows you to select brightness/saturation and contrast parameters from the scheme properties, rather than having to fiddle with the individual colors that make up the theme. Color Scheme Designer provides access to a set of standard mathematical methods, including the ability to harmoniously select the color scheme of a design for one (mono), two (complement), three (triad) or four (tetrad) colors with shades and halftones.

10. COPASO

COPASO is an excellent tool for solving several problems at once.

One of the site's tools COLOURlovers, COPASO deserves special attention, as it allows you to simultaneously solve many issues when creating palettes. It provides a complete set of color selection tools in a simple interface. Use it to annotate palettes, upload images, jump straight to CMYK links, and choose how to create your color scheme.

11. Colourmod

The Colourmod widget on your desktop helps you easily select and define colors.

Colourmod is a desktop tool that makes it easy to select one of the colors in the widget area, even if you're working with Dashboard for MacBook or using Konfabulator for Windows. Colourmod, in itself, is not a palette selection tool, but, nevertheless, it can be used to select and define a color. In this case, you will not need to run other heavier programs.

12. ColorZilla

ColorZilla works in Chrome and Firefox.

This application was originally developed as a plugin for Firefox, but it can also be used in the Google Chrome browser. ColorZilla is an extension that has a ton of different tools for working with color, including: color picker, eyedropper, css gradient creator, and palette viewer.

13. Colormunki

Colormunki allows you to create a color scheme based on Pantone swatches.

A convenient tool for working online, presented by the creators of Colormunki for color calibration. You can create palettes based on Pantone color swatches online and use different techniques to find pleasing combinations.

14.colr.org

With Colr.org you can see the color range of your images.

This simple tool gives you the unique ability to analyze the color scheme of an image (other programs do this automatically). This way, you can see what colors your picture consists of and select the ones you like to set as the main theme colors.

15. ColourGrab

ColourGrab is an excellent compact image color scheme generator.

This handy tool creates a color palette based on any image on the Internet. Simply enter the URL of the image you want to analyze, the site will “grab” it, determine its color scheme, and create a simple 3D chart that shows the different colors used for that image. While it may not be the best option for standard themes, ColourGrab is great for analyzing color distribution in images.

16.ColorBlender

ColorBlender creates a set of five colors that work well together.

This site is a simple tool that allows you to create a sample image, adjust the colors, and watch in real time as a set of 5 perfectly coordinated colors is selected. Palettes can be loaded directly into Photoshop or into Illustrator in EPS file format.

17. GrayBit

GrayBit ​​allows you to analyze a website to see how it looks in grayscale.

This handy tool doesn't directly select color themes, but it does allow you to analyze your site to see what it would look like if you converted it to grayscale. This will help you check that you have achieved enough contrast in your color palette to make it easy to read.

18. COLRD

COLRD is perfect for sharing your color schemes and learning about new ones.

This colorful site is a great source of inspiration, with users sharing their color palettes as well as gradients and images. This isn't just a site for creating color schemes, but rather a real feast for the aesthetic sense, and it's worth checking out for some amazing discoveries.

19. Color Hunter

Color Hunter is a great site to find new colors.

Color Hunter helps you quickly select the color scheme of uploaded images, by searching for a suitable tag or using HEX links. Fast and easy to use, the site allows you to make interesting color discoveries.

20. Stripe Generator 2.0

Stripe Generator 2.0 helps you draw attention to your color schemes.

It is often referred to as the "ultimate tool for web2.0". Stripe Generator 2.0 is a good tool for creating nice color combinations and unusual pictures at the same time.

Introducing a useful tool for selecting colors - the Itten color wheel.

What it is?

In short, these are three disks placed on the same axis, on the surfaces of which all the primary colors of the light spectrum are displayed, as well as the maximum possible number of shades and a contrast scale.

The relative arrangement of colors, shades, slots and indicators on the circle is implemented based on the laws "coloristics" (color theories), so with its help it is very convenient to select harmonious combinations of shades where necessary.

That is, in fact, it is a “live”, material cheat sheet on which all the main color schemes are displayed. “Live” because you can pick it up, unlike the image on the screen.

Color wheel device

Buy

Naturally, you need to know how to use such a seemingly complex device, so on our website you can not only buy a color wheel, but also familiarize yourself in detail with its structure, read instructions on how to use it, and watch various videos on this topic.

We also recommend that you familiarize yourself with the online service for selecting colors in clothes.

Circle for selecting color combinations

The predecessor of this device in its modern form is the Itten color ring (see figure below).

It was Johannes Itten who was the first to single out exactly twelve colors from the entire spectrum and arrange them around a circle in such a way that the pairs that contrast with each other as much as possible are opposite each other. In the center he placed a triangle with three primary colors - red, blue and yellow (it is from them that all the others can be obtained by mixing in different proportions). Itten enclosed this triangle in a hexagon, inside which he indicated what shades would be obtained by mixing primary colors in equal proportions.

That is, the first information message that such a layout carries is addressed to beginning artists - they can clearly see the results of mixing different colors.

Let's look at this point in a little more detail...

Why are there twelve primary colors?

• As you can see in the above figure, there is three primary colors (also called primary colors).
• By mixing them in pairs in equal proportions, you can get three secondary, total - six.
• Mixture primary with a neighbor in a circle secondary gives tertiary color. This gives us six more combinations, for a total of - twelve.(Also, tertiary colors can be obtained by mixing primary colors in unequal proportions)

Of course, twelve colors are not enough to navigate the surrounding variety of colors and find the desired shade, or see what happens when mixing not neighboring, but completely arbitrary colors. Therefore, those circles that you can find for sale or order on this site are more complex and contain much more useful information than a simple “twelve-part Itten ring”.

Guide to Mixing Colors

With its help, you can determine the result of mixing arbitrary colors and shades - the number of combinations is sufficient for the artist to understand what colors need to be mixed to obtain a given shade. This is a wonderful drawing aid, especially for beginning artists.

Even if the shade is slightly different from the desired one, the desired result can be achieved by changing the proportions of mixed colors.

How can these same proportions be determined? Is it really at random? No, the color wheel can help with this too.

Saturation scale

This scale is on the same side as the blend guide, since the two functions work in tandem.

The saturation scale is a gradation of gray tones from black to white. From the gray cells of varying brightness presented on the scale, you can always find a gray shade that is as close in saturation as possible to the required shade, after which it will become clear how much you need to darken or lighten the paint.

To understand how this is done practically, watch this video:

Color Combination Schemes

The reverse side of the disk contains no less useful information, and maybe even more - it helps to select color combinations based on the chosen scheme.

A color combination scheme is a figure, in the simplest case a line connecting colors that “match” each other. The wording is very vague, since the selection of the chromatic scale is both a science and an art.

Firstly, harmony or disharmony of colors is a very subjective concept. As they say, “there is no friend according to taste.”

Secondly, whether they are “suitable” or “inappropriate” - it all depends on the specific situation, mood, what exactly the artist or designer wants to say, on the style in which the work is performed, whether any element needs to be highlighted, or vice versa - make it invisible.

The color wheel is a tool on which you can visually display all the main color schemes, but you need to know how to use this tool. You should know for yourself, or at least feel which of the schemes is most suitable for your task. For our part, we will try to post on this site as much useful information as possible about how to use the color wheel (see section

Choosing a color scheme for a website is one of the important points in the design process. Selecting a color combination is a rather complex and creative process. Fortunately, there are many services that can provide significant support for making the right choice.

Some of the resources mentioned in this review provide the opportunity to choose from a large number of ready-made color schemes, while others allow you to interactively build your own scheme.

Cooler

Adobe Kuler contains a large library of ready-made color schemes. You can view the diagram online and download it for use in Adobe Creative Suite products.

Color Lovers currently has nearly 2 million user-created color schemes. You can view them by sorting by date, rating, number of views.

ColoRotate has a library of ready-made color schemes. You can also create your own diagram using a unique 3D tool. The color scheme can be used directly in Photoshop and Fireworks using the ColoRotate plugin.

Color Scheme Designer allows you to select the type of color scheme (mono, complementary, triad, tetrad, analog). Then you can adjust the colors and see the effect of the scheme using an example.

ColorSchemer has a large library of user-created color schemes. You can sort them by date posted, rating, or number of downloads.

Pictaculous is a simple online color scheme generation tool. You can upload an image and the service will generate a diagram to use with the image.

Color Spire

Color Spire is a very easy to use service. You choose a base color and it suggests a color scheme. You can also see the appearance of the diagram on a simple template.

Guys, we put our soul into the site. Thank you for that
that you are discovering this beauty. Thanks for the inspiration and goosebumps.
Join us on Facebook And In contact with

Scheme No. 1. Complementary combination

Complementary, or complementary, contrasting colors are colors that are located on opposite sides of the Itten color wheel. Their combination looks very lively and energetic, especially with maximum color saturation.

Scheme No. 2. Triad - a combination of 3 colors

A combination of 3 colors lying at the same distance from each other. Provides high contrast while maintaining harmony. This composition looks quite lively even when using pale and desaturated colors.

Scheme No. 3. Similar combination

A combination of 2 to 5 colors located next to each other on the color wheel (ideally 2–3 colors). Impression: calm, inviting. An example of a combination of similar muted colors: yellow-orange, yellow, yellow-green, green, blue-green.

Scheme No. 4. Separate-complementary combination

A variant of a complementary color combination, but instead of the opposite color, neighboring colors are used. A combination of the main color and two additional ones. This scheme looks almost as contrasting, but not so intense. If you are not sure that you can use complementary combinations correctly, use separate-complementary ones.

Scheme No. 5. Tetrad - combination of 4 colors

A color scheme where one color is the main color, two are complementary, and another one highlights the accents. Example: blue-green, blue-violet, red-orange, yellow-orange.

Scheme No. 6. Square

Combinations of individual colors

• White: goes with everything. The best combination with blue, red and black.
• Beige: with blue, brown, emerald, black, red, white.
• Grey: with fuchsia, red, purple, pink, blue.
• Pink: with brown, white, mint green, olive, gray, turquoise, baby blue.
• Fuchsia (deep pink): with grey, tan, lime, mint green, brown.
• Red: with yellow, white, brown, green, blue and black.
• Tomato red: blue, mint green, sandy, creamy white, gray.
• Cherry red: azure, gray, light orange, sand, pale yellow, beige.
• Raspberry red: white, black, damask rose color.
• Brown: bright blue, cream, pink, fawn, green, beige.
• Light brown: pale yellow, creamy white, blue, green, purple, red.
• Dark Brown: Lemon Yellow, Blue, Mint Green, Purple Pink, Lime.
• Tan: pink, dark brown, blue, green, purple.
• Orange: blue, blue, lilac, violet, white, black.
• Light orange: gray, brown, olive.
• Dark orange: pale yellow, olive, brown, cherry.
• Yellow: blue, lilac, light blue, violet, gray, black.
• Lemon yellow: cherry red, brown, blue, gray.
• Pale yellow: fuchsia, grey, brown, shades of red, tan, blue, purple.
• Golden yellow: gray, brown, azure, red, black.
• Olive: orange, light brown, brown.
• Green: golden brown, orange, light green, yellow, brown, gray, cream, black, creamy white.
• Salad color: brown, tan, fawn, gray, dark blue, red, gray.
• Turquoise: fuchsia, cherry red, yellow, brown, cream, dark purple.
• Electric blue is beautiful when paired with golden yellow, brown, light brown, gray or silver.
• Blue: red, gray, brown, orange, pink, white, yellow.
• Dark blue: light purple, light blue, yellowish green, brown, gray, pale yellow, orange, green, red, white.
• Lilac: orange, pink, dark purple, olive, gray, yellow, white.
• Dark Purple: Golden Brown, Pale Yellow, Grey, Turquoise, Mint Green, Light Orange.
• Black is universal, elegant, looks in all combinations, best with orange, pink, light green, white, red, lilac or yellow.