How do you choose colors in a webpage?
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?
3.4K+ developers have started their personal blogs on Hashnode in the last one month.
Write in Markdown · Publish articles on custom domain · Gain readership on day zero · Automatic GitHub backup and more
Lead Designer at Digit Insurance. Formerly Hashnode, Accenture, Claesens, Further & Beyond, change.org.
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.
• 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.)
- OpenColor - Versatile color scheme designed for accessibility
- Contrast Ratio - WCAG color contrast ratio calculator
- Material Palette - Generate Google-approved Material Design color palettes
- Material Design Colors - Official Material Design color swatches
- Color Psychology - Common colors and their meanings
- Color Emotion Chart - Chart of color meanings, and common brands that use those colors
@jiyinyiyong examining existing websites and analyzing the colors they use is a great way to start. However, choosing colors from zero would fall under what is called an "Atomic Design" approach. This approach may pose many challenges. My advice is to limit yourself to 2-4 colors and work from there :)
hahahaha @maruru I didn't even notice! I should've mentioned that there are exceptions to this chart haha!
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.
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