It always confuses me on how to choose colors. I read some posts on Smashing Magazine so I know the color ring the color scheme, but I never know how to choose among them.
How do you choose colors? Is there any guideline? Or you just go after you intuitions?
You could literally select any color you want and almost all the colours you want BUT you should not choose more than 3 or 4. What a lot of people recommend is to select your main color as a highlight and then choose a darker color of the highlight; then you select kind of a light or dark color for the background with their complementary colours.
Take for example hashnode: They use a very light grey for background and shadows, also for cards headers and links, they only use a green-blueish color as a highlight for their logo and the darker version of the same color for the name. They basically just use one color, the complementaries of that same color and a light grey and if you ask me is a very nice color selection and it really works 'cause it does not distracts you from the main content.
This is a great site I've used to help me choose colors for a project: Palettable.io
When creating a color scheme it's important to have some neutral grayscale colors, some high saturation high chroma colors, some contrasting ( complimentary ) colors ( if your main color is blue, add a yellow/orange to contrast it ), and some analogous colors ( if your main color is blue, green is an example of an analogous color ). This information can be found by studying the color wheel theory.
In addition to what's already been said, bright highly saturated contrasting colors will draw attention. Use them very sparingly on areas of high importance ( ex: calls-to-action such as "sign up" ). Most colors should be neutral ( grayscale, black, white, etc ) with splashes of chroma on important things.
PS: When using colors, it's important to keep in mind the color-blind people :) Don't use color alone to indicate something.
PPS: If you're in a rush, there are plenty of websites out there with premade color schemes, such as
https://coolors.co/browser/best/1
Brandon
Frontend Developer
Shaan Shivanandan
Design @ Capillary | Ex-Accenture | Ex-Digit Insurance | Srishti Institute Alumnus
Hello @jiyinyiyong,
While there are no formal guidelines for selecting colors, there are certain conventions you can follow. The colors you use will depend on the visual language of the product you are designing and who you it is for.
General advice:
• Ensure there is enough contrast between text (foreground) and background
• Use color to distinguish interactive elements like links from body text
• Make sure colors match overall visual language of the brand/product and;
• Look at color psychology charts, and the conventional meanings of colors (eg. red means danger, so use this color to show error states, etc.)
Resources: