Color circle. Cool Color Combination Cheat Sheet Create a Color Scheme

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

Sometimes you sit and think about which shade of blue to choose the main one for the site, a little lighter or a little brighter, or maybe take a darker one ... And you still need to pick up additional ones. 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 simply publish here the services that I have in my bookmarks and which I use.

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

There is an opportunity to evaluate how people with color blindness and other visual disabilities will see your color gamut. You can choose web-safe colors.

Adobe Kuler is the second web tool that I use quite often. The selection of the color scheme is almost the same as on the previous site, but that's not why I love it. Besides the fact that you can create color schemes yourself, you can look at and use schemes created by other people.

To do this, press the button in the upper left menu "Watch". And a gallery of all kinds of color combinations will open in front of you.

This tool is a bit like Сolorscheme, but it has fewer functions, but it is possible to see how the color blocks will look like.

I hardly use this site, but since I have it in my bookmarks, I decided to add it too.

The next two sites generate a palette from your chosen image. It is magic :)

You choose any picture, the colors of which you like, the service analyzes it and gives you a color palette. The only difference between these two sites is how to provide them with a picture.

This site needs download picture from your computer.

A very handy tool for color matching. It is based on the principle of "like - dislike".

flatcolors.net

As the name suggests, this is where you can choose the colors for today's trendy, flat design. The site is interesting because after choosing a palette, you can download it for Corel and Photoshop.

materialpalette.com

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

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

These are the tools I have in my bookmarks.

Write in the comments which color matching sites for web design do you use?

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

Found a bug? Highlight a piece of text and press CTRL + ENTER

Professional web design isn't complete without a color scheme. This article will show you 20 fantastic tools to help you get the perfect color scheme.

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

Therefore, in order to simplify the process of choosing a color scheme, we have compiled the 20 best tools available. They will help you not to get lost in search of a suitable option and feel "color bliss"

01. Kuler

Kuler is arguably the most well-known color tool.

Adobe Kuler is arguably the most popular online color theme tool, and has gone from being a simple color tool on the web to a complete resource for creating themes and sharing with others. Plugins are available for all major Adobe applications, including Photoshop, Illustrator, and InDesign, making Kuler a great all-in-one tool for regular Creative Suite users.

02. ColorExplorer

ColorExplorer can perform many different functions.

We can say that it is one of the most sophisticated tools on the Internet. It offers a wide range of tools for designing, adapting and analyzing your color palettes. For example, tools that help determine availability WCAG color pickers, conversion tools that allow you to navigate between different systems, and everything you need to pick colors and create palettes.

03. Colors on the Web

Colors on the Web is powered by Flash.

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

04. COLOURlovers

COLOURlovers slightly resembles 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 own colors. It is compatible with several other instruments such as Kuler and Colourlovers. Pictaculous has a handy Adobe Swatch theme download that allows you to quickly and easily "grab the colors" you need to complement your photograph.

06. Contrast-A

Contrast-A creates an imitation of various visual defects.

This is not a very common color scheme tool. It is designed to ensure that you create a WCAG-compliant color scheme by previewing contrast levels and using a low visibility and color blindness technique. Contrast-A has a ton of links to manuals that are more user-friendly than the specifications document itself.

07. ColoRotate

ColoRotate boasts a beautiful visualization of the "color wheel"

ColoRotate has similar functions to Kuler, but differs by displaying the palette on a nice 3D cone and the ability to generate more than 5 colors in one scheme. The tool can be integrated with some 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 go well with the available color gamut.

HEX is a small handy tool for generating colors. Just enter a color code and it will display a set of pleasing colors that match perfectly with your base colors.

09. Color Scheme Designer

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

