How to Apply a Color Palette to Your Design – Tutorial

hello Internet it's me Greg and I'm back with more color magic know my last video that you can watch right here I shared a fun color experiment that was designed to help you create color palettes of your own entirely from scratch but in this video I'm going to show you how to use that welcome to how to use color palettes and be pretty good at it most of the time the video in the right hands a color palette will unite the spare elements and direct the viewers eye but in the wrong ones it just might send them into a violent and uncontrollable rage let's look at this landing page as an example if you are both angered and confused then I've done my job there's so much color going on it makes it very difficult to focus let alone understand what you're supposed to do but for a website that's a problem I close that tab in less than three seconds and then go rage tweet about it into the empty void of the internet but what if I told you that with a little work we can transform this page and these colors into something of value perhaps even make them pleasing to the eye the reason color is so difficult to use is because it's all about context and more color doesn't always mean better color my point is before we go nuts let's understand how to use all the colors from our palette in blue how do we do that Greg I'm glad you asked let's talk about the 60/30 10 rule think of it as a recipe for how much of each color you should use so your primary you want to use 60% of the time your secondary 30% and your accent color only 10% like most areas of design there are well-established rules to help guide your decision-making this isn't a hard and fast rule but it's a good place to start do you like examples I like examples so here's another one this poster was designed by my good friend Paul Rand ok fine we were not friends but look him up because he's dope and you'll probably recognize his work he's got yellow green red blue and a couple of neutrals all working together and that's a lot of color so then how and why do they all work so well together well let's take a look at how much of each color he's using I'd say this is 60% white 25% yellow 10% red and green maybe 5% blue and black looking at the colors this way makes a lot more sense because we can clearly see how sparingly mr. Rand used each of the colors so then how do we apply that to our crazy-looking landing page well maybe we should start by making our own color ratio here we have the color palette for our work-in-progress landing page now the first step is to figure out what do we want our primary secondary and accent colors to be in this case I'm just gonna go left to right I'm gonna group some of these colors together too so because we're using three very very vibrant colors as we can already tell using them all together in big blocks doesn't exactly work well but most points if you know what color harmony this is I'm gonna start by taking these neutrals here and grouping them together and these are going to serve as our our primary set of colors will have blue be the secondary and then I'm going to group together this pink and golden yellow and reserve these four accents okay let's let's make our own kind of visual color layout here so I'm gonna grab our primary copy this down it just so happens that I made this 1000 pixels wide not coincidence that's because it'll be a lot easier to set up a sort of visual ratio with a with a round number like that so if we want our primary colors to be 60% we just need to grab this group and then change its width to 600 because that's sixty percent of a thousand and we want this one to be thirty percent so we'll change the width to 300 lastly we want the yellow and pink to be the last level ten percent and that would make them a cool 100 pixels great so on top we have the color palette itself and in down below we've got our ratio for how to use each color more importantly how much of each color we're going to use in our layout now what before we rework our page there's one more exercise I like to do to help me understand what colors work best together and also create some rules for me to play by real quick I like rules because they help me make the big decisions up front and less dumb little ones later what we're going to do now is figure out what colors work together and I like to do that by basing it off the background color now the reason I have these four quadrants of color is because we have our primary which are these three neutrals in our secondary blue so when we're approaching our layout chances are we're gonna have one of these four be our background color because in our ratio we're going to see them the most I like to start just by placing some type in the layouts here because when you're using typography you need to think about a couple of additional things the main one is legibility and let's sort of just figure out big copy color okay so legibility wise these two are solid this one not so much we have a couple options here now we could go with the ivory just sort of invert this or the more cream color I think either those would work Blues on the table as our secondary color you know I can read it but depending on someone's vision or the brightness and darkness of their screen this this might be difficult for some people to read so I would opt for something more legible I'm gonna keep really simple and just go with the ivory or both of these now the other thing to consider is maybe we have a text link that we need and then also if we think of these as as links that sort of opens up the color usage scenario a little bit alright we know that this type color over this background works well it's clear we can read it great now if it's a link it's a call to action so we could use an accent color because that's kind of what we're reserving these for over white I like like the pink I think that works really well you try yellow but that's a bit hard to read so let's go with the pink they're over this cream background yeah for the sake of legibility I think think works best over black you know yellow could work pink could work so I think either of those are on the table and then over the blue pink stuff that's that's a really hard read I don't know that that would work I'm not sure yellow would work either it's better let's go with that I think either yellow or or white and it depends on the usage if it's like text that's sort of in line in a paragraph you know you might might just be fine using white white type with like an underline or something but whatever let's sort of use that as our basis now the other thing we can do is let's say we we have a button we want to draw people's eye to that so what we don't want to do is make it one of our primary colors we're gonna see it being used everywhere else and we're not going to know that it means something special a button I think is a great opportunity to use an accent color I think would definitely work and I think yellow would work too either one would work over this background let's see what we got over here the yellow kind of gets a little dull with this background because they're both kind of warm I think I think is the way to go down here yep pink or yellow seems to work and what's interesting is like the yellow becomes so much more bright and vibrant like it works really well it just as well as the pink in fact and over here yeah this is tricky this blue is super vibrant I think the the pink and the blue kind of vibrate off each other they they're kind of like fighting for my attention so I don't think pink is the best choice there yellow is better it doesn't kind of vibrate as much so I'm okay with that basically we're going for contrast we want to grab someone's attention so I think either of these might work cool all right so you know now we may have some little like design elements I'll call them just that we sort of you know use for decoration around things and this is where we have to be mindful of our ratio because if we start making these pink and yellow it's like the sort of D values are our use of them as accents because well they become overused and if we look at our ratio we can see if we sort of look at this layout like very small percentage of this should be either yellow or pink and we've already reserved those for these sort of calls to actions so we want to stick with our or other kind of like neutrals and maybe even our secondary color yeah yeah so this looks good overall and then I think you know if we had to really really had to we could always add like a little a really small design design element here that's yellow because as long as it's not taking up a really big space then I think it's it's okay and you'll notice I'm trying to keep the yellow away from the blue so it sort of blends in a little more with the background so if I'm looking at all these I feel pretty good about it I think we have a nice sort of set of color rules for each background we seem to be obeying our sort of ratio of color usage you have cool little accents that are don't overpower the main call to action I think we're in good shape here fan tastic we prioritize our colors we know which ones go well together while keeping our colour ratio intact I think it's time we take another shot at that landing page we've got our work cut out for us but fortunately we are smart and we made these wonderful color pairings that we know work and I'm going to use these as guides to sort of figure out what I want the background color of each of these sections to be I'm gonna take the menu first I think and just sort of make it kind of kind of neutral that's fine okay we know pink is an accent color so we're not gonna use it as a background let's just sort of mimic what we did over here so we'll change this to that ok the type is black I like that that's good this is our button or sort of call to action here so I'm gonna make this pink yeah I think white white text is where what we want to do with this button there's a lot to consider with this illustration because these colors are all over the place when we're starting to sort of like lose some clarity here but let's come back to that let's let's sort of just break down each section at a time this type is hard to read over the blue let's go back to our colour pairings I'm just gonna use this one because it's right here and I like it and we'll sort of put these experiments to the tests right this is more decorative it's not really a call to action so I'm gonna change I want to change this to blue and then our call to action is really it's really this right right here and we know in this case we have a link or call to action it should be pink okay cool so down here ready to start snacking yes I am so this is like the big called the actions and what a lot of contrast we want people to like look at that button I think this black background would be the way to go we need to work on this illustration a little bit but let's sort of like resist the urge to go into detail and just take a step back and look at it as a whole the one thing I might consider changing is the menu bar up here because I guess against white especially it's so high contrast that might be kind of overbearing so I'm gonna go with our secondary color and make this blue this is a really good start so far so good now let's tackle those pesky illustrations I think in this case you know what we what we want to do is just sort of simplify the amount of colors that we're using and really really sort of pay more attention to our ratio here because we have a kind of bright pink button as our call to action I would go so far as to say is we shouldn't use pink in the illustration at all let's really try to simplify it to maybe just our primary and secondary colors so like these neutrals in the blue and then where and if needed a little kind of touch of yellow peppered throughout so I'm gonna start just by kind of going through and cleaning up the colors and just starting to simplify things [Music] already that looks a lot better and you know I like the this little touch of yellow we can probably added a few other places in here as long as we don't overdo it it'll actually be a nice a nice little accent that looks pretty good to me it works well with everything so it's it stays within our kind of ratio all right good work up here let's do the same thing with our little cupcake not bad there's a good balance of color a clear visual hierarchy I mean hey it's a whole lot better than this thinker seems like a good time for the recap part of the video so difficult to use is because it's all about context that's true me color is all about context and use it to your advantage you need to have a purpose for each color in your palette 6030 ten primary secondary accent if you develop your own color ratio and set of rules for how to use them then your palette will work just about anywhere and speaking of things that rule did you know that I teach a course about color it's true I totally do you should totally take it we'll talk about color theory how to build color palettes using reference and we'll demystify all this crazy colored magic we keep talking about visit the futurecom slash color to learn more about it and in the meantime like sub hit the thingy do that other stuff but don't forget to wash your hands later [Applause] [Music] [Applause] that's a wrap

Channel: The Futur Academy

Views: 748,542

Keywords: futur academy, the futur, chris do, how to, design challenge, design tutorial, graphic design, how to design, diy design, color theory, color palette, coloring, color tips, color tutorial, color wheel, how to mix colors, coulour theory, color schemes, illustration, art, design, color mixing, art tutorial, greg gunn, color palettes, color palette tutorial, color, colour, color harmony, color scheme, color harmony tutorial, color swatches adobe illustrator, adobe illustrator

Id: eXcKOqviLE0

Length: 13min 41sec (821 seconds)

Published: Tue May 26 2020