Color is an exciting visual element to play around with within design, there’s an infinite amount of possibilities. If you’re itching to dive into color theory and understand tints, tones, and shades or the difference between analogous and complementary color schemes, be sure to check out this post on Everything you need to know about color.
When it comes to web design, you can use color in headline text, body copy, buttons, as well as designed elements like illustration, icons, and photography. You can use color to call attention to one part of the design over another, color palettes and schemes can be used to create brand recognition (for example, a Coca-Cola website would use a lot more red while Pepsi would use a combination of blue and red). But however, you decide to use color, think about how to create hierarchy and unity within the design.
In this landing page example, the designer chose to use a limited color palette of black, white, and yellow as an accent color. We can see from the logo in the top lefthand corner that yellow is a core brand color for the company they are designed for. This design decision makes sense for the brand, it also helps to accentuate the CTA (call to action) buttons.
In this example, color is used in a utilitarian way to separate information in these charts and graphs. In the line graph, a real is used to represent the total revenue in a day while a salmon pink is used to show total expenses for the day. If the chart showed both of these variables in the same color or colors too close in contrast, it would be difficult for a user to understand the date. Color isn’t always used for brand awareness and aesthetics, sometimes it is needed to understand the content you’re communicating.