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. Most handy tool for choosing colors (in my opinion). He has a lot 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 they will see your color scheme people with color blindness and other visual impairments. 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 features, but there is an opportunity to see how the color blocks will look.
I hardly 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- 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
Choosing a color scheme for a website is one of important points in the design process. Selecting a color combination is quite 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 a choice of large quantity 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 in current moment has almost 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 - simple online tool to generate a color scheme. 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 appearance diagrams on a simple template.
A small, stylish and neat color selection program for designing HTML pages and other tasks that require selecting matching colors.
Let's see what this program can do.
Color point setting
Since the program does not require installation, we simply save the archive to hard drive, unpack into convenient place, open the folder and run the file with the exe extension. By default, the program launches as a small button:
Working with the program
Click on this icon and the program window opens in front of us:
Screen
In this tab, the program allows you to “take” any color directly from the screen. That is, from any part of the screen that was visible at the time the program was launched. The entire screen is displayed in a reduced size in the Select Site window.
If you click on any part in this window, it will appear in the next smaller window “Select color”. Here you can aim more accurately and take the color from a specific point.
Also on the right side of this window there are auxiliary buttons for copying to the clipboard, and at the bottom there are buttons “Refresh” (updates the screen contents) and “Apply” (saves the selected color and switches the window to the “Selection” tab).
Selection
Here are the main tools for convenient color selection: “Tile”, “Circle”, “Web” and “Win”, which are switched using additional tabs.
Working with these tools is not difficult. Just point your mouse at the color you like, adjust it with the RGB sliders (or HSV - if that format is closer to you), and see whether it suits you or not.
If you like the selected color, you can copy its code from the “Text representation” line. Moreover, the code can also be selected in any of the standard formats by clicking the small arrow to expand the list.
Also, pay attention to the third color window in the right top corner. In addition to the selected color ( vertical stripe) three more colors are shown that go well with the chosen one.
Thus, the program immediately suggests several matching colors that can be used in other elements of the designed design.
The program has quite a few different auxiliary buttons. To find out their purpose, just hover your mouse over them and read the tips that appear at the very bottom of the program window.
Settings
Here you can adjust some parameters such as font type and size and some cosmetic properties of the program. It will be more convenient to work with the program if you uncheck the boxes “Open in the “Screen” tab” and “Run in mini-window mode”.
About the program
In this last tab you can find the developer's contacts and see if the new version program by going to its website.
Advantages and disadvantages of the program
- many available different instruments for color selection (circle, tile, etc.);
- allows you to conveniently compare colors by moving the program window close to other screen elements;
- There are tips for all buttons.
- a bit tricky interface;
- launching in minimized form and on the “Screen” tab is not very convenient (although you can disable this in the settings);
- Not everyone will like the color of the program window.
Conclusions
The program is quite powerful for a free one, it provides almost everything you need to conveniently select colors when creating a website design. There are some minor drawbacks like the color of the program window (lilac is an acquired taste), but they do not interfere with working with it.
P.S. Permission is granted to freely copy and quote this article, provided that an open active link to the source is indicated and the authorship of Ruslan Bogdanov is preserved.
P.P.S. If the program seems complicated to you, there are simpler options:
Color is one of the most important elements in a designer's work. But as a concept, it can be quite difficult to master: due to the many combinations of palettes, it is often difficult to decide how best to design the interface of web pages and applications. We have previously published reviews of tools of choice and . And today we want to expand the topic by posting a translation of the article Essential Color Tools for UX Designers by Nick Babich on the blog.
The note contains a list of the best color selection services for websites and UX design that will help you save a lot of time. Through these projects you will learn:
- where to get inspiration from;
- how to create your own palette;
- how to make a design accessible to people with color vision impairment.
1. Looking for inspiration
Colors of nature
Draw from the world around you. All you need to do is just look around. Fashionable clothes, book covers, interior design... there are so many amazing things around you. But the best color combinations– these are the colors of nature. Capture a beautiful moment and try to create own selection based on a specific image.
The best color combinations are found in nature. You can get a color scheme from any photo
Behance
In a popular service you will find interesting works, included in the best online portfolios of real professionals in their field. This site is also a great source of inspiration. To view new worthy project examples, simply select desired color.
Dribbble Colors
Dribbble is one of the best that will come in handy when creating a user interface. If you want to visually understand how others have used a particular color, go to dribbble.com/colors and enter the value you want.
When choosing a color for a site, here you can set its minimum percentage - experiment, for example, try setting 30% blue.
Try setting a minimum percentage of a specific color in Dribbble
Designspiration
Design inspiration useful tool primarily for those who already have ideas for color combinations and who want to see examples of such combinations. Select from 1 to 5 options and you will find pictures that match the specified parameters.
In Designspiration you will find different examples color combinations
Tineye Multicolr
Using the Tineye Multicolr color matching service, you can determine the desired gamma of the image and even set the percentage of each of them (ratio). The site is integrated with a database of 20 million Creative Commons photos from Flickr. This is definitely one of the fastest ways to find the perfect palette.
Colorzilla
ColorZilla is an extension for installation in Chrome and Mozilla Firefox browsers. It includes tools such as eyedropper, palette browsing, creation, and more.
ColorZilla extension available in Chrome and Firefox
Shutterstock Spectrum
One of the best ways to imagine what a color scheme will look like is to look at the corresponding images. Most solutions that offer color choices for website designs include this feature, but Shutterstock Spectrum has an incredibly user-friendly interface and preview that can really be useful.
And you don't need a subscription, because preliminary assessment the picture will be quite enough (even though there is a “watermark” on it).
W3Schools
Recently the blog reviewed a selection from W3Schools. There is a lot of information collected there on the topic, starting from their names/shade codes, the theory of combining palettes and ending with a description different formats: HEX, RGB, CMYK, HWB, etc. You will also find simple generators, converters and similar “mini-services”. Overall, interesting to watch.
2. Create a color palette
Material Design Color Tool
The Material Design Color Tool allows you to create, share color schemes, and view a rough user interface for your selections. One of its useful functions is to measure the accessibility level of any color combination.
Coolors
Coolors is a site for creating a multi-color palette. Just pin a specific color and press the space bar. The tool is also good because you will get more than one result, but you can generate several options by changing only the initial data.
Color scheme in Coolors based on photo
Adobe Color CC
The color matching service Adobe Color CC (formerly Kuler) is now quite popular. He is in free access on the Internet, but there is also a desector version. With this web application you will make your own palette using color wheel:
Or you can get a certain result from the finished image:
Selecting colors for a website based on a picture
There are hundreds of ready-made combinations here, look for them in the “Watch” section:
If you use the desktop version, you can export the color system you created to InDesign, Photoshop and Illustrator in one click.
Paletton
It is often compared to the previous Adobe Color CC as the designs are very similar. The only difference is that in Paletton you are not limited to five parameters, but can experiment with additional interface tones.
Additionally, you can look at. Together with others, the application allows you to work anywhere, simply using your smartphone. In addition to the direct tasks of creating/exporting color palettes, here you can select certain colors from pictures or use basic options.
3. Making the palette accessible
Nowadays, color vision disorders are much more common than we realize. About 285 million people in the world experience vision problems. You should always check whether the one you choose is available to such users.
WebAIM Color Contrast Checker
Some tones go well with each other, while others - quite the opposite. A huge number of projects fail the A/A test, and that's a fact. It is very important to check the visual design of the interface and the contrast of tones, especially if there is a lot of text on the page. For these purposes, use when selecting website colors.
WebAIM Color Contrast Checker is a web-based tool that checks color codes in hexadecimal values.
Coolors
ABOUT this service we have already mentioned above. Among other things, Coolors will also help you check your invented palette for color blindness.
Type of color blindness in the diagram
Instead of Normal mode, select the type of vision problem you want to simulate. As a result, you will understand exactly how a person who is unable to distinguish between certain colors will see your design.
This is how a person with protanomaly sees a palette
NoCoffee Vision Simulator for Chrome
Using the NoCoffee Vision Simulator website, you can see how people with color blindness or low vision will perceive certain web pages. For example, if you specify the “Achromatopsia” parameter in the “Color Deficiency” section, you will see the web page in gray.
This is what a CNN project looks like for a person with deuteranopia.
Conclusion
All the website color matching and UX design services mentioned in the article will definitely help you in your search for an interesting and effective palette. But remember: best way learn how to create amazing palettes - practice and experiment a lot.
Color selection - one of the most important stages in the process of creating good design.
To make things easier for you, we decided to put together a selection of the best services for creating 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're using the desktop version, you'll be able to export your color scheme directly 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 you can also use.
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 the 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 a 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 under a Creative Commons license, which the creators have carefully curated 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 that can be used in 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). There are a variety of color scheme formats available here, including process, monochrome, and more.
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. After this, the site will generate a page with all the images from 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 suitable colors, which can be used together 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 of 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 many color selection tools available here, all housed in a user-friendly and simple interface. In addition, you can add notes to the palettes, upload images, etc.
15. Colourmod
Colourmod represents software, which allows you to choose individual colors from the widget area, whether you are using 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 you to detailed analysis image colors, which 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. An excellent service that will help identify problematic areas 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
Images can be filtered by color balance and brightness
Sometimes it will be checked color scheme The easiest way to match is by looking at stock pictures. Almost all major stock sites offer similar tools, but Shutterstock Spectrum has a very user-friendly interface. After using the slider to define colors, you can specify keywords that will help determine the theme of the photos. In addition, you can filter images by color balance and brightness.
