FREELessons: 15Length: 2.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Start Forming a Color Palette

A common occurrence in design is the use of several similar colors that are almost imperceptibly different, meaning multiple color codes need to be used where one would do the same job. If you instead produce a defined and limited number of colors in a palette, the management of said colors in code can be done more efficiently.

In this video, I’ll explain a couple of the ways in which a defined palette is better for code-friendly design, and we’ll start forming our own range of colors, included in the design file for easy access later.

We’ll also add a couple of blank “panels” to the design and set their colors as a part of working up our palette.

2.4 Start Forming a Color Palette

Hey, welcome back to Code Friendly Design with Adobe XD. In this lesson, we're gonna talk about color palates. Now another thing that is pretty common to see in designs that are meant to be carried out is something like you see here with these four colors. And these four colors actually look very similar but they're not, they're just marginally different to each other. So if we were to grab a color picker, just draw another rectangle, so we have something to use the color picker with. And sample this color. You can see the code here, d59229. Then if we pick this color, that's slightly different again. Each of these colors is just slightly different, but not so substantially different that there's really any need for these four different shades of orange. So I'm just gonna delete those really quickly, that was just to demonstrate the point. So for every different shade of a particular color that you add into your design, that's another color code that is gonna need to be managed in the code of the eventual website. And there are a lot of advantages to trying to keep your colors to a minimum. Only using different shades of the same hue, when there's a really good reason to. One of the benefits to keeping your colors to a minimum is, it makes the code much more manageable. And it also makes it a lot easier to update in the future. So if everywhere that there's an orange color, you know that this is the code. That's gonna be used, and you decide that you want to change that color later. Then the coder only needs to look at every instance of this one code and replace it with another hex code. And taking that a step further. If the coder is using variables, through either CSS variables, which are a process in the browser. Or by using a pre processor where variables are processed and then written directly into your CSS. Either way, it's gonna allow the coder to have a variable with a name, something along the lines of highlight color 1. So that to set that variable to a value of this hex code. And again, then if you wanted to change that color later, all the coder has to do is change the value of highlight color 1. And wherever that color is used throughout the whole document, throughout the whole design it will get updated throughout. Not only does that make it easier to make modifications and tweaks as you go along, it also means that you could ultimately generate completely different color schemes, completely different styles for a given website, just by changing a couple of variables during the coding phase. And particular if you're in theme design for example, you're creating a theme that's going to be sold to end users that facilitates the option of having, say, five different color scheme versions of the same design. No extra work, just using a couple of practices with how you set up your colors, but potentially a lot more productivity as a result. All right, so that colors all the reasons why? Now, let's go ahead and setup the document so that we clearly communicate to the coder what the colors in the palette should be. And at the same time, make it easier for us to work with the colors in the document from here on. All right, so, actually before we move on. We have our sections in our top panel from the last lesson. Just let all of those, group them up and rename that group to one content. And then select both one content and one BG. Group them up. Rename that to one. All right, so now over on the right here, we're actually gonna set up little swatches to the show the coder exactly what each of the colors are gonna be that they should use in the design. So we'll just grab a rectangle to set up a bit of a backing space for those swatches. And we'll make it about 100 pixels wide and about 750 pixels high. Just drop that border once again. Just make sure that this isn't over the top of the shadow on the edge that we created earlier. And now, we're gonna start creating some swatches inside here. So we'll grab another rectangle. We're gonna make it 60 by 60. We'll center it. Make it about 20 pixels from the top there. We're gonna give it a really dark, heavy border to make sure whether it's a light color or a dark color it's distinguished from out white background. So we'll make the border five pixels. Just to make it look a little more swatch like, we'll drag this little circle here to give it a rounded corner. All right, so let's start adding in. The colors that we've used so far. Our first color is our background color. So we're just gonna grab a sample of the background color, so that's one. And we'll start renaming our layers here as we go along. So just our color backing strip and then we'll call this one sight BG color. And we'll duplicate, we can press Control D to duplicate. Hold Shift and drag down to keep things vertically aligned. We'll make a 20 pixel gap in between here. Now the next color we're using is the one for our site wrapper. So once again, we'll just sample that color and we'll rename that site wrapper BT color. And these colors are gonna get used in multiple places, but associating the swatch with at least one part of the site is still gonna help the coder to start understanding, which colors are being used where. Next up we've got our light color that we we were using here, so we'll duplicate once again. Drag that down, and now that we've got multiple swatches, you can see it's a bit easier to get them evenly spaced apart. We'll sample, again, and this is actually gonna the lightest color that we'll use in this layout. So I'm just gonna name that layer lightest color. And because we're assuming that the coder is going to create variables out of each of these colors. You don't actually wanna name them things like orange or blue or charcoal or anything like that. Because, now, what happens if you decide, you wanna make a version of this site, this going to be purple and green instead of blue and orange? So if you taken this color and you've given it a variable named orange. Now, it's not gonna make any sense if it suddenly starts representing red. So try to give it a more generic color, when you naming out your layers. And the the coder can make more flexible variable names out of those layer names. Right, so next stop, make another copy of this watch. And we're gonna grab our first bright highlight color here. So sample out our orange and we call this one, highlight color one. Make another copy. Simple our brighter blue. We'll call this one highlight color two. Another thing that you can do once you're starting to put this color palette together, and you've got all your swatches up here, is save these colors into your Adobe XD swatches collection so that they're much easier to select from that point on. So do that, all you're gonna do is select one of your little switches up here. Open up your color picker, and then there's a plus button here. Now you can just add that swatch, we'll just do that for each one. And you can see that we're getting this collection of colors together. And now it becomes very easy when we add a new shape to then choose any one of the colors from our color palette. So there are still gonna be another couple of colors that we add later on in a couple of later lessons, but that is gonna get us started. So now, instead of trying to come up with different colors on the fly. We're just gonna try to stick with these colors as we go along. We won't be doing any more color sampling from this image. If we need to create a new color, we're gonna start with one of these as the base and then modified it from there. And now when you send this design off to the code, they're gonna open it up and they're gonna see a really, really clear selection of swatches. And now that's exactly, which colors I should be using. And now, we just got one more thing that we need to looked at. We've colored before we move on to the next part of the design phase, and that is checking on to color contrasts, so we have settled on our light color, and our dark color here. But we also need to make sure that those colors contrast well enough to meet accessibility requirements. Sometimes when you're working on a design, you think that a color contrast is sufficient enough, it looks fine to your eye but when you actually go and check it out. When you have an accessibility too in a browser actually give you a writing on your color contrast and find out that it isn't actually good enough. So the next lesson I'm gonna show you how you can check on any colors as you're going along to make sure that your four grand colors a sufficiently contrasted against your background colors. So we'll see you in the next lesson.

Back to the top