Block 1

For this hands-on, we’re going to create a color palette for our dashboard app. I’m deliberately starting with quite a complex design because I want to show you how we can think in terms of systems in order to simplify the process of creating a color palette.

So let’s just start off with picking our primary or our hero color. Because when we start doing a design, and creating color palette, we are usually working with a brand color. Or just a color that we have in mind that would work for this particular design.

I’m just going to do something that is very not me and go for a trendy pairing of colors right now because if you are anywhere in the tech community, you’ll have seen that pink and purple are really what’s going on. They’re quite previously thought of as very feminine colors. I think at the moment people are thinking that they’re very modern and futuristic in some way. So lots of neon in there as well. I’m just gonna start off by drawing a couple of rectangles that are going to act as my swatches. So I’m just duplicating that rectangle and let’s name me Swatch so that I remember what they’re for in the future, and I’m just gonna start off by dragging in this little spectrum to roughly pink and purple colors that I think would work. So I’m gonna go quite bright. That’s quite a nice purple, and I’m going to go for slightly warmer pink like that. So on the left we have a purple, and on the right we have a pink.

Now these are roughly what I want. They look fairly similar actually right now. I could tweak it a little bit. This is what I tend to do is jump into the color picker and use the sliders, the HSVA sliders, or mostly just the HSV sliders to refine the color to being closer to what I want. So. I might say, oh, well, because this pink is, um, we want it to be a little warmer.

We want the colors to be distinctive from each other as well. So maybe I’ll make this purple a little bit more towards the blue spectrum, and maybe for the pink, I’ll make this a little bit brighter. So maybe that’s how I’ll start off.

The next question is, do these colors work well together? Like how do we make sure that they’re cohesive? Now of course each of these colors are a different hue, and one of the ways to make colors cohesive is to ensure that they are really similar either in hue, in saturation, or in value in lightness. So let’s check out the values of these. So this is our purple. The hue is 277. That’s what sides the shade of purple that it is.

The saturation is 90 and the value is 91. And if we check out the pink, that’s about 94 and 98. So maybe if we make that closer to 90 and we make this one closer to. 91. These colors are going to work better alongside each other. They feel closer together.

Do these colors actually work for a user interface? So what are we gonna do? We’re going to introduce in, remember before we were looking at color palettes, we looked at how often interfaces use white as a background and dark gray as a text color. We don’t need to deviate from that standard. I think that that makes a lot of sense here for a dashboard app.

So I’m going to draw out another little swatch. I have to make it the same size, the same height and width because that is kind of particular person that I am. And let’s make this a dark gray. Okay. And we’ll create another swatch, I’ll duplicate that swatch. And let’s make this, let’s just go all the way to white. So that is a completely desaturated gray. White is six Fs, the hex code. It’s one that will always get stuck in my brain and I’m, because it’s hard to distinguish, that swatch against the background. I’m just gonna add a stroke there so we can tell it apart.

Now we have these colors, but will they work in our interface? Let’s test the contrast between them. If we think about this color palette, it might look good as colors alongside each other, but how are they going to work when you are using the text on a background color? Maybe you want to use the white on the pink for your buttons. Maybe you want to use pink and purple on your white for other text colors, so we need to check that these will work in those situations.

So if I open up my plugins, and I’m going to scroll down to the contrast plugin. This is a Penpot team plugin. You can get it on the Penpot plugins page, and it’s free to use.

And if I open that up, now I can select any two filled shapes to calculate the color contrast between them. So these swatches are perfect for doing that. So let’s start off with selecting our gray and selecting our white. So I’m just holding down the shift key to select multiple shapes at once and here this will give me a preview of those colors and tell me what the contrast ratio is, and it’s giving me normal text, large text, and graphics results.

Now the WCAG, the Web Content Accessibility Guidelines, that is where these ratios and these values come from. And AAA means that it is enhanced color contrast. So this is considered to be the top and best possible accessibility option for contrast. And AA is really the minimum. So you really want to adhere to AA at the bare minimum and AAA is ideal.

And in many situations, legally, and laws, regulations, they will require that your text meets the AA standard. So, bearing that in mind, with these selected, our contrast ratio is 13.76 to 1. These are highlighted in green as AA and AAA if you can see that color green. But otherwise you can just work off the contrast itself.

