Here you will find a simple list of some great online resources about colors, and their use in Web Design.
Color has a huge impact on how we experience the world around us. Color have the power to influence feelings and how we interact with things, such as a button on a website or the traffic lights. And with our expectations and past experiences, color can even affect how we taste food.
So colors are important in many aspects of our daily life, also when we do web design. However, Matching colors and finding the right color scheme is not always an easy task. Luckily there are many great tools that can help, and this is what the ColorMatch list is about.
Coolors.co is a simple and very fast color scheme generator. This is probably my favorite tool when it comes to exploring different color combinations from scratch.
When you enter the website it generates a palette of 5 colors that play well together. You can easily create a new color scheme by hitting the spacebar, and if you like one or more of the colors then click on the color and it will lock so it doesn't change the next time you hit spacebar.
If you already have a color that you are trying to find a match for, then you can enter the hex value, and adjust for RGB, HSB, CMYK, Pantone and Copic components. You can even pick a specific color from an image or fill the entire palette from that image. It's also possible to pick different shades of a color and adjust hue, saturation, brightness and more.
After a palette of matching colors has been selected, it can be exported as SVG, PNG, PDF or SCSS, or you can simply copy the URL or bookmark it for further reference. I really like the direct link feature, since you don't need to create a profile to use the site. However you can create a profile on the site and then save all your color schemes there.
If you don't want to create your own palette of colors, there are also thousands of readymade palettes to explore.
HueSnap lets you create palettes through snapping colors from images. You can also explore a large set of existing palettes that can then be adjusted.
It's quite easy to extract selected colors from a photo, and build a palette with those colors. But in order to download your palette, you will have to create an account, which is a drawback if you just want to try it out or use the website once.
There are also apps for iOS and Android, so you can access and sync your color palettes easily.
Material Color is part of the website for Google's Material design system. Like most other tools you can create a color palette, but where this tool shines is when it comes to measuring the accessibility level of color combinations.
Readability and accessibility are sometimes overlooked in Web Design, where focus is often about the overall visual appearance, how colors match the company identity or even about conversion optimization. But You should off course also be able to read text effectively, and here this tool can helpful.
Adobe Color lets you create color schemes with the color wheel using different color harmony rules. Adobe Color is also quite good at extracting a color theme or gradient from photos.
If you are a user of Adobe's Creative Cloud then you can also save the color themes for use directly in your projects.
You can also explore existing color schemes to get inspired or download. There is also a section where you can discover current color trends shared by creative professionals, organized by different industries.
Colourco is a little similar to Coolors.co, but instead of getting a random palette of colors, you move the mouse around. Move the mouse up for darker colors and down for lighter ones, left and right adjusts RGB. It's possible to keep adding colors by pressing the + symbol.
There is also prebuild monochrome, analogic, triad and quad color schemes, where you can adjust light and color the same way as described above.
When you have a palette that matches your needs, then its easy to save the palette as SCSS stylesheet, PNG palette or as an URL.
Palettte takes a different approach than most color matching tools. In web design you often work with only a few base colors typically set by brand guidelines. And here this tool is excellent, where you add a base color and then finetune the gradients until you have a smooth color scheme.
You can export and import your palette in JSON format.
Canva Is actually an online tool for creating graphics. Canva is probably more geared towards the non-professional. But the site also has a section where you can learn about color - it's a great resource for the beginner who wants to learn the basics, where an interactive color wheel combined with theory is useful. You can also browse a list of colors and learn about their meaning.
Color matters. This website is all about colors and its a great place to learn about anything color-related. You will find a basic color theory as well as more advanced insights in color psychology and colors in marketing and branding.
Color matters are probably one of the best sites where you can learn about colors for free. The author is a color consultant and has worked for a list of Fortune 500 companies and done university teaching.
If you really want to learn about colors there are a lot of great paid courses on Udemy, Thinkific, Lynda and other online learning sites. If you are new to the world of colors one of those courses might be worth it.
Awwwards is a great site to get inspired by other great web designers and agencies. There are many sites around the web where designers can submit and showcase their best designs, but this is my favorite.
The site is useful to see what's trending now, and also what other designers think about the submitted work.
Webkilde Webbureau is a small Danish Web Agency specialized in fast and optimized websites. The company offers White Label design for other Web Agencies and Web Designers.
Have a design in Adobe XD or similar, and want it converted to a static homepage or a WordPress theme? Then you can get it done here. However, you can probably also get a decent job done on freelancer.com or fiveer.com for less.
Smashing Magazine If you are a Web Designer, then you have probably come across Smashing Magazine. They have great articles, books, event listing, and a job resource.
There are also apps for iOS and Android, so you can access and sync your color palettes easily.
A List Apart has been around like forever. There are some good reads about design, development and web content.
I like this site because it seems to be focused more on quality content instead of quantity, and also I have followed the site for two decades :-)
