Bad at Picking COLORS? Let's fix that - RAPID Color Scheming

today we are going to be rapidly choosing color schemes and applying them to our interface like a boss hey everybody what's up Gary Simon here so today we're gonna talk about color schemes once again and this time I created a UI design and then what we're gonna do is we're going to use a service this is called colors inspo calm we're gonna use a few of these templates I'm going to show you exactly how I would use these in order to create really quickly awesome color schemes for your UI designs so if you're somebody who has a hard time coming up with color schemes from you buy your own well this is gonna be a great video for you so as always make sure to subscribe and let's get started before we begin the node makes it easy and affordable to host your website your portfolio your online store and more on whatever technology stack you use getting up and running is fast and easy with one-click app installs like WordPress and Drupal with back-end access to your server customization and scaling options are all but limitless if you just need something small like an online portfolio to showcase your work Linode has you covered if you need to manage tons of clients websites and reliably serve them to millions of visitors lonoa can do that too so sign up using the link below in the description to get $20 in credit on your new alone owed account alright so this is a look at the actual UI design that I created it's kind of like a hybrid high fidelity but also kind of skeleton UI I'm kind of lazy I didn't finish out everything but you get the general gist it's a pretty complete UI enough for us to experiment with what different color schemes look like so I'm gonna duplicate this and I'm just gonna move it over a little bit more and the idea here I is to use some sort of colors service I'm gonna link I'm going to try to remember to link in the description a bunch of of these color theme color picking resources and now I'm just going to use one today because it's really quick and easy for this type of demo and that is located at colors in colors inspo whatever calm it'll be linked in the description and it's just really simple I you can just grab any of the color code just by clicking on this and it copies the hex color code of it and then you can start to integrate this is the one that we're going to use I want to make sure that this particular window is always on top so I just got this cool program I write here where I can just pin any window on top so I can work while looking at these color schemes all right so I by the way that app is called desk pins and it's free so what we want to do this is the second one we want to just basically start experimenting and I just I kind of want to stick to the same little color palette for each one of these and we're gonna do like four of them so well the first one I'll just do the very first one that's listed right now which is this one and so I think what we'll do is make the background maybe we'll go for like a darker version so we'll copy that color code and then I'll move this over and we'll paste that in alright so still pretty ugly and that's because now we've lost some contrast with the text on top I think with the sidebar you and by the way when you do this you don't have to use these exact values I you can use a lot of different things like we could say okay we'll use that color for this sidebar and you could completely do that me I think I'm gonna just do something like this I'm gonna grab this color then this is something I commonly do I will just raise the up Thea the lightness or lower it just slightly like that alright so we're coming along so far now what I'll do next is we'll take I let's see here let's make this all white for now actually having this pin is a little bit annoying because it's going over everything and let's work on these these are these elements right here so let's give that a certain color so we can go back to our things see if there's something on some shade or something but no these are really all quite different so when it comes to these type of overlays we want to kind of stick within the same values as the current background so if I take them all and then maybe this time we'll go darker not too much darker maybe right around there that's good all right so that's supposed to be a part of this group there we go so now make these all white all right so now it's starting to come together and it's looking quite different already from the original but we're not just done yet so this eye color scheme did have like a Cossack you you know complementary colors like this one we could probably make like this icon that color so paste that there we could probably also make this and these let's group those up that color as well and then in that case this is unfortunately sitting on top let's make this all the way on top here okay now that's white I then looking at that color scheme again which my toolbar unfortunately went away I we could probably use maybe this color as well so we'll try let's get in here and get that and this this this so all the headings basically let's try making that color well what the hell it didn't work there we go all right and let's see oh this little icon there there's like a down arrow icon we can hit the I key for the eyedropper oops there we go we'll do this and then finally we'll take this the border we'll make that color and we'll get in there into those fills and just make those fills this background color so look at that pretty freakin cool for just literally a couple minutes while using you know our color picker guide right here now of course we didn't use the grey eye again you can only use maybe two colors out of these to really come up with something that's interesting and then also experiment on your own so let's try another one so let's move this over here so the next one we'll try let's see will well try this one this looks vibrant right so let's see what we can do with this let's go a little bit crazy and we'll take this here and make this our background color that might be quite dangerous on your eyeballs though so paste that in see now that is just too bright I don't like that so we can just move it over a little bit in terms of lightness all right so that's good right there next up we'll go ahead and take maybe all of our type elements make a black and then we'll come and take these elements right here which is these are all a group if I move this off and again we'll use the same technique we'll get the background color and just go very slightly darker look at that so this is almost its own color scheme already I what else did we have here so that color scheme had a few other colors here this one is real similar actually to the current one that we have you could probably go with this one or maybe even the blue but I really like these colors together already I mean the previous color scheme along with this sort of pinkish color I think works for a well so then we could just take maybe this we actually this blue works too but if you really want to minimize the amount of colors and really make it pink you could do that as well now I will take this I don't like those being filled in with some blue color you can make those white even if you wanted to as well I think we'll do that and look at that three unique color schemes in like a few minutes let's do another one so the next one we'll try let's see here where's my app that there window there we go let's try doing for the next one how about this one kind of reminds you of Facebook colors so let's make the background of this one kind of like this neutral kind of it's not real dark it's not real light kind of like our other examples of been I will take this blue right here so I'm gonna copy that we're gonna make that oops we're gonna make that the background color now you may be thinking no way this is gonna work but trust me it will work I what we can do now that same technique we'll take this here for the containers the same color make it darker very subtle I mean it is so subtle you barely even want to move your mouse all right and then we'll take I all our type elements let's just make those white to make sure they contrast very well now this right here this color I mean they do contrast pretty well but I think not quite enough i what other colors did we have to use here from that palette we have this color let's try using this for these primary like call-to-action buttons and icons so let's copy this and we'll go paste that do the same thing here and then this sidebar that's just too crazy looking I think what I let's see what that I yeah we'll do this one right here this should be good for the sidebar it didn't work and you don't even have to what I could do is just I come down here there we go it's roughly around what the same value of what that was anyways to learn more button we can I have a stark contrast checker which I did a video about this you can do check my youtube search for that a rapid contrast checker so right here if you select the foreground element based on the element behind it ooh that's not right I don't know why oh it's because it's a part of a group right now so if I right-click it's not a part of a group that's very strange because this is its I this is the background color it's not it's this this version right here sometimes it doesn't work very well unfortunately I think maybe if I ungroup this this will work no what are you doing man well that's no good all right well what we might want to do is change this to maybe even um this side heart color right here and I bet you that has a good amount of contrast right there and it does from those two colors and look at that I mean this is just freaking awesome what about this here though I'm not sure about this color it kind of doesn't contrast great so let's just experiment on our own with this I mean we could try this that works but then we lose some color I kind of liked having other colors so we can just stay in the same area up here and just try to find a color that really contrasts well I think rating that value like if you go down you lose that contrast you go up and you kind of get into a we'd spot but then if you go up too high then your eyes hurt with the red and the blue so it's just right around here that looks like it'll work pretty well but again we could come down further what about yellow I mean that works this green will work green and this sort of blue works so choosing your colors you know you have fun with it you just got to make sure that it contrasts well with all your other elements so this I think this time will opt just to perhaps do that or we could just fill it in like that I think I'm just gonna stay like that right around there and by the way we could take this and we can say okay maybe we want to go lighter like that and that will really increase your contrast while still having some color look at that I mean this is so cool just how we become I think this is my favorite though I mean there's something I actually this one though maybe we should go dark with that all right and then get in here real quickly these had opacity on them so it was making a look funky take the opacity down on all these yeah just so cool I'm let's do one more and let's do a crazy something crazy something that's really different let me go back to our let's go over here my dog out there is barking like hell let's try something crazy like this like how could we possibly make a UI element with some of these colors it might be really difficult but we'll see so let's grab I think we'll grab I will grab this one the very bottom one and that could be the background so with this over all right I yeah this is going to be a good one now what about for the sidebar so the sidebar we can try choosing I maybe this one so it's like the maximum contrast between those two at least in that palette all right so I could see something possibly working out here let's take all this now let's do this first to the back of these panel backgrounds again I'm gonna do that same technique you don't have to do that I just really like doing a okay so then we'll take this stuff make it black and then maybe this border we can make this color we can take these and either make them transparent or white I think I'll just make it the same color as the background there the icons probably can be that purple as well so really I may just end up only using two colors from that palette but that's okay it'll work just fine learn more I think this time we'll make this one white so it'll contrast more okay and there you go that's definitely a more for me I wouldn't probably ever have a site that's just this is the only option this would be more of like just an interesting fun color scheme like if you allowed people to choose color scheme on schemes on your site so now what we can do is I can i prototype these all and link them together real quickly and then we can see how the interface has changed between each other just by a quick click look at that so cool awesome awesome stuff alright everybody hopefully you enjoyed that you learn something new I'll make the XD file available so you can experiment on your own if you wish using that same template now as always make sure to subscribe and I'll see you guys soon goodbye

Channel: DesignCourse

Views: 318,078

Rating: 4.8777804 out of 5

Keywords: color, color schemes, ui design color, ui ux color, ui colors, colors for websites, colors in ui design, color scheme services, colorsinspo, gary simon, choosing colors, color theory, color psychology

Id: s9p3nF4rFaU

Length: 17min 3sec (1023 seconds)

Published: Mon Jan 13 2020