Colors are one of the most important aspects of a Website’s visual appeal.
Let’s try to summarize the essence of colors in Webdesign, in this short post, and identify some useful tools.
The most important rule of all is, don’t start a webdesign process without having a color palette ready. . It is impossible to go through the whole process now on how to choose the right colors, but who says we cannot cheat a little.
Go to this site, open an account and start playing: https://coolors.co/
When you get your five colors, try to see them on a color wheel (Select custom mode here: https://color.adobe.com/). An ideal situation is if you have at least one third of the color wheel clean (without any color selected). The reason is simple: you’ll find your CTA color there, because it needs to stand out, looking different than anything else.
Tip: if you are just choosing your brand colors, pay attention to CMYK palette. If your colors are from RGB color space, you can get in trouble once you start printing your materials. Convert your palette to CMYK and see how it holds up. CMYK is smaller than RGB color space, and many bright colors cannot be reproduced. It is better to adjust early, or leave the RGB version for the web and make a print strategy with a modified palette.
If you are building a color palette manually, try doing it in HSL mode. Keep an eye on Saturation and Lightness. If thees values are way out of sync across colors, it could be that the palette doesn’t look very pleasing. But it is not a rule.
A crazy way of building a palette is to choose totally unrelated colors in Photoshop, and then throw a Solid color Adjustment layer in a blending mode like Overlay, Soft light, or some other that may work to even them out. Creativity has no limits.
Here is one more tool that I like a lot: http://colorizer.org/. Having it in a pinned tab in the browser while working on something color sensitive is a great time-saver.
If you need a fast Hex to RGB or any other conversion, probably the fastest way is simply pasting the Hex value into Google itself. Did you know that they have a nifty converter?
Tip: have you seen a great-looking text on a colored background on some cool website? There is a chance that the text and the background share same Hue and Saturation, and only the lightness is changed to the point when it has good contrast ratio.
If you don’t want to learn about the physics of good contrast, why not cheat again. Just go here and check two colors against each other. http://contrastchecker.com/. Cool huh? To learn more, Google “Contrast ratio”.
Another tool that can be useful sometimes: http://www.0to255.com/617B83. Just nicely ordered shades of any color you want.
Btw, do you ask your self sometimes questions like “I wonder what is the perfect color of gold?”. Then this tool is for you: https://alexbeals.com/projects/colorize/search.php?q=gold.
To get things to the next level, this is the right tool: https://color.adobe.com/.
It is not that easy to use it, though. Try not to simply hit one color and pick all the Compound ones for the palette. Actually, that can be done too, but the most important thing is knowing the right ratios.
For example, if you decide to build a complementary mood on the site, (Lord of The Rings, anyone? ), don’t try to use two complementary colors in the even-ish ratio, like 60:40 or so. For example, the famous Blue-Yellow movie thing is working only if the blue shades are dominant, with yellow accents.
Try to learn as much color theory as you can, (if you haven’t already), and that will change the look of your site(s) dramatically. And Google this too: “psychology of colors”. It is also an important part of the overall color puzzle.
Final tip: Now install http://www.unclrd.com/ to your browser, and take a look at your website. It still needs to look great in B/W, with colors completely removed. Better yet, use this tool here and there throughout the whole process of building the site.
Happy coloring!