So our minimum contrast for enhanced is 7:1, and so this way outstrips 7:1, it’s great. It’s very high contrast. So these colors will work well together. How about trying purple on the white? Now this is a little different. We’re at 5.7:1. So this normal text, triple A is red. And so that is saying that we do not meet the sufficient contrast level for high contrast like if we want to make it as accessible as we can do for normal text. So your fairly average size text. They don’t specify a specific font size for normal or large text because different fonts render font size differently. But I would say normal text is like your paragraph text, and so that is insufficient.

So maybe we want to bump this up because minimum contrast for regular sized text is 4.5:1 ratio. So what we can then do is say, oh, actually I’m going to tweak this in order to get the contrast that I want. Another option is to generate some different shades of these colors to use for these different purposes because maybe I will be able to use this as a decorative color elsewhere, even if I can’t use it for text.

And so if we want to generate our colors. There’s a plugin. There’s plenty of generators on the web to be able to do this, to generate scales or ramps or tints and shades. These are all the terms that are used for this same thing. There is a really cool plugin called the OKLCH Palette plugin.

And if you open this up, you can generate a number of shades of the same hue from dark to light, and you can choose how many you want. 10 is fairly standard and you can choose your base color. And so if I want to get it from purple, I’m selecting my purple and you see it’s generated these gorgeous shades here. Now this has actually increased the saturation slightly. I think as we’ve gone from dark to light, you can see that this is quite warm. This isn’t just white. And that’s what this, these sliders do here, is they give you the option to slightly tweak how your palette gets generated, which is how you can sort of make sure that you have a palette that works for your needs.

So I’m going to, maybe I want something close to white at the end. So I might, I can either increase to get more in there, but I don’t think I need that many. I’m just going to tweak that chroma value slightly. Just give me a lighter, whiter color at the end. And then you can add this to your file and it will generate a bunch of rectangles that you can use as a palette when you’ve created these palette colors that you want to use.

If you go into your color picker. And you can see here we have dropdowns for file, library and recent colors. So recent colors will store all of the colors that you’ve used recently in your design. Now that’s really helpful because you can go back to what you were just working on and find that color and quickly apply it again so I could apply this gray again.

Well, what if you haven’t been working with a color recently? Sometimes you want to be able to save that color for reuse, particularly if you are creating a color palette like this. And so what I might want to do is save this particular shade of gray, and there are multiple places I can do it from and I can save this to my color assets.

So assets is this panel here, and this gives me an option to share components. I’ll show you that in the future. Colors and typographies as we know. And so I can add it from the assets panel, so I can choose to add a color from there. I can pick it. Let me move this so I can see what I’m doing. Color covering up the dialogue, right, so I could pick the purple and save this color style. When I do that, the color, oh, it’s the wrong color, but it appears in this Assets panel and highlighted is the name of the color. This is just the hex code right now, but I could rename it to say my brand purple color. Now that’s incorrect, so if I want to edit it and maybe so I can see what I’m doing. Editing this color now and I’ll take the dropper and I’ll make sure that it actually chooses the correct color this time. There we go.

So we have our brand purple saved and there are other place you can save your colors from is from the color picker itself. So I have this color selected and you see I have the recent colors drop down. If I choose file library, this is what’s shown here. This is my local library, the file library. And when I have this option selected in the dropdown, I can use the plus button to add the color from there, and then I can again rename it here.

This is my brand pink, so now if I’m working and creating shapes and colors, I can jump into the color picker and I can select my file library and choose the color instantly from there. I can also apply the color from this sidebar here, and I can also, this little palette down the bottom if I open it up. Now this little dropdown has the option to show either your recent colors or your file library colors. Usefully, the recent colors distinguishes between the actual recent colors, which are the ones in the rectangles or your named colors, which are circular and switch to my file library and I can select the colors from the palette there.

So that’s really handy if you want to quickly grab a colors while you’re working on your design without opening up any other palette. And when the color is applied to your object, you’ll see that it looks different. You don’t just have a hex code and the color picker,  here you have the actual color name highlighted in the design panel.

