How do you choose colors in a webpage?View other answers to this thread
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!