Block 1

Color palettes are useful because they give us a restricted number of colors we should use for our UI design.

Of course, one of the primary uses for color palettes is to reinforce a brand identity, and if we look at our case study sites, we can see that many UI design color palettes are similar, but they have differences that are distinct to their brand.

So the Penpot website uses off-white for its background and dark gray and dark purple blue for its text, with this green and bluegreen and purple pink as accent colors. And gray is also used for meta information. Using the same colors for our palettes over and over again creates a consistent experience for the user.

It can also help teach the user how your design works as a design pattern. For example, one particular accent color may always be for the most important interaction on the page, or you might use the same shade for every error message. Here, color can quickly become a kind of shorthand that is easily read by anyone who can see and distinguish those particular colors.

The Wise website uses color quite minimally, although it has a lot more personality through color than many other banking websites. So they use a dark green for the logo text, which is complimented by this yellow green accent text, which they use for all of their buttons. The background is white and most of the text is dark gray. This is familiar. And like Penpot, they use light gray for secondary information. Their use of blue is quite interesting here as it doesn’t really fit with the rest of the color scheme, and I reckon this blue is indicative of a common design pattern used for semantic or state colors.

So many color palettes feature these colors that don’t necessarily fit in with the brand colors. Instead, they’re used to convey information and draw the eye to specific information like communicating warnings or success or errors. And these are most common for apps where the user needs to be given feedback on their input, like they’ve successfully submitted a form or made an error that requires fixing.

Here in the Chakra UI documentation, you can see these different background colors for different states. It’s quite light, but you can still kind of see them. And this UK government design system has specific colors for error states and success states. So using a color palette can benefit our designs as part of a much greater design system.

If we’ve tested that colors work well together, for example, the foreground text color is readable against the background color, then whenever we go to use that pairing of background and foreground, again, we save ourselves time. We don’t have to test it all over again.

I love Stéphanie Walter’s site. It’s an example of how personal websites can be really creative and exciting with just with color. She uses a very distinctive and vibrant yellow, (love this yellow!), with a complimentary purple color to create a really unique brand feel. But she does also use this common white and light gray and dark gray for the basic background and text content.

It’s interesting when we look at these palettes together to see how similarly they use color, even if they’re not always using the same hues. These aren’t rules for design, but they’ve kind of become established conventions because they work so well for user interfaces. A white or an off-white background with dark gray text on top is a very readable combination. A light gray makes a good color for secondary backgrounds or for decorative elements that add texture and detail to a site without creating too much distraction.

A very bright, vivid color draws the eye to the most important information on the page. And when we look at the minimal requirements for a user interface color palette, it basically comes down to background and foreground an accent color. It might be two accent colors, a primary accent and a secondary accent.

And for more complex apps where we need to convey additional information through color. We’ll need a palette for success and for error, and possibly also for information. And for warning, for each of these states, we’d want to have a background color and a foreground color at the least. But when it comes to a small site or a personal project, you don’t have to stick to these conventions.

You can convey a lot with a very little amount of color. So you check out the color palette on Heydon Pickering’s website. They use black and white so effectively for a whole load of their personal projects. So if you are brave with color or with the absence of color, you can stand out.