Ready-made color schemes. The best color combinations

Effective website design is unthinkable without selection color scheme. It remains to figure out how to do this.

For some projects, you may have already chosen a few colors to match your logo or brand palette, and are building your site within those constraints. Others are still just sketches. There are also those that need minor changes that can make the site more beautiful and convenient.

Whether you're looking to make your work easier and faster, or are building a website for the first time, these tools will help you find a solution.

Let's start with a brief introduction to color theory.

Below you will find 19 resources to help you choose a color palette for your website.

Preparation

Need some inspiration?

1.

BrandColors shows how leading brands use color to differentiate their businesses, tell their stories and communicate their values. You can view a list of companies, non-profits, and startups in alphabetical order, or search for a brand that interests you.

Looking for a ready-made palette?

2.

This is a forum about design color palettes, containing almost 2,000,000 options uploaded by users. You can download a palette containing a specific color and read what designers write. As a rule, for one combination several options of different intensity are given.

The palette is accompanied by telling names: Storm in the Whitsundays (Pacific archipelago in the Coral Sea), Twilight in the Whitsundays, Whitsunday Island

3.

This resource allows users to create and upload their own color schemes. You can filter them by date, rating and number of downloads, or search by keywords.

4.

In ColoRotate, you'll find a library of color schemes that you can browse, select, and modify. A special 3D color tool will help you make your own palette based on the one you found. The color scheme you create can be applied immediately in PhotoShop or Fireworks by installing the ColorRotate plugin or iPad app.

According to brand requirements

What if you already have pictures, logos, or brand requirements that need to be met?

1.

This site isn't as feature-rich as some on this list, but it does a great job of what it was designed for: researching a specific color. Just upload a picture and Color Hunter will create a palette based on it. This is a great way to achieve harmony between images and the main colors of the site. In addition, here you can lay out the color scheme of the site that you like.

2.

Pictaculous makes palettes from photos. All you have to do is upload a photo to get the colors that go with it. The resource will also offer ready-made palettes that will suit you.

3.

This tool was known as Adobe Kuler and was intended for color comparison. Now it is a full-fledged palette creation system that allows you to try, compare and save color combinations. You can select the palette type and create five-color schemes automatically or using manual settings.

4.

Paletton speeds up the palette creation process. You need to choose the type of scheme: mono, compound, triad, tetrad, related, related-contrast. Once you change one color, the others will automatically adjust.

5.

Color Spire also builds a palette based on a single color. You choose the original shade and get options for schemes that go with it. You can also see a preview of how the selected palette looks on the website.

6.

This Chrome plugin helps you harmonize colors, accommodate color blindness, and identify HEX codes. Color palettes can be directly exported to Illustrator, PhotoShop and CoIRD.com.

7.

The resource allows you to manipulate your own color palette by selecting and adding shades. As a result, you quickly and easily create a new diagram based on an existing one.

8.

This tool selects colors that match yours. It's a little more basic than the other resources on this list. You need to insert the HEX code of the color into the line or select it from the spectrum presented in the form of a wheel. The generator produces 3 colors that match yours and provides them with HEX codes.

Create your own color

Many of the resources on this list assume you have the original color. If there is no need to meet brand requirements and BrandColors did not help with the choice, you can start with sketches.

1.

This iOS app helps you choose from several colors that are placed next to each other at a short distance, which is much more convenient than gradient representation, circles and spectra. Large color grids allow you to use the entire screen (which is especially valuable for iPad Pro owners). The app allows you to create color swatches, find RGB, HEX and HSLA values, and create palettes from sketches.

3. Color

In Color from HailPixel, you can't help but decide on a color. You will understand exactly what you want and receive the HEX code for the shade.

You move your mouse or gesture and the color changes a little each time. It looks like a color sphere, constantly accompanying the colors with HEX codes. If you move left and right on the screen the color will change, and up and down the saturation will change.

Get color code

If you saw a color somewhere and want to know its code and name, these resources are for you.

1.

SpyColor will provide information about any color, including Hex, RGB, CMYK and other codes, and show a range of patterns for each hue, including complementary, split-complementary, process, contrast and analog.

2.

HTML Color Codes finds the HEX code for colors in an image. You select a picture, open it for viewing and get the color code by hovering over it.

Test your palette

Once you've created a color scheme, you want to make sure it's effective.

Check my Colors checks foreground and background colors to meet contrast requirements for those with abnormal color vision. If you want to make sure your site is colorblind friendly or want to get color combinations that work and are intuitive from a UX perspective, this resource is indispensable. It is enough to enter the website address to get acquainted with the report on its appearance.