Now, if I wanted to use different color and I wanted to go to the color picker. I can use this link to detach that color. So this is, now, it’s the same color, but it is no longer linked to this brand color. That’s because if I undo doing that, there we go, it’s back.

If I wanted to change the shade of my brand purple and I decide, oh, maybe I want it to be a brighter, lighter shade of purple. So maybe I lighten it up. Desaturate it a little bit, and then if I save that color style, it will update every object on my canvas or in my design that is using brand purple.

So that’s a really helpful way to make your use of color much more maintainable across your design. I’m going to reset that back to my previous  brand purple.

I can organize my colors as well. I can group them. So I can choose to group from this and give it a name. So this will be my brand color, but you can also group them just in the name itself. If I go to edit this name, oh, edit the name, rename not edit, and I type brand slash, that will create a grouping and it will put this brand purple color into the brand group like so. Notably in the palette, the name of the color is shown and not the grouping. So if you have important information that you want to include about how that color should be used, make sure that you put it in the name of the color itself and not just in its group.

So let’s look at our actual dashboard design and think about how we want to apply the colors  to this now. I’m actually going to use a library that is already existing that I created earlier, and this is quite a useful way of working. So I have a starter kit that I’ve created. Now, if we look at this, I have different levels of colors.

I have my accent colors, I have my state colors, and I have these all laid out in a document. This is kind of like the beginning of a design system, just showcasing how you can use colors. And all of the colors in this palette, including my purples and my pinks that I’ve used to, I’ve checked the color contrast of all of them.

I’ve saved these all as color assets and I’ve grouped them by background colors, border colors, foreground colors, and as text colors as well. And this is a library. And if I go to this add library button. You can see that this is my file library and it’s been published  because I’ve published that file library, I can access it across the entirety of my team.

And so if I return back to my dashboard, if I go to assets, I can add a library and I can use this app color palette starter kit. I can connect that library to my file, and now I can utilize all of the colors that are inside of that library in my design, and they are accessible from the palette as well.

You see, I can keep scrolling along there. I can also grab the colors. If I select an object, I might want to color from the color picker I choose to from the dropdown, not the file library, not the recent colors, but the app color palette starter kit. And I have all the colors listed in there. There are a lot of colors there and it can be quite confusing if you have maybe  shades of white for different uses.

But if I hover over the color, it will tell me the name of the color and its value as well. So that’s a helpful little trick if you’re struggling to tell the difference between your colors in here. So let’s look at starting to apply our color.

First of all, I dunno if you noticed in this palette before the concept of levels. So this is the idea of how you want to elevate certain content and separate out your content. And I’ve created this level system here. So I have level 0, which is my plain level on which most of my content will appear. If I want to push that content visually away from the user and show that it is less important, I can use level -1 and if I want to bring content closer to the user to show that it is more important, I  can use level 1, level 2, and level 3. This is often used… done using shadows in other design systems. But here I just wanted to keep it simple and I’m just using shades of gray here.

But the idea being, I’ve worked on a contrast where you can separate each of the boxes out with borders, but the borders are subtle. They’re not going to draw your eye away too much, but they show clearly how the content is separated out. And the text contrast has been checked for all of these colors as well, but higher contrast will draw the eye in more.

And so these can be really a good system where you’re trying to organize quite a complex user interface when there’s many different sections that are competing for a user’s attention, like a dashboard or interfaces with like panels, like Penpot. There’s so much content going on around me  that I want to be able to make sure that the user can understand how it’s organized visually.

And some levels might have a fixed position like navigation or something like that where the content scrolls underneath it. And so often that’s where you can use the idea of elevation and levels to almost create a 3D feel in your design. You don’t need to add the 3D visual itself. You don’t need to add shadows and shading and all of that. But just a slightly different use of color and contrast can evoke that feel and help the user understand how your UI should work.

So let’s start applying some of these level colors and jump back into here. So let’s think about, this is maybe one of those navigations that is fixed. This will always be at the top of the screen, and so that’s going to have an  elevated level. My basic content and is all of these different boxes here. So these are going to be probably my level 0s. So let’s start off by applying fills to these boxes. Now I’m going to select each box by holding down shift and in order to select multiple boxes. And I’m also holding down the command key in order to be able to access the individual box inside of the group. So I’m holding these down. If I look in the layers panel, I can see I’m selecting these cards effectively, and I’m going to apply, going to close my local library and background colors and level 0. It’s not actually going to make a difference because it’s white already, but I can see if I scroll down to this selection fill that the level 0 background is already applied.

