Creating Color Schemes EASILY: The Tint/Shade Method

[Music] for those of you who have a very difficult time columning up with color schemes i'm going to show you a really cool tip that's going to make your life a lot easier in terms of choosing a color and also very quickly from that color coming up with a color scheme consisting of different shades and tints and so i'm going to put myself to the test by using a random color picker and also a random option chooser from light or dark mode so it's going to be everything's going to be random i'm going to show you that i have all the confidence in the world to make anything look good using this technique so as always make sure to subscribe if you haven't yet and let's get started now just wait one moment if you're interested in this video then you might be interested in my ui design bootcamp at scrimba.com at scrimba you don't just watch videos no no you're actually able to modify code in the browser while you learn my course on ui design features over 100 lessons that are specifically tailored to help you become an awesome ui designer and they're packed with interactive challenges so make sure to click on the very top link here in the youtube description to get access to my bootcamp along with many other courses for a very low monthly fee all right so here's the design that we have um it's going to give us plenty of opportunity to experiment with these colors and all of that good stuff um so what i will do is first i'm going to print screen this and just copy this section of the design just so we have the original here and that way we can kind of just do this a few times so we get some practice under our belt we can we can compare each iteration that we create all right so in order to make this as uh unbiased as possible i personally have my favorite color schemes as a designer i really like you know the saturated dark slate blue look um i'm going to use a random hex color code generator yes they actually have that if you have if you search for any type of generator online somebody made it um so if i just click generate color there we go we're kind of going into purple say purple pinkish slash some something in there and then we're also going to choose whether or not we're going to be forced to use a light mode or a dark mode and i'll show you well what i mean by that in a second but let's click spin real quickly and see if we're going to be creating a dark or light mode because this technique works with either or we're going dark wow look at that look at that crazy animation very cool all right so we're going to copy this and we're going to create a dark color scheme with this purplish it's not my favorite but you know what we're going to make it work so the very first thing we're going to do is is identify or not identify but establish the background color in which most everything's going to be sitting on that's the most important that's what really sets the stage so for the fill we're gonna go ahead and uh first we're just gonna paste in that hex color code that we created now notice where this little circular picker is in this color picker area you generally want to avoid uh sitting somewhere here in the middle in this spectrum somewhere this is obviously like pretty much fully um saturated with the hue desaturated is over here more it's more toned as it's called i but it's still it's either way in anywhere in this area is going to be kind of like a generally speaking one that i would probably personally avoid i either like going really light or i like going darker with it now we have been required to use a dark color scheme so we could go all the way up over here where it's fully saturated with color um that's this this method would still work um we could come over here and kind of make it a little bit more toned where we're introducing gray into it and i think that's what i'm going to do either way over here will work just the same with this technique it doesn't matter so this is going to be the color that we are using right here all right so now what we can do is let's start defining our other colors so this blue not really sure if it works well so we're going to stick with the same hue and so to do that we're going to take our color picker choose that so of course it's it's hidden because it's the same color as the background but we're going to use this color picker to really uh beef this up make it brighter or in other words add tint and then also we're going to saturate it more we'll say this right here is our primary color because it really contrasts well it's obviously the same huge just it's just obviously tinted and it's brighter so let's go ahead and i will leave that there um let's let's figure out what we're gonna do with these containers because they look bad right now uh gray on uh any sort of color like a hue just pretty much never looks good um so what we'll do is we're going to double double click here and we're going to change this color so first of all we'll take just the same approach what we did with the logo we're going to get the same exact color here now of course the containers are then hidden and of course you don't necessarily even need to give these containers a background color but i'm choosing to do that so what we'll do is we're either going to make them slightly darker or slightly lighter or in other words we're going to add tint or add shade all right so if we make it slightly lighter we're just going to push this up just very subtly just like that so the goal here isn't to create a container that's a real high contrast i which you can certainly do as long as what's sitting on top of it like the type elements are really opposite it really contrasts with the background it's sitting on but this is just one uh way we can tackle it and perhaps i'll show some some other ways here going forward and i really like that this the containers themselves they're like watermarks they're not supposed to be high contrast but they're visible enough to where it gives some semblance of structure in the design so we could do the same thing here we'll get this and then this one right here we if let's just say for the sake of the argument or the design we wanted to have a little bit more contrast uh what we can do is take this color but we'll boost it up just slightly more because maybe we want to direct people's eyes in terms of visual hierarchy to this give us your email section now of course when you make changes to colors in the design you have to make changes you know to to many places like over here we have to fix that let's let's change this right here and because that's the old primary color and we'll use this one right here now things are starting to look pretty decent um right here well what's the background it's sitting on okay so it's this right here so we can change it to that color and we can perhaps make it lighter we can make it darker pretty much up to you we could give it the background color right here and then this this is real gray kind of a little bit of blue in it it doesn't really look good let's say we'll go lighter with that so we'll come up now again if you don't want to go too light because then guess what you have contrast issues with the important type join up and also the icon so you don't want to go too much and right around there is fine now finally i also see there's this members text and we could choose to make that white actually it looks like they're not even though they're components that they're not i all changing what i'll do is just select all these we will detach instance and also ungroup so now i can just select these real quickly and like i said we can make them white um we could give them some of the color that it's sitting on just like that so we've added a uh what do you call tint yeah just made it lighter and this works completely fine using that oh these need change too by the way so again we'll take this and we'll just bump it up right around there and there we go we're going to leave the home white just to indicate that it's the currently selected page and there we go let's do this one more time except this time we'll use a light color because we've used a dark color scheme so we'll do a clear field generate all right now you know what that's pretty much the same color let's make this a little bit more different red oh god this is going to be tough well let's do it all right so we got that we don't have to use that because we know we're going light already all right and what i'll do once again is just because i have components and i don't want to have to reestablish them i'm just going to paste this right here all right there's our color scheme all right so let me go back and get that color code all right we're going to go light this time so we'll take this our fill so light means we're coming up here all right now just so this this background contrasts well like this canvas select it and we're just going to go darker all right now i can clearly see that's one of the things that frustrates me about adobe xd is it's just uh it doesn't let you change this background canvas color it's so frustrating anyhow um so let's continue on so again we're going to take our type or our logo all right right there is good like uh you obviously have a degree of subjectivity in terms of you know where you can go like up here obviously not enough contrast this is objectively bad if you had your logo with that you know little amount of contrast we can come over here though this would be good this is good obviously so we want some color so we're going to come up here to the upper right corner just a bit all right so now what that means is we're going to change this as well to that color so we're going to get that all right we're going to change this background all right we're going to get that and we can come down make it a little bit lighter now you could go opposite let's just go opposite we'll make these what do we do here did we make these lighter or darker okay so this is lighter than this um we can go darker then so let's uh once again let me change this we'll get that and we're going to go darker right there i kind of like that so again we'll take this and get that color here now of course we have the text right here we're going to give that just maximum contrast there um we can give this black to we can make that black that's perfectly fine another technique i is we can grab the same hue that's sitting on and we could just shade it and that way it has a little bit of this color that's integrated but what happens is instead of it being these two elements being black this one is obviously not black but it still contrasts enough uh for readability um and it also increases what's called the visual hierarchy or the typographic visual hierarchy so it just it creates further separation between these two type elements right here all right so after that um [Music] let's change this real quick again we're coming down here we're choosing this this right here should be all black this may not these may not be different enough from each other so i'll probably come up just a bit right around there all right so that's good and then i all this stuff we can make black and then we'll take all this and again we're going to use the same hue in which it's sitting and we're going to come down and then we're going to take this we're going to make that black as well and then we're gonna also i have a dog that's like barking downstairs hopefully you don't hear that too much and then finally we'll take this element we'll get this color make that stand out just a little bit more and contrast more from the other elements and then make that black again this looks that's way too much contrast there in my opinion so we can come up a little bit darker grab this that it's sitting on so as you can see once you get you know kind of familiar with this process you can go pretty quick um and let's grab that color code right there and we'll just apply it to this icon all right and then we'll use our red well we don't have to use the red i it wasn't before so what we can do is take this and lighten up and then these two elements or this this element first will be black and then this fill will be black as well so let's compare this real quick i'm not sure if i really like this button i the colors kind of it's not working out for me very well um so let me experiment because i'm not really sure what i want to do with this so if we take this color here could go darker but i'm not sure if i really like that just because it's kind of competing with these red where it says read story um maybe i'll do something different like i'll get rid of this we'll give it a stroke instead um this is a possibility i'm not sure if i really like it that much hmm oh well i'm kind of splitting hairs here um i think this is pretty good for what it is this probably should be all the way black there we go and there we go so um actually this is really irritating me here too uh let's change these to a stroke color there we go there we go okay and there we go so as you could see um this method works pretty decent this is still bothering me the designer me is like dying because i don't i don't necessarily like exactly how that turned out i think making this lighter makes more sense it increases the contrast of the type inside um yeah this is this is this is good for now though all right and so here are three different iterations using this technique two of them dark mode i really like this one a lot this one is still solid oh wait i forgot i didn't change the blue right there so it's a little bit strange yeah but you get the point um it's all pretty all solid here this might not be quite enough contrast so we can just come down a little bit darker and yeah there we go so i there are the three designs obviously this is something you need to get the hang of it practice it a bunch and eventually you'll be able to develop an eye for choosing colors in this manner all right hopefully you enjoyed that if you did make sure to subscribe check out designcoors.com which if you're watching this the timer release is i the pre-launch is here september 14th definitely go to designcourse.com enter your email to be notified when that happens i'll see you all soon goodbye [Music] you

Channel: DesignCourse

Views: 14,173

Rating: 4.9083233 out of 5

Keywords: color schemes, web design color schemes, colors, ui design colors, choosing colors, picking color schemes, color scheme picker, colors tint and shade, gary simon, designcourse

Id: rUTuvDyFHwo

Length: 16min 34sec (994 seconds)

Published: Thu Sep 02 2021