Block 1

We use color in UI design for a few different reasons.

Why we use color

One is hierarchy. In the New York Times, the headlines and the headings are darker, increasing their contrast against the white background and drawing your eye there first. The text underneath the headlines and the meta information is lower contrast, so you are less likely to read that text at a glance.

We use it to draw attention. So where does your eye go when you are looking at this page? It’s probably the brightest colors First, these are the buttons encouraging you to sign up for free. This is a badge that’s indicating new content and the word “together”, emphasizing its importance to Penpot.

We often use color to aid understanding. The confirm button here is red and really stands out against the rest of the page. This is because the confirm action will delete a project, so the red serves as an additional warning to encourage you to stop and think, maybe make sure that you read the text carefully before proceed.

And then we have branding. The colors on the Wise homepage are mostly very functional, gray and white, but the green provides an accent color that’s distinctive from other banking websites. That green is Wise’s brand color, and it reminds you where you are, even if you can’t see the site name or the logo.

Color glossary

Now, just like we did with typography, let’s look at some of the common terms we use around color in UI design. Here’s the Penpot color picker, and this is on the HSVA tab. HSVA stands for hue, saturation value, and alpha. Each color is made up by combining these different properties.

The hue is the color of the color. Is it red? Is it green? Is it blue? A sort of orangey yellow? That’s the hue. And hue is often represented by a rainbow like spectrum slider like this. And you can slide through the hues to pick the color that you. The Hue slider usually displays the most saturated version of each hue.

The saturation is the strength of the color. A deeply saturated color will show a lot of the hue like this, and a less saturated color will look closer to gray, white, or black, depending on the lightness of the color.

Now the lightness of the color is also sometimes referred to as its value, like it is here. The V in the Penpot picker, or even its brightness. The lightness is how light or dark the color is from white to black. A color with a high value could be white or almost white, and a color with a low value could be black or almost black.

I like using these sliders to get exactly the color that I want. It can take a while to become familiar with how the hue and the saturation and the lightness interact to build a color. But in UI design, it’s useful to know how to tweak these values. Do you want to use a darker version of a brand color for your text? Then you can adjust the lightness. Want to make the dark colors feel blacker? Reduce the saturation.

The alpha value of the color is also known as transparency or opacity. If an alpha is low, like say 10, a color is nearer to transparent. You can completely see through it like a window. With a low alpha, you’ll be able to see any background or layers behind the selected object. So you can see here the grid is showing through. If an alpha is nearer to opaque, to a hundred, it’s nearer to solid and you can’t see through it at all, more like a wall than a window.

Playing with transparency can be a fun way to introduce interesting layering in a design like this. But it can be unpredictable. Generally, I avoid transparency when it comes to text colors or background colors behind text as it can, as you see here, quickly become unreadable.

A palette is a collection of colors named after a paint palette. They more often look like a collection of colored squares like this, also known as swatches. A palette could have just two colors or tens of colors. The idea is that you’d limit your palette to that select number of colors that you use consistently throughout your design. And this consistency helps form a part of your visual language, how a user can recognize a brand, a product, or an experience.

This palette is taken from the Penpot homepage. A scale or a ramp is the collection of colors that are usually a similar hue, organized from lightest to darkest or darkest to lightest. Sometimes the darkest swatches are referred to as shades, and the lightest swatches are referred to as tints. I’m not really a fan of that terminology as tints and shades are kind of two words that mean exactly the same thing in the dictionary, and both of them are usually used when talking about hue rather than light.

Anyway, scales and ramps. the swatches are all often labeled with a number that corresponds to its lightness, where the lower numbers are lighter and the higher numbers are darker. These scales conventionally run from 100 to 900, often with a 50 for the lightest color, and a 950 for the darkest. The idea here is that zero would be white and 1000 would be black.

Scales like this were originated in web development frameworks where people often wanted to switch out, say a pink color for a green color palette, and know that the lightness or darkness and the contrast of the color would stay the same, so you wouldn’t have to redesign how you use color throughout the design. It’s really useful for things like theming.

As I already mentioned with tints and shades, color is kind of an area where we like to mix up terms just to be confusing. So here, knowing the context is really key. For example, in color theory, we have a concept of primary colors, which are red, yellow, and blue.