Now when it comes to borders,  you need to know that there’s a key to hold down in order to choose the stroke color. So I want a level 0 border. And so that’s this one here. And in order to apply that, I’m going to hold down the alt key. So if you hold down ALT when selecting a color, it will apply it as the stroke color.

And so this is now. Showing up as the stroke color in here. You can see level 0 order. Next, I want to do the text color. So let me select all the text inside of my design. I might refine this a little more later. I’m also going to select, actually, I’m not gonna select the icon because I think that’s a stroke. Look at that in a minute. And let’s select all of these text colors in  here, and I’m going to apply to that, a foreground. And this is my level 0 foreground. So that has applied this gray. You can see that this is already a little bit more subtle than the darker borders around here. Let’s have a look at these folders down here.

So this content is probably quite important. It’s appearing on the dashboard. It’s inside of this file section, so this is probably a level 1. You can name your levels however you like. You might have a more meaningful name that you want to give them. This is what I’m going to do for now, and so I’m going to select all of those and give them a level 1 background, and I’m going to apply the level 1 border to them as well.

So I’m holding down alt and clicking on border. So I can  see that that’s been applied as the stroke color. And then for the foreground, I’ve called that color foreground because it isn’t just for the text, it’s for text and icons or any other content inside of that box that has a color applied to it. So I am going to go to foreground level 1 foreground, and if I zoom in, select each of these icons. Now, icons can be created using either a fill color or a stroke color, sometimes both. Ideally you don’t use both because it can be quite confusing if you’re trying to select them and change the color that you know, whether you need to change a fill or a stroke. And so these are strokes, and I’m going to give those all the level 1 foreground.

So I’m holding down the alt key and selecting level 1 foreground. Now let’s think about this  navigation that is hovering over the top. So maybe I’ll bring that into our level 1 as well, uh, because maybe that’s the same level as these files, or maybe we want it to be a higher level. Should we do level 2? How about we’ll do level 2 for that and we can change that later on if we feel like it’s too prominent. And so that is level 2with a level 2 border holding down alt, selecting the border color. And let’s also do the text in here as well. That’s level 2.

Now let’s address these icons separately. So this is a stroke, so I am going to do level 2 stroke. Alt Select that. So we’ll look at these. Are these all icons using strokes? Yes, they are fabulous. So  these are all level 2 holding down alt select level 2 foreground as well. We’re now select this individually. You can see that the stroke has been effectively applied and the border color as well.

I think that will make this a bit more subtle looking. So level 2 border, hold down, alt, select level 2. I see, that’s looking good. The search box inside of this navigation header is arguably a higher level. It’s a very important input that you want to draw the user’s attention to. They’re probably quite likely to use this as a navigational device on a dashboard. So I’ll make this a level 3. So let’s pop on a level 3 border, a level 3 background. This may not make too much of a difference because it’s already white and the foreground color,  it’s a level 3 foreground, and we’ll select that icon I’m holding down commands to select these individual items and alt in order to apply the stroke color. You’ve seen that change there. 

And so this is starting to look a bit more subtle than just a black and white design. Now, I think with this sidebar here, I want to push that back. This is mostly secondary information and navigation. So I’m going to use level 1 for this. Level -1, sorry. So level -1 and level -1 border.

Let’s select each of these individual texts, and that is our level -1 foreground. They’re all fill colors for text. Now let’s check out our icons, or from selecting each path individually. That’s quite annoying, but sometimes if the icons aren’t particularly well made, you need to do this. So I’m actually going to jump into the layers to make sure that I’m selecting everything correctly.

Oh. I want to make this wider so I can see what I’m doing.

So I’m holding down shift to multi-select and I’m holding down command so that I can accurately pick exactly what I want to change here. And so this was all assets and level -1 foreground as a stroke. So hold down, alt and select.