This online tool has similar functionality to Adobe Kuler. But thanks to interesting tricks for creating color themes, it allows you to select brightness / saturation and contrast parameters from the scheme properties, instead of "fiddling" 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 match the color scheme of a design for a single (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 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 picking tools on a simple interface. It lets you annotate palettes, upload images, follow CMYK links right away, and choose how to create your color scheme.

11. Colourmod

The Colourmod widget on the desktop makes it easy to select and define colors.

Colourmod is a desktop tool that allows you to easily select one of the colors in the area where the widgets are located, even if you are using the Dashboard for MacBook or using Konfabulator for Windows. Colourmod itself is not a palette selection tool, but it can still be used to select and define a color. In this case, you do not need to run other heavier programs.

12. ColorZilla

ColorZilla works in Chrome and Firefox.

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

13. Colormunki

Colormunki lets you create a color scheme based on Pantone swatches.

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

14.colr.org

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

This simple tool provides a unique opportunity to analyze the color scheme of an image (in other programs this function is performed automatically). This way, you can see what colors your picture is made of and choose the ones you like to set them as the main theme colors.

15. ColourGrab

ColourGrab is a great compact image color scheme generator.

This handy tool creates a color palette from any image on the web. Just enter the URL of the image you want to analyze, the site will "grab" it, determine its color gamut and create a simple 3D diagram that reflects the use of different colors for this image. It may not be the best option for standard themes, but ColourGrab is perfect for analyzing the distribution of color in images.

16. ColorBlender

ColorBlender creates a set of five colors that blend well with each other.

This site is a simple tool that lets you sample an image, adjust colors, and follow in real time how a set of 5 perfectly matched colors is matched. Palettes can be loaded directly into Photoshop or Illustrator as an EPS file.

17. GrayBit

GrayBit ​​lets you analyze your site to see how it looks in grayscale.

This handy tool doesn't directly match color themes, but it does allow you to analyze your site to see what it looks like when converted to grayscale. This will help you check if you have achieved enough contrast in the color palette to make it easier 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, where users share their color palettes as well as gradients and images. It's not just a site for creating color schemes, but rather a feast for aesthetics and is worth checking out for a couple of amazing discoveries.

19. Color Hunter

Color Hunter is a great site to find new colors.

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

20. Stripe Generator 2.0

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

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

Choosing a color scheme for a website is one of the important points in the design process. The selection of a combination of colors is a rather complicated 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 a wide variety of color schemes to choose from, while others allow you to interactively build your own scheme.

Kuler

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

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. Also you can create your own scheme using the unique 3D tool. The color scheme can be used directly in Photoshop and Fireworks using the ColoRotate plug-in.

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

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

Pictaculous is a simple online color scheme generator 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 pick 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 you discover this beauty. Thanks for the inspiration and the goosebumps.
Join us at Facebook and In contact with

Scheme No. 1. Complementary combination

Complementary, or complementary, contrasting colors are colors that are located on opposite sides of Itten's 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 equally spaced colors. Provides high contrast while maintaining harmony. This composition looks quite lively even when using pale and desaturated colors.

Scheme No. 3. A similar combination

A combination of 2 to 5 colors 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, only the neighboring colors are used instead of the opposite color. A combination of a primary 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 combinations.

Scheme No. 5. Exercise book - combination of 4 colors

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

Scheme No. 6. Square

Combinations of individual colors

• White: goes with everything. Best combination with blue, red and black.
• Beige: with blue, brown, emerald, black, red, white.
• Gray: with fuchsia, red, purple, pink, blue.
• Pink: with brown, white, mint green, olive, gray, turquoise, pale blue.
• Fuchsia (dark pink): with gray, tan, lime color, 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, sandy, pale yellow, beige.
• Crimson 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, purplish pink, lime color.
• Reddish brown: pink, dark brown, blue, green, purple.
• Orange: light blue, blue, purple, purple, white, black.
• Light orange: gray, brown, olive.
• Dark orange: pale yellow, olive, brown, cherry.
• Yellow: blue, purple, light blue, purple, gray, black.
• Lemon yellow: cherry red, brown, blue, gray.
• Pale yellow: fuchsia, gray, brown, shades of red, yellowish brown, blue, purple.
• Golden yellow: gray, brown, azure, red, black.
• Olive: orange, light brown, brown.
• Green: golden brown, orange, salad, yellow, brown, gray, cream, black, creamy white.
• Lettuce color: brown, yellowish brown, fawn, gray, dark blue, red, gray.
• Turquoise: fuchsia, cherry red, yellow, brown, cream, dark purple.
• An electrician is handsome in combination 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, gray, turquoise, mint green, light orange.
• Black is versatile, elegant, looks in all combinations, best of all with orange, pink, salad, white, red, lilac or yellow.