And of course we then have secondary colors, which are orange and green and purple. They’re in between these colors and they’re produced by mixing each of the red, yellow, and blue. But digital screens make color out of light, not paint. So I don’t think color mixing theory is particularly helpful in UI design. Very important if you’re trying to paint with tubes of paint, but not so much use for interfaces.

We also use primary and secondary to refer to the colors in our color palette. So Etsy famously uses a bold orange color as part of its brand, and in their interface design, they use this orange to draw attention to important elements. And we often call this the accent color. But what if you have two accent colors? You probably have an order for those colors. So orange is Etsy’s primary accent color, and down in the footer its other strong use of color is blue, which we could call a secondary accent color.

Now we’re onto our last few terms that are useful when discussing color in UI design.

Often you’ll notice people talking about foreground and background color. The foreground is the area closest to the viewer, and the background is the area furthest away. Often the foreground is text or an icon, and the background is the container color or screen background behind it.

Color meaning

Different colors have different cultural and emotional meaning around the world. For example, we often think of red as a warning, a red traffic light, or of negativity, which is something we’ve maybe picked up on from the natural world. In some cultures, red means luck and prosperity. We think of green as telling us to continue a positive sign or something evocative of nature and freshness.

There’s a lot of resources on the meanings of color out there, and I’ll include some useful links in the course materials in case you want to dive deeper. Sometimes groups of colors have meaning they can remind us of national identities, like the colors of a flag, or even of iconic groups of colors used by brands from this. Can you guess which brand this is?

Even as individuals, we often have favorite colors. Colors can be so loaded with meaning.

Choosing color in Penpot

In Penpot nearly every object uses color by default. So let me jump into edit mode here. So let’s get started with just a board. A board has a white background fill color. When you select the board, you can see the fill color in the design panel.

On the right of the screen, and here you can see the white color swatch has a value alongside it. F-F-F-F-F-F, and this is the unique hex code for the color. A hex code is made up of six numbers or letters. Some of them are particularly memorable, like three, uh, six Fs, or three Fs is white and three zeros or six zeros is black.

Color codes are useful because they, it means you can be sure that you are always using that same exact color.

Also, alongside the swatch is this percentage, and this represents the alpha or opacity of the color. So as we looked at before, a hundred percent is fully opaque. You can’t see through it, and 0% is completely transparent with no color being visible at all.

And to change the color, you can click the color swatch and that will open up the color picker panel. So the color picker panel, should I say that a few times fast, has a lot of options within this small space. So the top left is an eyedropper tool. It looks like the dropper that you would use to collect drops of liquid, and when you click the eyedropper tool, your cursor changes into the dropper and you can use it to pick from any color already on your canvas. Not very helpful when this is all gray. It’s a handy when you want to pick, say, a color from an image. So let me open this up. Get that color picker tool open again.

When the tool is enabled, the preview area inside the color picker panel shows a zoomed in version of what’s underneath your cursor. So maybe I’ll select this green here, and that helps you pick more accurately. You can click a color to use it that, or you can press escape to exit the tool without picking a color.

Now have a look at the rest of the panel. There are three tabs inside the Color Picker panel. Each shows you different ways to manipulate the current selected color. So let’s have a look at RGBA. The RGBA tab is the default view. The same color is represented by a hex value. And you can also represent that by an RGB value. R is red, G is green, and B is blue. RGB is how we mix color with light on our screens. Each color is made up of a certain amount of red, a certain amount of green, and a certain amount of blue. 225 is the highest value you can have for each color, and zero is the lowest.

And so it makes sense for this green color that there’s a really high number in the G and if I make that 20, it becomes a lot more red and there’s now a higher value in the R input. There’s also an A value here, which again stands for alpha. Remember again, opacity transparency, and this is a percentage, so the highest is 100, and the lowest is zero.

In the RGBA tab, you could also have a spectrum that you can click to find a shade that you want. Let me put this in view a bit better so I can just click around. And pick the shade that I want. The spectrum shows all the values possible for the Hue slider below, so it updates when you change your hue.

It’s a convention in design tools for opacity to be represented by this gray and white checkerboard pattern. So you see this becoming more opaque. If a color is transparent, you can see the full checkerboard pattern, and if the color is solid, you can’t see the checkerboard at all.