Here you can choose up to 5 shades from a huge palette and get images that have a similar color combination and are accompanied by HEX codes. Pictures can be saved on the website or downloaded.

Conclusion

Creating a color palette for a website is a craft at the intersection of art and science. These resources will help you quickly and easily get to a visual experience that looks great and performs well.

Colors for web design play huge role. 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 what is fashionable now, 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.

One of the most important factors when creating a unique and recognizable design is color. The right choice of color scheme can determine the success or failure of a website. When a visitor takes their first look at a web page, the colors you choose send them an instant message about that page. Luckily, there are many tools to help you choose the right color scheme. Here are five of the best.

1. Cooler

Kuler from Adobe has long been recognized as the best assistant for a professional web designer. Unlike competitors, there is a large community here and you can share created palettes or take other people’s color schemes and modify them to suit your needs. To communicate in the community, you need to register and get an Adobe ID. Colors in Kuler are represented in a variety of formats, including RGB, CMYK, LAB and HSV.

Inspiration can arise under the influence of the most unexpected occasion. For example, you may come across beautiful photo with an attractive color scheme. This color palette generator was created just for processing such photos. Upload files in JPG or PNG formats and get a detailed layout of key colors. No matter what reaction you're trying to evoke in your visitors, a color palette generator can help create a unique look for any website.

Individual colors never hang in a vacuum, and each shade has an impact on its surroundings. The Contrast-A tool takes a highly technical approach to palette configuration, providing detailed information about the Luminance Ratio and differences in brightness and color. This is the perfect tool if you want to create a minimalist website with few colors that complement each other.

This popular Firefox plugin allows you to determine the meaning of individual colors directly in the browser and measure the difference between them. There is a “color scheme browser” for selecting individual colors from pre-selected sets. Easy to use and extremely feature-rich, the ColorZilla plugin is like the Swiss Army knife of browser extensions for web designers and artists.

Unlike most other "color wheel" color scheme generators, Colorotate displays the palette on a 3D cone. Like Kuler, users can save and edit their color schemes, as well as view palettes made by other designers. The tool is integrated with popular design Adobe programs Fireworks and Photoshop.

When we talk about effective web design, we talk about intuitive user interfaces and layouts, but color schemes have the same great importance, or even more. The tools listed here should point you in the right direction to choose a great color palette for your website on the first try. You can find others on the Internet useful tools, but these are where you can start to find the perfect arsenal to suit your personal style. Good luck and happy designing!

How to manage user attention on a website? How to choose the right colors for a website? What application can you use to find out the color code on a competitor’s website? We'll look into it today in the article.

Services for determining color schemes

• color-hex.com - will determine which colors are next to your color
• thestocks.im - aggregator of mockups, videos, photos, icons, fonts.
• Eye Dropper is an extension for Google Chrome that allows you to use an eyedropper to find out the code of any color on any page on the Internet.
• Adobe Color CC-select color combinations. Adobe Color CC will help when you have a picture and you want to upload its primary colors. The program determines a palette of 5 dominant colors in the image, which can be saved and used in presentations. For free.
• Colorzilla is an extension for Google Chrome and Mozilla Firefox, which includes the tools color picker, eye-dropper, css gradient generator and palette browser. All you need to do is point the eyedropper at the desired color on any website and copy the code.

Color selection

Upload a picture and make a palette out of it.

• Coolors.co - a resource with palettes that you can create yourself or borrow from the collection

COLOURlovers - to a community of color fans who share palettes, colors, backgrounds and graphic templates. There are color trends from interiors, magazines, websites and even street fashion. In the “Browse” section you can find author’s colors and palettes and download backgrounds for your presentation.

How to choose a color for a website

You can't judge a book by its cover, but you certainly can judge a website by its design. People tend to evaluate and judge products and websites based on their appearance, even before they can understand their functionality and benefits.

In branding, colors have more direct meanings than in the general sense. They can be summarized in a few words, so here is a list for you:

• Black. Reliable, sophisticated and experienced. Used to promote luxury goods.
• White. Simple, calm and clean.
• Red. Confidence, youth and power. Often used for total sales.
• Orange. Friendly, warm and energetic. Creates a call to action: register, buy or sell.
• Yellow. Happiness, optimism and warmth. Typically used to draw attention to a display window.
• Green. Peace, growth and health. In marketing it is used for relaxation.
• Blue. Trust, security and stability. Typically used for banks and businesses.
• Purple/violet. Luxurious, creative and wise. Commonly used in the beauty and anti-aging products industry.
• Pink. Romantic and feminine. Used to promote products for women and young girls.