Now perhaps with… did I change that to foreground color as well? Level -1 foreground. There we go. And this icon too, oh, see, I selected the fill color for that as level -1, but it’s actually a stroke, so it didn’t change the color. So let’s add a fill for that. 

Now looking at these icons here, you might end up having these user color often this is a convention in interface design. When you have something that is indicating you uses avatar, often they’ll be generated with a random color if you don’t have like a little picture of the user or something. But for now, what I’m gonna do is I’m gonna say that this is more important than -1 content. It’s interactive. I want to pull it forward again. And so perhaps I’m going to select all of these little team list items and I’m going to make those, so I’m bringing it forward from -1. So that brings it to level 0. So I’m going to give these all a level 0 background. A level 0 border, holding down alt, selecting that stroke color.

And for each of these texts. I am going to use the Level Zero foreground. So they’re still more prominent than the content behind it, but they’re not competing with the rest of the content here. Now what did I not do is I did not apply a background color. So this background, well, I suppose this background is it level 0 or is it level -1?

I think if we make it level -1, then it does make the level 0 stand out more. But that this, that then means I need to push this content forward. So this then becomes level 0. I am not so sure about that. I think I’m going to. Keep it muted like that, and I’m just going to use the border as a separator. 

So now let’s start thinking about the colors here. We might want to pull forward some of the more important content. So for example, often these headings are valuable when you’re first coming into a user interface, but you probably get to know what they are at their locations pretty quickly if they’re not going to change. So really the most important information in these little dashboard boxes is its content, it’s this budget allocation number, it’s these different deadlines, it’s this inbox content. And so maybe I want to pull that forward. So if this level was level 0 these will be level 1 now. So I am going to say level 1 foreground, and I’m going to give these level 1 foreground and I’ll give this a level 1 foreground too, so that’s starting to pull our content forward. 

Now, let’s think about color. We don’t want to overuse color in a dashboard because it can be quite an important indicator. So for example, here I have this team activity, this task completion rate, this budget allocation. So maybe I’m going to use the different state colors for this. So I haven’t got any error messages or success messages or anything on here, but I do want to be able to highlight particular information or success or errors or warnings. 

I can use these as negative colors as well. So maybe the task completion rate is pretty low. I’d say 55% is pretty low, and so perhaps I’ll make that a error color. The team activity is 75%, I would say that’s pretty good. So maybe I make that green. And the budget allocation is 115, which is obviously way over budget or fairly over budget. So I’ll make that red as well in order to draw attention to it.

Now, I do want to use my accent colors because I think it’s important when we have things like these links here. We don’t have an underline indicating that this is a link, but we want to show that it is somehow an interactive item. It does have this little icon here, which helps us understand that it is interactive, but maybe I’m going to use color to emphasize that.

So I’m going to use this accent, primary text for all of my features. These are strokes, so I’m going to apply this as a stroke in order to show what’s interactive. There we go. I’m not going to the same for switching workspace because I don’t want to draw undue  attention using color there. And you know, this is a icon. It’s black and white right now, but we don’t have to use set colors for everything. 

And when we want to add a bit more personality and color in, maybe we want to make our sunshine yellow. So I am going to give this a random yellow color. Let’s make that nice warm yellow. Let’s give it a nice warm yellow fill as well. Go to my recent colors, select that yellow. Just do a lighter version of yellow for it. It probably draws a bit too much attention, that color. Maybe I’m just going to make it. I’m gonna make the whole object lighter. I’m going to change its opacity. So that’s maybe try 30 is a little bit weak, use 50, and that just pushes its prominence back a little. 

And so I have the basics of my colors now in there are very basic Dashboard color. I’m not sure whether you might want to add a little bit more of your accent colors in. Maybe you want to use the pink, maybe you want to apply some different colors to brighten up the dashboard icons or something like this.

But I think in terms of trying to keep our dashboard simple, I made the information easy to understand. I think this is a very good start. 

We’ve looked at color assets today. You might have heard about design tokens in Penpot and that you can use design tokens for color. You might have seen me demo these in Penpot tutorials and videos. These will be coming later on when we talk more about design systems. They’re another tool in our color toolbox, and I can cover those in a lot more detail later. but I think color assets is a really great place to start when we are looking at color.