Create a color scheme. How to quickly create a color palette: a simple trick. Steps to creating your own kit with the required color tones
07.06.16 13472Color selection - one of the most important stages in the process of creating good design.
To make your task easier, we decided to compile a selection consisting of best services to create color schemes. They will help you save time and still get decent results.
01. Adobe Color CC
Adobe renamed its Kuler project to Color
You may be familiar with this tool by its former name - Adobe Kuler. However, Adobe just recently renamed one of its popular web applications to Adobe Color CC.
It allows you to select, create and save different color schemes, each of which can contain up to five colors. The tool is available in both browser and desktop versions. If you are using the desktop version, you will be able to export color scheme right into Photoshop, Illustrator and InDesign.
02. Mudcube Color Sphere
If you're unsure about your color scheme, Mudcude has its own gallery of ready-made assets
Mudcube Color Sphere is a very handy miniature resource for designers that not only offers hex codes for selected colors, but also allows you to create color schemes for your own projects. It's also worth noting that Mudcube has its own gallery of ready-made resources that can also be used.
03. Check my Colors
Check my Colors is designed specifically to evaluate and select the background and foreground color combination for all DOM elements. And also in order to find out whether the elements are sufficiently harmonious with each other. All tests are based on algorithms recommended by World Wide Web Consortium ( W3C).
04. The Color App
The application will help you find out the RGB, HEX, and HSLA values of the selected colors
iOS tool The Color App will allow you to easily and simply determine colors using a large color palette. It allows you to find out the RGB, HEX and HSLA values of colors, as well as create your own color schemes for the site.
05. Color Hunter
Color Hunter generates a color scheme based on the selected image
This is a very convenient tool, especially if you need to find a specific color. Select an image and upload it to Color Hunter. The tool will create color palette based on the selected image. This is a great method for creating your own color schemes.
06.TinEye
If you need to get a specific color, just enter the HEX value in the URL
This site uses a database of 10 million images available free of charge. license agreement Creative Commons, which the creators carefully selected from Flickr. These can be used to generate appropriate color schemes.
07. Color
Convenient miniature web application. Hover your mouse over the screen and select the color you want, then scroll a little to select the shade. After which the tool will produce all the necessary HEX codes, which you can use in your own projects. One of the easiest tools to use.
08. SpyColor.com
Free color scheme generator that provides color information and also allows you to convert it to any scheme ( RGB, CMYK and others ). Available here various formats color schemes, including process, monochrome and others.
09.Design inspiration
On Designspiration, you can choose up to five shades with a convenient full-page palette that makes it easy to find exactly the HTML color schemes you're looking for. The site will then generate a page with all the images in the database that use a similar color combination. HEX values will also be provided which you can use in your own projects. And images can be saved in collections on the site.
10.ColorExplorer
One of the most sophisticated web tools that offers many features related to design, customization and color scheme analytics. Here are some tools to help you determine WCAG validity of color schemes, and also generate your own color palettes.
11. Hex Color Scheme Generator
A handy little tool for generating a color combination based on one selected hue. Insert the Hex value of the color, and the tool will provide a set of matching colors that you can use along with the main one.
12. COLOURlovers
COLOURlovers is a community for sharing color schemes. Here you can get inspiration from other users' color sets, as well as create and share your own.
13. Color Scheme Designer
This online tool offers interesting ways generating color schemes, allowing you to adjust their brightness and adjust contrast. Here you can create several popular mathematical models color schemes, including monochrome.
14. COPASO
One of the tools from the COLOURlovers website. But COPASO is worthy of special attention, as it is an incredible all-in-one solution, and allows you to easily generate ready-made color schemes for the site. There are a variety of color matching tools available here, all in a convenient and easy to use simple interface. In addition, you can add notes to the palettes, upload images, etc.
15. Colourmod
Colourmod represents software, which allows you to select individual colors from the widget area, whether you're using a Mac or Konfabulator on Windows. This is not a very simple tool for working with color palettes, but it will help you quickly and easily determine colors without having to download heavy programs.
16. ColorZilla
ColorZilla is available for both Chrome and Firefox
This project started as a plugin for Firefox, but today it is also available for Google Chrome. ColorZilla is an extension that includes several tools designed to work with color, including a palette, a CSS gradient generator, and an eyedropper.
17. Colormunki
A convenient online tool for selecting color schemes from the creators of Colormunki. It allows you to easily create eye-catching color palettes from Pantone-based swatches using multiple techniques.
18.colr.org
Colr.org allows you to set the color range of any image
This tool allows for detailed analysis of image colors that is usually automated in other tools. This will allow you to choose the most suitable color. We recommend checking out this tool, although its interface is not as sophisticated as other apps.
19. ColourGrab
This handy tool creates color palettes from any image. Insert the URL of the image you want to analyze, and the service will automatically generate a 3D graph with information on the colors used. Although this application is not entirely suitable for choosing a color scheme for a website, it can be used to study images and their color characteristics.
20.ColorBlender
ColorBlender generates a palette of five matching colors
One of the simplest tools that allows you to adjust color and get five colors that combine with each other in real time. The generated palette can be downloaded in Photoshop or Illustrator as an EPS file.
21. GrayBit
GrayBit allows you to analyze websites to understand what they would look like in grayscale
This tool will help you see how your site looks in gray tones. Great service, which will allow you to identify areas that are problematic in contrast.
22. COLRD
A tool that can be used as a source of inspiration or to share color schemes. Of course, this resource will not help with generating schemes, but you should definitely take note of it.
23. Shutterstock Spectrum
Effective website design is unthinkable without choosing a 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 brief introduction in 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 see the list of companies, non-profit organizations and startups in alphabetical order or through the search find the brand you are interested in.
Looking for a ready-made palette?
2.
This is a color palette design forum with nearly 2,000,000 user-submitted options. You can download a palette containing 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 change. 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 great way 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 side by side across 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 owners iPad Pro). 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 the colors in the 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 by 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.
In this tutorial, we'll learn how to take color samples from an image and create sets of them that you can later use, especially when you're working with various clients, each of which prefers certain colors for a different project or when you simply want to create your own collection of color shades.
One of my favorite things to do is photograph landscapes and then save the individual colors in the photos as sets of colors. After all, it's almost impossible to beat Mother Nature when it comes to harmonious color combinations. In this tutorial we will do everything exactly as I just described - take color swatches from a photo, place them in the color picker and then save them as a separate set of color swatches. We'll also look at how to restore the program's original default colors when we're done, and how to load the created set when we need it!
Below is a photo from which I will be taking individual color shades. I want to create a set of color swatches called "Autumn Leaves", so this photo would be perfect:
Image of colorful autumn foliage
At the end of the tutorial, we'll look at an example of how you can use the colors from the set we created to create a completely different look. Let's start.
Step 1: Remove existing color tones from the Swatches panel
To create your own set of color tints, let's first remove all the color tint swatches presented in the Swatches panel. Don't worry, they won't be deleted permanently, as we'll cover later. Switch to the Swatches panel, which by default is grouped together with the Color and Styles panels. Unless you have previously loaded other color sets, the Swatches panel will display the colors that were originally set in the program by default:
The Swatches panel displays a selection of default color swatches
Unfortunately, the program Photoshop There is no Remove All Color Swatches command, so in order to remove all color swatches displayed in the Swatches panel, we will need to delete each color swatch manually. To do this, press Alt key(Win) / Option (Mac) hover over the color swatch on the left top corner (« RGB red"). You will see how the cursor will take the form of scissors:
Alt key pressed(Win)/Option(Mac) Hover your mouse over the red swatch in the top left corner. Cursormiceatthiswill acceptformscissors
Then, still holding down the Alt/Option key, click on the color swatch to delete it. Continue clicking on other color swatches to remove them. You will need to click on the total 122 times to remove all the samples, but depending on how fast you click, it shouldn't take you long. When you're done deleting shade swatches, your Swatches panel will be completely empty:
After deleting all the default color swatches, the Swatches panel is empty
Step 2: Select the Eyedropper Tool
Open in the program Photoshop image, where you want to take color swatches (if it's not already open), then from the toolbar, select the Eyedropper tool or press I to quick selection tool:
Choosetool « Pipette»
Step 3: Get the first color swatch from the image
After selecting the Eyedropper tool, move your mouse cursor over the area where you want to sample the color, then click to sample the color. I want to sample the bright yellow color from one of the leaves at the top of my image as the first color of my future set:
Take a sample of bright yellow color from one of the leaves
You can tell exactly what color you got from an image by looking at the primary color swatch icon in the toolbar:
The resulting color is displayed in the toolbar as the primary color
Note: You may find it easier to collect colors by holding down the mouse button as you move your cursor inside the image (with the Eyedropper Tool selected). The color the cursor lands on will appear in the toolbar as the primary color and will continuously change as you move the mouse, giving you the ability to preview colors before receiving a sample. This method It seems to me more convenient than the method of clicking the mouse button and only then seeing what sample we got. Release the mouse button when you find a color that suits your color swatch set.
Step 4: Add Color to the Swatches Panel
Once you have your first color swatched, move your mouse cursor to an empty area inside the Swatches panel. You will see the cursor change to the shape of a paint bucket. Click anywhere in the empty area to convert the resulting color into a color swatch. This action will open a dialog box asking you to enter a name for your color swatch. If you are creating a set of color swatches for a client who uses and therefore requires specific Pantone colors, it is a good idea to name your color swatch a color that matches the Pantone color chart (for example, Pantone Yellow 012 C). If you are creating a set of color swatches for own use, then give the sample a name of your choice. I'll name my color swatch "Yellow":
Give your new color swatch a meaningful name, or you can choose not to name it at all.
In fact, it is not necessary to name the color swatches, so if the names of the swatches do not matter to you, then leave the names that the program offers by default. Click OK to close the dialog box once you've given the color swatch a name. If I look at the Swatches panel now, I can see that my first color swatch has been added there:
My created Yellow color swatch appears in the Swatches panel.
Step 5: Continue to collect colors and create color samples from them
Continue collecting colors from your image and then clicking in an empty area of the Swatches panel to save them as color swatches, giving them names if necessary. I collected 10 more colors from the image and ended up with 11 new swatches in the Swatches panel. You can create as many color swatches as you like:
Step 6: Save the Color Swatches as a Separate Set
When you're done adding colors to the Swatches panel and are ready to save them as a separate set of swatches, click on the small right-hand arrow in the upper right corner of the Swatches panel to bring up the panel menu:
Click on the small right-hand arrow to bring up the Swatches panel menu
Then from the menu that appears, select “Save Swatches”:
Enter a name for the new set of samples
Next, click the “Save” button » (Save) to save a set of samples. The program will save the color swatch set in the same location as the other swatch sets loaded into the program by default, so you won't have to search all over your computer next time the desired folder, whenever you want to access any of the created sample sets, which we'll look at next.
Step 7: Restore Default Color Swatches
We took several colors from an image, created color swatches from them, and saved these swatches as a separate new set samples. But what if we want to reuse the default color swatches that we removed at the beginning of the tutorial? All we need to do is click on the small right-hand arrow in the upper right corner of the Swatches panel again to bring up the panel menu again and select the Restore Swatches command from the list that appears » ( Reset Swatches):
In order to return the default color swatches to the panel, select the “Restore Swatches” command
In the corresponding dialog box, the program will ask you if you need to replace the current color samples with the default ones. You can either confirm that you want to replace the current color swatches with the default ones by clicking OK, or you can add the default swatches to the current swatches without deleting them by clicking the Append button. I'll click OK and replace my Autumn Leaves swatch set with the default color swatches:
Click OK to restore default color samples
After this action, the default color swatches again appeared in the Swatches panel:
Default color swatches are back in the Swatches panel
Step 8: Upload Your Own Color Swatch Set
The next time you want to use the color swatch set you created, all you have to do is click the right-hand arrow again to bring up the Swatches panel menu. If you look at the bottom of the menu you will see a list additional sets color samples that are in this moment can be downloaded. Most of these kits come with Photoshop out of the box, but since our swatch kit is saved in the same place as the other kits, you'll be able to see it in the kit list as well. You just need to click on the name of your set to select it. The program places sets of color swatches in alphabetical order, so my Autumn Leaves set is second from the top:
You'll find all color swatch sets, including yours, in the Swatches panel menu. ClickonNamerecruitmentForhischoice
Once again, the program will ask you if you want to replace existing sets with new ones or add new color swatches to the swatches already located in the panel. I'll click OK to replace the default swatches with the created swatches from the Autumn Leaves set:
Click the Replace button to replace the default swatches in the panel with new color swatches
This action will load my new color swatches from the Autumn Leaves set into the Swatches panel, ready for further use:
My own set of color swatches loaded into the Swatches panel
Step 9: Select a New Primary Color from the Swatches Panel
The big advantage of using color swatches is that they are available in advance given colors. This means that these are the colors we've already chosen (or the colors the program has chosen for us, if you're working with the default swatches), and we don't have to select those colors from the color picker every time we need them. To select any of the colors in the Swatches panel, simply hover your mouse over the desired color swatch. You will see the cursor change to the shape of an eyedropper. After that, click on the color to select it. In my case, I will choose Orange color, second from left:
To select the color you want, click on its swatch in the Swatches panel.
After clicking on the desired color, you can see that this color was indeed selected by us and was displayed on the primary color sample icon on the toolbar:
The color you clicked in the Swatches panel appears in the primary color swatch icon in the toolbar
Step 10: Select a New Background Color from the Swatches Panel
To select a specific color as background color, press and hold the key Ctrl(Win) / Command(Mac) and at the same time click on the desired color in the Swatches panel. In my case, when the key is pressed Ctrl/Command I'll click on the dark red color:
With the Ctrl key pressed(Win)/Command(Mac) Click the color you want in the Swatches panel to make it your background color
Now, if I look at the toolbar again, I can see that the background color swatch icon now has the dark red color I just selected:
The color you selected in the Swatches panel appears in the background color swatch icon in the toolbar
Now I can use the colors from my Autumn Leaves set however I want, whenever I want! Below are the lines of the poem that I styled using colors from my created color swatch set and the default Scattered Maple Leaves brush in Photoshop:
A poem designed using colors from my created Autumn Leaves color swatch set.
And now we're done! We've learned how to easily create your own color swatches and entire sets of swatches in Photoshop!
Translation: Ksenia Rudenko
Ekaterina Malyarova
Working with color is often a difficult and time-consuming process. Back in the Middle Ages, great painters tried to find ideal color combinations. Nowadays, not only artists, but also designers, stylists, makeup artists, photographers, etc. do the same.
People tend to associate each color with something, endowing it with unchanging properties. For example, we say "blue sea", although in fact its shades can vary from light blue to gray-blue.
The interpretation of color depends not only on how we perceive it with our eyes, but also on our mood. In this regard, it is very important that colors that combine with each other look harmonious at first glance.
There are many resources on the Internet to help you determine which colors form color harmony. They greatly simplify the process of choosing the right color scheme. We present to you ten essential resources for working with color.
1.Adobe Cooler
Adobe Kuler is one of the most famous resources for working with color. Contains a huge library of ready-made color themes. You can choose any of them, or by uploading the image you like, create your own color theme. All topics can be sorted by ratings, popularity and newness. Each theme consists of five colors that are combined with each other according to one of the rules of color harmony.
The main work takes place in the color wheel. Separators between colors clearly demonstrate the combination of colors according to the rules of harmony. By moving the dividers around the circle in different directions, you can achieve different colors, hue, saturation, and brightness.
An undoubted advantage of Adobe Kuler is the presence of its plugin in graphic editor Adobe Photoshop. That is, you can work with Adobe Kuler online, or using the Adobe Photoshop program on your computer.
2.ColorScheme
ColorScheme.ru is another interesting resource for selecting colors and composing color themes. The main work is also carried out in the color wheel. By choosing one color, you can get six options for harmonious combinations with this color: mono, contrast, triad, tetrad, analogy and analogy with accent. The resulting color theme can be adjusted for brightness, saturation, contrast, highlight, shadow, and other parameters.
In addition to the color wheel, on this resource you will find a lot of materials on color theory, a color converter from one color model to another, and even a unique reference book that contains the names of about a thousand shades, as well as parameters for their use in web design.
3.BigHugeLabs
BigHugeLabs is another resource that has a Color Palette Generator service that allows you to select a color palette from an image. You can upload an image from your computer or directly from social networks (Facebook, Instagram).
After downloading, click “Create palette” and get a color palette. In this case, each color in the palette will be assigned a name and a special code. You can download the resulting palette in ASE format and use it later for working in Adobe Photoshop.
4. Pictaculous
Pictaculous.com is a resource that allows you to upload an image and get its color scheme. Despite the ease of use, working in Pictaculous is very convenient, as it is compatible with other color services: Kuler and COLOURLovers. Therefore, in addition to the main image diagram, you will receive diagrams compiled by these services.
5. COLOURlovers
COLOURlovers is another useful resource for working with color, used by both professional designers and amateur beginners. The COLOURlovers library contains about 2 million color palettes created by users from all over the world.
You can also create your own color palette by uploading any image. In addition to creating a palette, you can use templates and individual colors. You can add shapes and lines to templates different types and size, and at the end color the template to your liking.
COLOURlovers saturated useful information. Here you can find the latest reviews, news, various communities and groups that discuss working with color.
6.Color Combos
ColorCombos is a resource created specifically for designers and web developers. It can confidently be called a color nirvana for those who want to choose and test different color combinations.
You can use ready-made color themes that are located in the color library. Under each color theme there is an html code that is required when coding a web page. If necessary, you can create your own color theme by going to the Combo Tester tab.
In addition to creating color themes, this resource has a wealth of information useful for beginning designers, from the meaning of different shades to the color wheel.
7.ColorExplorer
ColorExplorer is a multifunctional resource with great capabilities for working with color. It was designed specifically for professional designers. Set of tools of this resource allows you not only to select colors and create color palettes, but also to study popular color libraries, combine libraries, export palettes to programs such as Adobe Photoshop, Illustrator, InDesign, etc.
In order to get the color theme of the image you like, you should upload it through the tab Image Color Import. You will see all the colors and shades (from 3 to 50) available in this image.
It is very interesting to work in the Color Matching tab - this is a color blender that allows you to change color components using RGB and HSL values. Having selected the necessary color palette, you can add it to the existing one, or make a replacement, and, as an option, save it in your My Palettes.
8. ColoRotate
ColoRotate is a unique resource for working with color. It differs from others in that it has a three-dimensional color model in the form of a cone and the ability to generate more than five colors in one scheme.
Colors seem to come to life because in volumetric form we visualize them differently. Therefore, using ColoRotate, you can immediately see the multi-dimensional nature of colors and the relationships between them. You can edit colors in 3D, mix them together, extract them from an image, change values in different color spaces, and generate harmonious color schemes.
ColoRotate works great on its own or paired with Adobe Photoshop. It is also available as an iPad app.
9. ColRD
ColRD is a bright and colorful resource for working with color. Here you will find a huge library of colors and shades, palettes, gradients, prints, compiled by other users. This is an inexhaustible source of inspiration that creates a real feast for color perception.
You can go to the Create tab and create your own color, palette or gradient by changing the RGB and HSL values. Or by downloading finished image, break it down into colors and shades, and then use them to create the desired color scheme.
10. Yandex
And finally, the easiest way to work with color is to enter its name in Yandex. As a result of the search, at the very top of the page, you will see a plate containing the color you need and the shades adjacent to it. In addition, Yandex shows hexadecimal code colors, its parameters in RGB and HSV.
In the same way, knowing only the color code, you can search for its name in Yandex and see what it looks like. Of course, you can determine the color by code in any graphics editor, but do not forget that this will take much more time.
Human interaction with a computer relies heavily on graphical interface elements, and color plays an important role in this process. As Pierre Bonnard once said: “Color not only makes a design pleasing to the eye, but also reinforces it.”
Designing New Product, designers often find it difficult to create a color scheme, since there is an unlimited number of possible combinations. In this article we will look at eight basic rules that can help you with your choice.
1. Limit the number of colors
When adding colors to a design, it is essential to maintain balance; and the more there are, the more difficult it becomes to achieve this. The result will be better if you adhere to the rule of “maximum three primary colors” when creating a palette. In a study from the University of Toronto on how people use Adobe Color CC, the majority of respondents said they preferred simple combinations based on two or three colors.If you need additional colors beyond those already added to the palette, use different shades.
How to build a palette
But how to choose these two or three colors? The color wheel will help you here.
This circle of 12 colors is one of the main materials for creating a palette.
Exists whole line ready-made standard circuits, which can make the process of creating a palette easier, especially for beginners:
Single color palettes
Single-color schemes leave a very pleasant impression (especially if made in shades of blue or green). As you see on Facebook example, the palette looks very neat and elegant.
Single-color palettes are the easiest to work with: they contain only one color with different variations in hue and saturation. All shades of color combine well with each other and create a calming effect.
Palettes of related colors
Related colors are those that are located next to each other on the circle.
Such scales are built on the basis of related colors: one of them becomes the reference color, and the rest are used to enrich the palette. Everything here is also quite simple, but the trick is to choose the right brightness of the colors used - it will set the tone for the entire gamut. For example, Clear, a gesture-controlled to-do list utility, uses flashy colors to visually draw attention to the tasks the user is currently performing. In contrast, the meditation app Calm favors the related color pair “blue+green” to create a sense of calm and tranquility among users.
Palettes of complementary colors
Using complementary (opposite) colors, you can easily visually highlight an element.
The simplest varieties of this type consist of two colors that contrast sharply with each other. This scheme allows you to attract the attention of the beholder. When using a complementary palette, you need to decide on a primary color, and use a secondary color to highlight key elements. For example, when the human eye sees an object painted in different shades of green, a stroke of red will stand out very strongly against its background.
Custom palettes
Splashes of color on gray background- a great way to attract attention. Design in white and gray colors with blue accents, we can see on the Dropbox website.
Creating your own palette is not as difficult as many people think. There is a very simple method you can use to get a great option: just add bright accents in a neutral color scheme (that is, what is usually called black and white). The resulting palette will look very impressive.
2. Find inspiration in nature
The best color combinations are those we take from the natural world. Why? Because to our eyes they look the most natural. Just looking around is enough to get ideas. If in Everyday life you notice some particularly beautiful or eye-catching shade, try to create color scheme based on it. Just take photos of beautiful landscapes and choose colors for your palette from them.
Nature creates the best color combinations. This photo can make a great color scheme.
3. Try to stick to the ratio 6/3/1
When compiling a palette, you will also find the ever-current rule from interior designers useful: the proportion of 6/3/1 allows you to create perfect balance flowers in any space.Making this concept a reality is very simple: your main color should be 60% percent, your secondary color should be 30%, and 10% should be allocated to accents. The main idea is that the complementary color should serve as a support for the main one, but at the same time be easily distinguishable from its background. Color for visually highlighting individual areas accounts for 10% of the screen - you can use it for a call to action or any other element.
4. Design in black and white first.
Playing with colors is fun. It is not surprising that work on a project often begins with the choice of palette. It's tempting to make finding the perfect color scheme your first step, but I would encourage you to resist yourself and design your interface in grayscale first. Make a black and white prototype of the application and use it as a baseline. Without colors, you'll be forced to focus on spacing and placement of elements.Introduce color last and very deliberately.
A bright spot on a gray background - simple and effective method direct your gaze to the desired object.
5. Avoid black
In reality, black color is practically never found. All “black” objects that we come across in the world around us reflect some amount of light, which means that they are no longer black, but dark gray. Fresh asphalt, for example, is not black at all. And shadows too.If you add black to your set of carefully selected colors, it will “crush” all the others. It is so striking precisely because it is not perceived as natural. Many of the apps we use every day add supposedly black colors to their interfaces that are actually dark gray. For example, the most dark color in the top bar of the Asos application - not #000000, but #242424. So don't forget to adjust the saturation.
6. Build visual hierarchy using contrast
Color is a tool that guides the eye along the desired path. The more you need to draw attention to a subject, the more you should rely on contrast. Usually high contrast saved for the most important information or key elements. If you want your users to notice something or click something, you need it to be eye-catching!
Contrast makes one area of the screen noticeably different from the rest.
7. Use color to influence the user's emotional state
It's no secret that colors express certain ideas and can influence people's moods. These ideas will directly influence how people feel about your product.When creating a palette for an interface, it is not enough to think only about how everything will look - you also need to take care of how it will be perceived. The colors you choose can either support or contradict the brand image you are trying to create. To give you a place to start, I've put together a little reminder for you with the basic associations for each color (in Western culture).
Red, Orange, Yellow
Red(passion, power, danger, significance): Red is a very stimulating color. It leaves a feeling of speed and strength and is associated with energy. It has already been proven that it affects us even on a physiological level, accelerating metabolism and blood circulation. This is why people even read faster and louder when they see the color red. It’s good to use to quickly attract the user’s eye or highlight a specific element that requires their attention.Orange(naughty, cheerful, attractive, cheap): Orange - warm and bright color. It creates an atmosphere of cheerfulness and gives users a feeling of warmth and comfort. Some researchers argue that orange expresses the idea of cheapness.
Yellow(cheerful, welcoming, stimulating, attention-grabbing): Yellow is an extremely versatile color that combines shades with different meanings. Thus, light yellow is associated with the sun, that is, with something positive and friendly. More saturated tones leave an impression of ancient times and monumentality. They are often used when you need to show something as unshakable and wise.
Green, Blue, Purple
Green(natural, safe, fresh): Green expresses the idea of merging with the outside world and being close to nature. It is also associated in our minds with growth, as a result of which it is widely used in business. Green can also be associated with ethical attitudes.Blue(calm, responsible, trustworthy, reliable): Blue color usually associated with feelings of peace and tranquility, as well as strength and reliability, which generally gives a feeling of professionalism and inspires trust. Blue tells us that we are safe. For this reason, it is actively used by banks and IT companies. Many titans in the social networking market (Facebook, Twitter, LinkedIn) also feature blue in their interface.
Violet(luxurious, mysterious, romantic, spiritual): Purple has historically been considered a color associated with people of royal blood and hints that the product is high-end.
Pink, Black, White, Gray
Pink(femininity, innocence, youth): Most widely known association with pink- this is femininity.Black(strong, sophisticated, mysterious, challenging): Black attracts attention faster than any other color, even red. As a rule, it is used only for text and accents.
White(purity, health, innocence, virtue): White highlights the colors that surround it, so it is often chosen as a complementary color.
Grey(neutral, formal, sophisticated, sterile): Gray leaves a neutral feeling and can take on the characteristics of both black and white. Acting as the main color, it creates a formal atmosphere.
It is important to note here that the meanings of colors can vary greatly depending on circumstances and cultural context. For a deeper dive into this topic, read the article Symbolism Of Colors And Color Meanings Around The World.
8. Make design accessible
Accessibility is one of the key considerations for using color in design. These days, food should be accessible to anyone and everyone, regardless of physical ability.Don't use color as the only indicator
Approximately 8% of men and 0.5% of women suffer from some form of color blindness - that is, every twelfth man and every two hundred women. There are different types, but the most common is red and green blindness. A person who is colorblind usually has difficulty distinguishing between any shade of the two colors.
From left to right: color wheel with eyes ordinary person - Color circle through the eyes of a person with a deuteranopic type of color blindness - The color wheel through the eyes of a person with a protanopic type of color blindness.
Because color blindness comes in many forms (some people cannot distinguish between red and green, others cannot distinguish between yellow and blue, and some see everything in shades of gray), it is necessary to use several visual markers at once to indicate the most key conditions in the product. In addition to color, you can also use styles, symbols, patterns, textures and text to describe actions or content.
Avoid conveying information through red and green colors - this will be extremely inconvenient for people who do not distinguish between them.
Make the text as contrasting as possible
Contrast is an area of color theory that is critical to usability. When choosing a color for your text, keep in mind that overlapping two colors with low contrast will make it very difficult to read.
Low contrast can be a death blow to usability.
Monitor contrast to ensure that the text color will stand out enough from the background color so that even a person with colorblindness or very low vision will be able to distinguish the words. Contrast ratio is a mathematical expression of how different one color is from another (usually written as 1:1, 21:1). How more difference between numbers, the more colors differ in brightness. The W3C recommends the following ratios between the brightness of text and images:
- If the text is small, the ratio should be at least 4.5:1;
- For large text (i.e. 14 pt and above for bold font, 18 pt and above - for regular) the optimal ratio is 3:1 or more.
Bonus: Tools needed for a UX designer
To make it easier for you, I also provide a list of the most useful tools to select colors.Adobe Color CC
Adobe Color CC (formerly known as Kuler) is a great solution for finding, editing and creating palettes. You can modify each color included in the range, or set it as a reference color in just a couple of clicks. Ready-made palettes can be saved and added to the library; In addition, it is publicly available on the website a large number of color schemes created by other community members.
Dribbble Search-by-color
If you want to see how other designers use a particular color in their designs, go to dribbble.com/colors and select the shade you want.
Material Design
Guideline from Material Design offers a great range of colors that you can use for illustrations or choosing brand colors. All the colors it covers are chosen so that they will harmonize with each other in any combination.
Colorzilla
Colorzilla - extension for Google browsers Chrome and Mozilla Firefox, which includes a whole bunch of tools for working with color, including an eyedropper with the ability to capture color, a generator CSS gradients and a palette viewing function.
coolors.co
Coolors.co is a powerful tool for building a palette of multiple colors. You can simply lock the color you want and press the spacebar to get a new range. What's especially cool is that here you are not limited to just one option - you can create different palettes by changing the parameters at the start.
I especially like making palettes using photographs. This tool allows you to upload a photo and build a palette of colors that are present in it.
Colorblindness Simulator in Adobe Photoshop
Photoshop lets you test how universally accessible your design is. Just go to the View > Proof Setup tab and select the type you are interested in (Protanopia type or Deuteranopia type).
NoCoffee Vision Simulator for Chrome
To make sure your design is accessible to everyone, it's a good idea to experience colorblindness yourself during the design process. NoCoffee Vision Simulator provides the ability to create a simulation for any interface that shows what it looks like to people with color blindness or low vision. For example, if you apply the “Deuteranopia” filter in the “Color Deficiency” tab, you will see the website in grayscale. This will help you adapt the interface to the needs of people with eye problems.
Color is one of the most powerful tools in the designer’s arsenal, but mastering it is not easy. I hope the rules I have listed will be useful for beginners to lay a foundation. The next step is practice: after all, the only way to get better at creating palettes is to do it as much as possible.