Black

Color has a large number of meanings. It is associated with tragic situations. It all depends on how you use it and what colors come with it. Black goes well with any other color, making it perfect for a background. Designers often use it to establish contrasts.

White

The color signifies purity and innocence, as well as wholeness and clarity. White is often associated with a blank sheet of paper, encouraging people to generate new ideas. However, too much white can cause feelings of isolation and emptiness. In design, white is commonly used as a background color, especially for resources where readability is an important part.

Red

The color is usually associated with passionate, strong or aggressive feelings. It symbolizes both good and bad states, including love, confidence, passion and anger. Use of red color in design - effective method attract users' attention.

Orange

It is an energetic and warm color that evokes a feeling of excitement. Designers use color when they need to motivate action.

Yellow

It is the color of happiness and symbolizes sunshine, joy and warmth. Yellow is considered to be the lightest color and it has one of the most powerful psychological meanings. Users who see yellow colors in a design can feel inspired and confident. Although, you should remember that too much yellow can cause negative reactions such as feelings of anxiety or fear.

Green

It is often called the color of nature, balance and harmony. Green brings calming and renewing feelings. It is also a sign of growth and inexperience. He has more positive energy than most other colors, but is sometimes associated with materialism. The design in green tones is ideal for products related to nature.

Blue

The color of trust. It usually shows reliability and reassures.

Purple

Long associated with wealth, as many kings wore purple robes, it is useful for representing certain luxury products. It is also the color of mystery and magic. It mixes the energy of red and blue so it has a balance of strength and stability. A large concentration of color can distract users' attention.

Pink

It is the color of sensitivity and romance. Pink is much softer than red, so it creates a feeling of unconditional love. Pink is very strongly associated with femininity, so it can be an effective color if the target audience is mainly girls.

Brown

Designers usually use Brown color as a background in various shades, from very light to deep. It brings a feeling of warmth and comfort. Additionally, it can be used to demonstrate experience and confidence.

The influence of color on the purchase of goods

The study was conducted in North America.

Favorite colors

Least favorite colors

Color models

• CMYK: Cyan (bluish), Magenta (reddish), Yellow (yellow), and Key (“key” - black). That is, this model consists of three primary colors and black, which allows you to create darker shades. Used in painting and printing.
• RGB models: red, green, blue - red, green, blue. Used in computers, televisions and other electronic devices

Monochromatic

It is based on one color with different shades. A monochromatic palette is always a winning choice, as it is difficult to make a mistake and create an unpleasant color scheme.

Analogous Colors

To create similar harmony, use colors that are next to each other on the color wheel.

Complementary

A complementary scheme is a combination of colors located opposite each other on the color wheel. This scheme is the opposite of analogous and monochromatic, as it aims to achieve high contrast. For example, an orange button on a blue background is hard to miss in any interface.

Different colors and shades have different effects on our emotions and associations. Colors also influence our perception of design. It doesn’t matter what kind of design it is - interior, website or mobile application - the combination of colors plays a very important role. Just a few centuries ago, the choice of colors, that is, pigments, was very small. Dyes were obtained from various minerals and plants, and it was quite easy for artisans of that time to choose matching colors. It is much more difficult for modern designers - they have a huge number of shades at their disposal and sometimes it is painfully difficult to choose harmoniously combined colors.

Each designer solves this problem differently. Some act intuitively, choosing shades almost at random, while others methodically compose ready-made palettes and then use them in their work. FreelanceToday invites you to check out different ways selection of color palettes shared by famous designers.

1. READY-MADE PALETTES AROUND YOU

Callie Hegstrom, a designer at Make Media, says, “I first take photos of something beautiful. It could be flowers, a sunset, anything. This way I get a ready-made color palette and now I just need to isolate the main colors from the photo, which will definitely be in harmony with each other. I can then open the photo in Photoshop and use the eyedropper to make a new palette. It's even easier to make a palette using a tool like Photocopa. Just upload the image you like and get a ready-made palette.”

2. USE A COLOR WHEELS

The artist Marc Chagall said: “All colors are friends of their neighbors and lovers of their opposites.” What did he mean? “Friends” Chagall called shades located next to each other on the color wheel, for example, blue and blue. But “lovers of opposites” are opposite them on the color wheel, that is, blue will be combined with various shades of orange.

Canadian designer Cindy Kinash of Cultivated Mind says, “When using watercolor to show shadow or depth, you can use a similar color, just a few shades darker.” This method of choosing well-matching colors is one of the best. By using friendly colors and combining them with contrasting shades, you can achieve stunning results - you just need to know how to use the color wheel.

