MODULE 3 - Mastering The Divi Builder
Live Q&A
MODULE 4 - Building Our Website

02b How to create your color palette (part 2)

Before we can go in and fine tune our color palette, let me show you another way of choosing your color palette based on a photo. So it could be that you’ve captured a moment and that feeling of that photo is what you want to convey in your branding. That’s another very, very easy way of creating your colors.

In my case, I haven’t taken any photos, but I’m going to go to a photo sharing website, download a photo, and then show you how you can do this. But you can use your own photos that you may have taken at some event, or maybe a photo that just invokes a feeling that you want to have in your branding.

Over here, yeah, I’m on a website called This is a website that you can now. Pretty much download and use any of their photos, but of course, these are relative free. You need to give them credit. And when you use this in your designs, okay. There are several ways that you can, Choose your color palette.

So let’s say you went on a holiday and you’d like to capture the vibe that was there, and that is the emotion that you want to have for your branding. So what you can do is you can pick a photo. In my case here, I am going to go with, say this photo here. I’m going to go ahead and say, Click on download so you can see here it is downloaded on my computer.

That’s fantastic. I don’t need this anymore. I’m going to close out of here. I’m back here on What I’m going to do this time is I’m going to come over here two more. So when you click this dropdown, you’re going to get an option here for a color picker and you can pick a palette from a photo.

So let’s go ahead and do that. So I’ve just clicked here. Then I’m going to click on browse and image. And then I’m just going to drag and drop it here. So there we go. So now we have our beautiful color palette and, to be honest, you know what, just looking at this, I think this looks really, really, really nice.

I like the way the colors here were sampled from our image here, and these are beautiful colors. What we can also do here is we can go ahead and explore this color palette right away, or you can browse another image, but what is really cool here is if you don’t like this layout here, what you can do.

Yeah. You can just drag this slider here and you can see the colors are changing and all these colors here are from this color palette. In fact, you know what this looks really cool what’d you can also do here is you can add more colors. And as you scroll through this, you can see here that this is going through the colors and all these colors really work well together because this is just a photograph.

There we go. As you can see here, so many color combinations based on this image. Okay. Let me just pick one here. Let’s say we’re going to go with this. You can export it or you can view the palette. So here it is.

Now I want to open this in a general. Now that I have all my colors here in the color generator, what we can do is we can further go in and tweak these just to, make them look the way you want. Let’s say you want to make this a bit brighter. You can just do that. And all these colors here, you can just play around with the shades, but as you can see here, we have a beautiful color palette that I think works really well.

Now, as you can see here, we have a duplicate so we can delete this color. Because it’s pretty much the same as this one right here. Now that we have our colors, the next step now is to fine tune our colors and really test them and see if they work really well together. As we did before, what are you may, what you may want to do here is to just, add a few colors, make some of these darker, so you can have contrast between them.

I’m going to come over here to the shades. I’m going to make this really dark. Like that. I think I like that. Okay. That really works well. There’s a bit of contrast here. And even if I drag it over here, these two colors, you can work really well. This could be my background and this could be my foreground.

And even if we drag this, , orangy color here, it also works well over here, which is fantastic. And, this color here, this red purple here also works well. Next to this color. So this is how you, test. And see if these colors really truly work well together. So now that I have all these colors, we are now going to fine tune them.

I really like to use this software called Figma. So this is where I need to show you how important contrast is, because this is something that a lot of people really get wrong. So I really want to show you visually, why it’s important and how you can use this as you’re designing your website. Okay.

So see you in the next video.