Just because you can read doesn't mean you can write. Hearing music doesn't make you a musician. Although colors feel different for many people, it's the same: seeing color doesn't mean you’re able to apply colors to your design in any significant way.
To learn how to harness the power of color, you will have to study them: discover what they do, what they evoke in people, and how you can use them.
Understanding color in web design
The road to color mastery starts at the basics: understanding how colors are created and displayed. In web design, there are three well-known models: RGB, CMYK and HSB. Each of these models uses a different method of combination to create a wide variety of colors.
RGB blends red, green, and blue in varying degrees.
CMYK works with cyan, magenta, yellow and key — the last one signifying how light or dark a color is.
HSB is short for hue, saturation and brightness.
To know these models and their uses is to know the practical side of color. More importantly, maybe, is the emotional side of color.
The emotional side of color
There is a whole psychology to color — something people study for their entire lives. However, we don’t have a lifetime to spare, right? So, let’s whittle it down to the bare essentials.
Colors can be used by you, the designer, to change a user's mood. For example, red is often used to attract attention, excite or warn people. Blue, on the other hand, is used to calm people. Which is why many large corporations use blue in their branding: they want to come across as trustworthy.
The art of good color usage is to combine colors in a spectacular way. Great color combinations catch the user's eye. To find a new, interesting color palette, you can choose to do all the work yourself — or use one of the many tools available to us. These tools help you to hit the ground running and focus on the bigger picture, instead of nitpicking the best orange for web.
Some tools for great colors:
Coolors — A great way to create amazing color palettes, or find popular ones.
uiGradients — Gradients are a great way to liven up your design, uiGradients gives you the best color combinations for the web.
Colour Contrast Checker — A big part of web design is accessibility, so use this nifty Contrast Checker to make sure every part of your design is easy on the eyes.
With these tools in our belt, we can hit the ground running.
A great way to start is to ask what you want your colors to achieve in your design. Are you creating a sales website which you just want to convert, convert, and convert again? Grab some bright colors which give people a sense of urgency.
To become a better designer it’s a great idea to learn what effects all colors have in people. In that way you intuitively know which colors to pick for what occasion. Grey and beige are not festive, neon pink and green are not soothing. Know what color can do and use it in the right way, to start on the road towards becoming a color master.
