Choosing Your Website’s Color Palette

Video Transcription: This course is brought to you by Appy Pie as part of our Academy series so this is the unified look for your website and the first thing that we want to do is decide on your color palette what are the key colors that you want to be using on your website and to create a professional looking website you usually want four colors the first is a key color that stands out in this case the key color that I'm using is this green right here and I didn't come up with a screen myself I actually found it from this website for some reason I really like the shade of green and then I just use a free app on the Mac App Store called mini picker where you can grab the color and then copy this hex code which is how colors are represented on the internet and just paste it in here and then I needed to find more colors so I recommend that you have two key colors and the reason why is if you go to my website where I created that landing page for thrive architects you'll see that the green was one key color but I also wanted a different key color for my call to action buttons and a general rule with websites is anywhere you want someone to click you want to have it be its own color so here this color was the blue now the tricky part is how do you find colors that go well together that match and there's actually a lot of awesome tools that help us accomplish this and my favorite is I don't know how to pronounce this but cooler disco and it's a color generator that's completely free so you can start the generator and then what you do is you put in any colors you already have so I know I want to use a screen i pasted that in here and then i lock it down and then press spacebar and you just keep pressing spacebar until you find another key color that you really enjoy and what i'm looking for is a color that contrasts the green here that I have so after pressing space for a really long time and by the way if you miss a color you can always undo and go back I eventually landed on this really nice blue here so let's grab that color and then once I had that blue eye lock that down so those are my two key colors and you're gonna want to key colors for your own website and by the way if you don't see a color on a website that you really like or you don't know how to pick it off from the website using that app mini picker you could just open up a new colors tab with no locked colors start the generator and just keep clicking spacebar until you find a color that you like and let's say your key color that you really like is this red right here you can lock it down and now look for your second key color so it's really that simple and one other resource for you if you want to have ideas for colors is a website called UI gradients these are beautiful gradients for your website but they also just have great colors so if you're looking for a key color and let's say you want to look for a purple pinkish kind of thing you can just grab any of these colors and throw them in the generator by copy and pasting that code and then click spacebar and find another key color once you've identified your two key colors the next colors you're gonna want to use is an off-white and an off black and for whatever reason it just looks so much better on a website when it's almost white but not quite white or almost black but not quite black so what I recommend doing is once you've chosen your two key colors click the lock button to lock those down and then keep clicking spacebar until you get an off-white and an off black so this is a great example of an off black it's not pure black but it's pretty close and now we just need an off-white there we go so that's it these are the only four colors you need to create an awesome-looking website and once you find them you're just gonna want to copy and paste these codes into your design code so they're always there and one thing you may have noticed when you look to my website is there were some different colors besides those four colors so for example this green here is different than my key green here but what I did was I took that main solid green color and I lowered the opacity and that's just called a tint and by using the same color but changing the tint the site still has a professional look where it feels like all the colors are purposeful so don't worry if they didn't make sense I'll show you when we're actually building a website what that means but just know that with these four colors you have a lot of options.