3. LEARNING FROM INTERIOR DESIGNERS

Since, regardless of the type of design, the principles of working with color remain the same, you can pay attention to how interior designers create color palettes. British designer Elena Genova shares her experience: “When I do interior design, I use a rule that also applies to graphic design. In my work I use the dominant color, its share is 60%, friendly shades (30%) and 10% is the color accent. If the palette seems too poor, then you can add several shades that will be “friends” of the dominant color, but you should not split the accent, it should be left as it was.”

If you're having trouble choosing colors, take a look at nearby design areas - you may find inspiring examples there.

4. SAVE GOOD EXAMPLES

Niki Laatz, owner of a print shop and design store, explained how she finds eye-catching color palettes and uses them in her work: “Whenever I see a painting or illustration with colors that I like, I take a photo or screenshot and save it.” their. Then, when I have to pick a color palette, I just look through all the images I have saved and always find something inspiring there.”

You can look for successful examples of matching colors anywhere - in museums, in books, in magazines and, of course, on the Internet. You can also use a site like Pinterest, where you can catalog and save many types of color palettes.

5. USE A FANPANTONE

Sometimes such a proven method of selecting colors as the color wheel does not help create a palette. In this case, you can choose colors like in the good old days using the Pantone fan. Sometimes it can be helpful to step away from the monitor and focus on the physical color sample rather than the digital one. Kelly Hegstrom explains how to use a shade fan in her work: “Sometimes it's a good idea to have a shade fan handy, especially when you're not sure the shade on your monitor will show up correctly when printed. The fan is also useful if the client needs a special color - you just show him the fan and the problem is solved by itself.”

Pantone can be very useful in the work of graphic designers - with the help of a fan you can create accurate color palettes, which will not only save time, but also allow you not to worry when it comes to printing in a printing house.

6. TAKE COLORS FROM NATURE

Our eyes are accustomed to the colors that are most often found in nature. Natural color palettes will always look good - because they are familiar to us. Designer Gary from agency CO-OP says: “The color combinations are endless. Landscapes, fruits, leaves, flowers - all these are natural, accessible and free sources of inspiration." Gary works in South Africa and therefore his palettes are warm and vibrant, just like the country's nature.

7. USE 3 OR 4 COLORS

If a designer deliberately uses a wide range of colors in his work, for example, he needs to depict a rainbow - that’s one thing. However, you should avoid using too many colors. Rodrigo German, a designer from Chile, recommends using three colors in your design. If additional shades are required, then they should be as little contrast to the main color as possible.

Showcasing the font he created, Marty, Rodrigo uses three colors - pink, green and black. At the same time, he plays with texture to achieve the desired degree of contrast.

So if you're having trouble choosing colors or aren't sure about your color palette, ask yourself if you can cut down on the number of colors, ideally to three. Sometimes this method is very effective.

8. COLOR PALETTE DEPENDS ON THE THEME

When choosing colors, you should always consider the theme. Are you working on a sports or business website? Or is your project dedicated to beauty and fashion? Think about which colors are ideal given topic. Are you creating a flyer for a beauty salon? It should not be done in dark colors. And if you are working on a sports magazine, what colors will you need? Each topic can be described in words - for example, fashion can be characterized by such adjectives as "graceful", "sweet", "elegant", and sports - with words like "dynamic", "aggressive", "vibrant".

Salome, a designer from the Graphic Box agency, suggests first making a preliminary sketch of the color palette, and then gradually choosing the most suitable shades. “For example, I want a ‘romantic’ purple,” she says. “Or I want to use a ‘cute’ pink.” Salome suggests using emotions to accurately select colors - this method helps to create palettes that best suit the theme. She also believes that designers should familiarize themselves with color theory and read various materials, which explores how people perceive different color combinations.

9. USEPINTEREST TO SEARCH THEMED PALETTES

On Pinterest you can find a large number of color palettes created by designers from all over the world. Ian Barnard, founder of Vintage Design Co., explains how he uses Pinterest: “If I was designing a beach holiday poster, I would do a search on the site for ‘summer color palettes’ and pick one that would work.”

10. USE SPECIAL SITES

COLORlovers is a creative community where people living in different countries, create and share color palettes and templates with other participants. By becoming a member of the community you will have access to more than 3.7 million ready-made color palettes.

If you are looking for inspiration and want to achieve results using a non-standard color scheme, the help of the professional community will be very helpful.