The Harmony tab features the same inputs and values as the RGBA tab, but includes a color wheel style spectrum, and a lightness slider. The two circles on the spectrum show the current selected color in the outline circle, and its harmonious twin in the solid circle. The homing harmonious color is the opposite color on the color wheel, which is called a complementary color. Complementary as in matching, not as in giving you compliments.

So selecting the solid color will switch your current selected color to its harmonious twin. And the HSV tab is all about those sliders that we looked at earlier. This is usually the tab where I work the most, tweaking an existing color to be exactly what I want.

So let’s get back to how we can apply colors in Penpot.

Using color in Penpot

So rectangles and ellipses have a gray fill by default. Paths have a black stroke by default. And text, tiny as that is, has a black fill by default.

Even the canvas has a color that you can change after clicking the canvas. So maybe I’ve made this, this color in order to make it easier on your eyes, but maybe I want it to be white. We remember that’s six F’s, the hex color and say that’s white, ooh it’s too bright. Too bright. I memorized this number. I’m not very good at memorizing numbers, and I memorized this.

Gradients

There’s two other options in the color picker panel. We’ll look at images later. But for now, let’s check out gradients. So you can get started with a gradient by, instead of solid in this dropdown option, selecting gradient.

From the color picker panel, a gradient is a fill made of multiple color points, also known as stops. You choose two or more specific color stops and a smooth gradation of color is generated between them.

You can also use transparency in gradients. By default, Penpot will create a gradient from the previous selected color, one stop at a hundred percent opacity and the other stop at zero. You can see how the canvas color is showing through the board here at this 0% end.

There are two different types of gradients in Penpot. There’s linear that maps the gradient along a straight line, and there’s a radial gradient that maps the gradient from the inside to the outside of an ellipsis.

Linear gradients are probably more commonly used, so let’s switch back to that. You can change the direction or the angle of your gradient quickly using the rotation buttons or the reverse button. But what you can also do is you can grab the end point of each line and reposition it as you like. That gives you a lot more control.

You can change the color of your stops by selecting the color input for that stop either here or here. And then adjusting the color using the picker below. So maybe I want that to be more greeny color, and you can add more stops using the plus icon button here, or also by selecting along the line of the gradient itself, and you can remove them using the minus button like that.

So what if I wanted to create a gradient, I don’t know, reminiscent of a summer day, a sunny sky? So perhaps I would go from top to bottom because that’s what the sky does, and I’d choose a nice bright blue, and I think that needs to be a bit sunnier. Ah the transparency is at zero. That’s not what I want. I have to remember to set the transparency so that I get the full value of the colors and it’s richer and darker at the top, and that feels about right. And then it tends to be a bit lighter towards the bottom. I’m gonna a slightly lighter blue as well. And I’m already at the highest value, the lightest value, so I can use the saturation to lighten it further.

And uh, so there we go. We have a sunny sky type of gradient, and you can drag those gradient stops that you have along the line. Or use the percentage inputs here to move the stop. 0% is the beginning of the line, and a hundred percent is the end of the line. If the stop is the first stop and you move it past zero, so further up like this, then the color before the stop here will be the same as this stop color, just solid. And if the stop is the last stop and you move it ahead of 100%, like this, the color after the stop will be the same solid color as the stop. I hope that makes sense. I feel like I’m saying stop a lot.

So subtle gradients are usually more effective than extreme gradients. You can use them to mimic light and add depth to your designs. I’d say stick to two color stops. And if you’re using multiple linear gradients, try to angle their lines in the same direction.

Extreme gradients with more backgrounds are harder to get right. They tend to use a wider variety of hues and more color stops in a small space. And these extreme gradients might be really attention grabbing and can distract you from other design elements. You can maybe get away with them more if they’re layered behind another background or used as a decorative kind of element.

Mesh gradients are really quite trendy right now for decorative backgrounds in tech, and you can layer radio gradients and linear gradients with different levels of opacity to create this kind of effect.

Demo file

As with all of these examples, you can download these exact files I’ve just used for these demos from the course website if you want to see how I’ve made anything that I featured in the demo.