Give your site a fantastic color scheme fast

hi my name is Kevin and if you're here I'm guessing you've made a website and you've struggled with coming up with a nice color scheme or maybe even working on a site right now and it's just not looking as good as it could be so hopefully with this video I can help you out we're going to look at how we can make a fantastic looking color scheme really really quickly and then we're slowly gonna build on top of it add a little bit of complexity to it one thing this video is not it's a short video it's not a look at color Theory we're not diving deep into at how to make these complex colors work together and this beautiful amazing you know just harmony of everything we're looking at how you can have a nice color scheme really really easily and really quickly let's jump into it alright so here is the site we're gonna be using to explore color a little bit and when it's a website that I've put together a but right now I'm using it as black and white so everything in it is black and white except for my images which are color and I left them in there it does give it a bit of a hint but you can see everything else I put in here is using either black or white and let's fix this layout a little bit to Center that cuz it's still a bit of a rough draft right now now the first piece of advice I would give you is do this just work in black and white if you're really not sure in a color scheme and you all notice I am in Adobe XD here that is the software I designed this with I'm not doing it in code just gives me so much faster for me to do it this way and much more visual but the same even if you're just designing in the browser the same rules are going to apply now the reason I say start in black and white is it just gives you an idea of how things are working without having to stress about color at all you just leave all your text black or if you have something that's a dark background you make it a black background and you put white on it and you can start worrying about other things like just the general layout and just getting things in place and making things look as good as you can just based on the layout itself instead of stressing about how to be using your colors because really your layout should work in black and white a lot of first steps designers will take are to do things in black and white before adding colors because colors can influence how something looks but it's not going to fix major problems it can help it can make you can improve on things if done right but your layout needs to work we're for color comes in generally speaking and the color can just help enhance or if you don't do color properly as you might know if you're watching this sometimes color can Runa layout as well so honestly tip number one is just start in black and white don't even stress about color and then when it's time for your colors this is the first real tip you're gonna keep blocking white those black and white are always the foundation of any design any design but the next step of it is to come in and just add in one color and this is this is literally how you can have a nice color palette within like 30 seconds you want a nice color palette in 30 seconds go black go white go with one color and make it a punch color so let's go look at some examples so here is a log rocket if you don't know about their blog they have some really good articles on there's some really good articles on tech here and you can see they have black they have white and they have purple they have purple going around here their logo is in purple and it's black it's white it's purple it's black it's white it's purple and you get the idea it's still black and white and purple pretty much everywhere that we go this is a dark gray instead of black we're going to get into that in a little bit but they've just stuck with the basics they've picked one color and they just went with that color here's another example from llt not someone I'm familiar with they have a fun little didn't see that when I found this but they different with green they have green they brought in their green so it's black white green they do have some brands that they're doing so you will see other colors come in they have images with other colors but anytime they're adding their own color in they're simply just throwing in a little bit of green and as I said they are using some Gray's here you know we get more and more of things that are just green black white another example here and they're getting a little bit more interesting here we have some different hover effects they actually have a gradient here pretty much a little bit like log rocket they're going with black white and purple now in this case they didn't go with black if you look at this color it's actually a really dark blue I think it's so it's close to black it's like a gray bluey color but it's effectively the same thing you have a dark color you have a light color and you have your main one and let's just say it's black white and purple now there are a few other colors that come into it because these are different brands have their own colors so those are coming in just like images normally would but anything that's with their own website it's using purple or black or white they put a little quotation marks same thing the little things here the arrows all the little details they're just bringing in their purple they have a faded out purple underneath all their icons are using that purple gradient everything is just using that and it makes for a really nice looking website another example where they actually brought in two colors and I do want to talk I'm gonna come back to this one a little bit when we get into two colors but we're gonna pretend it's only green as well and you can see that they're just pretty much using their green throughout so black white and green coming a lot in here and CSS tricks if you know log rocket I said a good articles if you don't know about CSS tricks they also have some great articles so I'd suggest them out now they have a bit more of a gradient than this hype for wounded where it's like an orange to red like it's or pink even it's a much more obvious gradient but it's treated like one color now it does take a bit of work to get a nice looking radiant once you get that nice looking gradient it acts as a color now again they don't a pure black they don't appear white as much but they're using just those colors through most of what they're doing their links are using that color anything they want to pop out even if we come and look in the articles they're using that their links are in a different color but when we hover on top we get that gradient coming in there really really treating their buttons they treat it like a single color they have a black they have white and they have a single color so when you come to these color websites it says just enter a color and they're gonna give you a nice color scheme well just enter one color don't go too crazy you know why do you need five when we really only need one and we're gonna come and see how we can use these types of websites effectively but let's go and pick one color I'm going to show you the easiest way to pick just one color and it's to find one of the images that you like I'm taking color from there honestly so I really I could use brown in this for sure so if I went in here and I just chose this to be let's get like a brownie color I could even I drop it I guess why don't we do that and then I drop from I want it light enough that we can see that it's brown so I could do that evacute right away that could become my color so actually I'm in XD so let's add that my colors and then do that do my logo whoops do my logo in that color maybe the stroke of this box the border there if I do that's into the fill right yeah so let's do the stroke of it we'll use that color the background here can use that fill my button I'll leave grey for now we'll come back to that here this background color could be using that the title here could be using it my button down there could be using it and here we could be using it you know you get the idea and all of a sudden now I don't think it's great but now I have these pops of color coming through and it's starting to really work and probably look better maybe up here I did a bit too much maybe I could leave that one is actually just pure black or something like that so there's a bit of different differentiation but basically I've come up with a pop color and I just grabbed it from like the most obvious color it's a coffee website so I'm going with the most obvious color another choice I could do instead of that is finding a color that is sort of at the opposite and the thing I have brown I know coffees brown this image looks really nice because we have lots of dark Browns dark colors and then the super nice turquoise in the background so why don't I try doing that so I'm gonna edit this color here I'm just gonna I drop it let's go find that turquoise I think I'll go with that this is anything that was Brown is gonna switch over to that color now and now I can see all my colors switching over to that and I think that actually looks really nice I prefer that for my color scheme at the moment knowing that I'm gonna come in and add some extra things to it but even if I just left it like that I think it's looking pretty nice I think that looks great it works really well with my Brown now if you're not sure about you know I went with turquoise and brown because I know they work together if you don't know what colors work together colored adobe.com they give you a color wheel you don't even have to really drag anything around on here if you don't want to I'm focused on the fact that I'm not a brown which is in the oranges opposite my orange are these colors over here I'm getting into my turquoises and all of that so but if you're really not sure you come over here find the color you want I want that but I want it to be darker so I fade everything down and I just switch it to complementary you can see it's going right into its colors that are opposite they're always going to work so this and this they're going to work it's sort of what I did but I just went with a darker version of it because I grabbed it from an image and I thought it worked really well in my image so if you're grabbing from an image that looks nice the colors in the image are probably good now where it gets more complicated is when you want to add more than one color and the big thing is adding more than one color we already have three and you have to think about that for a second we have black we have white and we have a color you might be going Kevin black and white aren't our color they're part of our color scheme right now so you have to consider them as part of your scheme don't get technical with me as far as our color scheme goes we have black we have white and we have my color so because we have we have black we have white anyway we have my color we're up to three colors already and it's a little bit like when you're trying to choose fonts you have one font you can make that font probably work everywhere if it's a easy enough font to use you use bold you can use light you can do different stuff like that if you'd like a video that looks at how you can choose fonts let me know in the comments below and it's something else I can definitely take a look at but when you want to fonts that becomes a little bit harder you have to think about how those fonts are working together do they work together then you go up to three that gets even harder because now you have a lot you're adding more and more variables each time you could technically make something work with ten fonts I've seen some really cool posters that just go crazy with fonts I did something back when I was in school for the cover of a the font book that had like the library it's a book that just had thoughts in it so I wanted to like use as many fonts as I could on the cover to be a long time to do pretty happy with how it turned out but it took me a long time to do it just because getting the more fonts you have the harder it is to work and it's the same with colors and it's one of the things I hate with these color scheme sites if five colors what am I doing with five colors that's too many colors to really work with so even this site which I really like and what I'm gonna do actually is let's grab the color out here and plug that in and get a color scheme based on that so here it gave me this sort of generic gradient and I go okay well look that looks pretty and well this this gradient looks pretty too and look at that and well here's this is sort of the one that I'm going with now right I have my brown I have that blue huh that that's kind of cool that the twisted spot pilot by he's pretty much just taking a complimentary colors the way it generally works so it's taking that it's doing the complementary color and then there's variations of that color so a nice way to work so my problem with this though is look I mean okay here's another the cube palette Li there's lots of cool names switch palette again it's the complementary but it's coming up with all these color schemes that have lots of colors in them it makes it hard to work in it makes it especially these where there's a whole bunch or it adobe does the same thing let's just go to Explorer because a lot of time you find these really nice ones in here Oh they've changed this completely okay there we go I went to color themes and then I went to most use this month just to get some and you get these types of themes are these types of themes that look amazing they look fantastic or even like this one looks really really good but again there's so many colors in it you start getting lost and you don't know where to work and that's normal that's why we start with one because in truth one is three already so the more colors we want to add the more complicated it gets and that's where I want to come back to this site for a second because looking at this they have two greens I don't really like there are two greens sorry a paymo I don't find it works personally the bright green and this turquoise I find they're the wrong they don't blend together well enough and it creates this weird sort of thing so especially when you get to these icons and stuff I don't know I find it's a little bit confused so what I would suggest doing in this case is before you start getting into multiple colors is actually let's come back to my color space because I do like some of the stuff that you hear where you get into these where you I have like this this color that's really jumping off or actually I'm gonna come down a little bit more smooth I want here we go the grey friends or the let's even keep going wow they have lots I want ones that don't have a lot of change here we go the shades or the random shades things like this becomes so much easier to work with because it's a similar enough color to your dark to to your main primary color that it gives you some wiggle room and some different things you can do but it sort of blends in you know it blends in with the color that you already have so let's say I grabbed this really dark one down here and maybe I'm gonna use that all the way down here for this dark thing all the way at the bottom and I know that those two colors are gonna work and then maybe I could use those in a few other spots too I could come in here and all of these things I could set up and I think I had that as a different color but maybe I bring in this color onto all of those right there just to have like it's still really dark I wouldn't necessarily do it for my links so maybe on my links I want them to stand out more mm-hmm these two colors are so similar the one thing I would suggest not doing is taking two colors that are almost the same they're almost the same it's probably not good but maybe my links I want to come in and set up a color whoops said of a color like that so it stands out just to give an idea of different things that you can do that might work really well over here maybe my button to make my button stand out more the background color on this I could give it that color as well it's not really popping but I'm gonna add that to my colors anyway maybe I come in bring my these in so again they're not using the same color it's something that's going to work I have to be a little bit careful because the contrast is a bit low on a dark background but I know by using these lighter or these darker colors that it's gonna fit with the blue color that I've already used and I know it's gonna be super easy and it's gonna be effective and I can work with it really well what I could even do maybe is let's save this dark one here as a color as well in my palette I could come in and give this whole thing that dark color and then maybe on some of these things I could actually give it the lighter color and maybe that's not actually light enough so let's just come in and we'll add another one where I'm gonna stay in the same area without going to a color theme site and I'm looking I want to make sure that my contrast is still high enough but I'm coming in and keeping with the blues but I'm coming in with a nice light blue there that works on this dark background so you can add that in as a new color and I reorder those I can good just to sort of go by the the order of light to dark and then maybe even on these I come in and give each one of those so now I'm just going in on a few details and looking at things I can change and how I'm thinking where do I want people's eye to look like what do I want them to look at or how can I separate the different pieces of information through all of these to get them to stand out a little bit so just playing around with it a little bit like that and it just adds an extra layer here by bringing in more colors did I need to do that no I really I really didn't need to do that it looked good I could have left it exactly how it was and it probably it was and in my opinion it looked good and I was happy with it and that's why if you choose one color you're good to go so now I've come in I've added some variations of that one color and I think it really by coming in and adding these variations of one color though it just helps add a little bit of interest to your site and I think that's why a lot of people want to add colors because they do want to add interest to their site I think on this one maybe even I could come in and give it the darker background instead just to get these things to pop off a little bit more and then use that really light or was I already using the really light color on those I think I can leave the darker sign up there and it's looking pretty good and there we go so it's starting to come together as I said it's adding a little bit of details now and adding a little bit of extra dimension to the site just by playing with the variations of that one color playing with your shades playing with your shades and tints and that type of thing here even let's zoom in on that a little bit we can come in and say that this should actually be my light blue and I was playing with opacity before but we can leave that all the way up maybe my social links get a different color let's go with the light one just again to break the information up a little bit and make things a little bit more visually interesting but now you're like Kevin I really do want more than one color and you know we have shades of my color tints of my color but we want more than one fair enough okay so let's go back to here now you could definitely come up with something and I didn't look at this before on on this website where they actually have like all these different colors that are throwing up here and they all tend to work well together I'm not getting into that in this video I don't want to get into using like ten colors on a website if that's what you want to do you need to understand color theory as I said in the intro this is not a class in color this is not a video on color theory I want to look the simple way you can make an effective and nice color scheme so the easiest thing to do at this point is decide do you want something high contrast that really punches or do you want something that blends in a little bit if you want the high contrast punch you find these things the complementary colors the ones that pop and they're completely different or do you want something more like this that blends in a little bit more and you make that decision and you stick with it maybe you really like this green you go oh that's fantastic telling you now it might be harder to use effectively it starts coming into this type of world where it's two colors that look like they should work well together but when you start overlapping them or using them in different things there's a little bit too much similarity between the two and I think their tones are a little bit off it makes it a little bit harder to use whereas if you have a big difference between them it's going to be a lot easier to use because there's a much more bigger distinction between them so maybe you like your purple I'm gonna go back up I sort of want to go with Browns but I'm a little bit worried that the Browns not gonna be enough but I'm gonna go with sort of a brown like this to start with and let's see what it actually ends up looking like so let's say we take that brown color I got and we bring it in here on my border let me try it out hmmm not as big of a fan so I'm gonna undo and part of the reason now I'm just gonna look at this why that didn't work as well as we have the brown here and then I had like a different Brown on this I think it would actually work better on the titles if I brought it in there and that actually works because this this turquoise is creating a bit of a contrast with the brown that's coming in here but then I can bring that Brown back in so let's add this to my color scheme and I'm gonna edit it a little bit because I'm not too happy with it so one thing is bring it in and see what it looks like and then if you need to make changes to it don't be scared of changing it so I could go into the oranges now and I you know we saw that there was or the bright oranges and maybe we can get those bright oranges to work and this is where if you are doing this in code instead of doing it in a GUI like I'm doing right now if you do it but using custom properties it makes your life a lot easier because you can change like a couple of things and you see it a little bit like I'm doing now I change it in a few spots and then I can change the color in one place and it changes throughout the whole site so maybe I do want to bring it in as more of an orange I think it's more interesting let's see what happens when I make this button that same color you know that does really pop out against this dark blue so that's a oh hey you know what it's working you can see a lot of the tones from these coffee images are actually coming into that orange too so it is definitely using my imagery a lot and I think there's nothing wrong with that maybe I'm actually going to come in and give this this background color instead but we lower the opacity way down it's always an option obviously it looks really bad now so we need to actually select all those and go back into my colors and for now I'm just going to do black just to say they give you a bit of a different idea of how you could use something sometimes just by dropping the opacity down it can really help it's really separating the two pieces now now I don't think I'm gonna stick with that maybe I could even just come in on this it does take some experimenting huh don't like it do I try that with a different color maybe so maybe I could come into here and try what would it be with the dark brown can't see it no it's too classy or maybe you really like it and then you stick with it and then you add that to your color scheme to use in different places I think it's too classy I'm gonna go back to how I had it before but if you really liked how that looked it could be something you keep for that maybe over here it's something that works and then I could bring it back down over here into my button whoops and get it set up there and I probably should have just changed changed my button component because it would have changed both at the same time but alas I did it the hard way and maybe even my link then could be coming into those colors just because this sort of becomes an orange component or maybe you like leaving it like that maybe the social media links I don't think they're gonna look fantastic because they're sort of blending in now and this is an important part too is you want to keep an idea of contrast and the contrast is much easier with one color as well because here I have really dark I have a medium for the bigger bolder fonts and then my white there which is very high contrast here it's this nice sort of mid-tone blue so if I have a mid-tone blue and then I bring in the orange on it doesn't quite pop off as much I see it but it almost hurts my eyes when I'm looking at that personally like it my eyes seem a little bit confused about what's happening it could be a lot worse if I tone this down a little bit and it got into two similar of a tone it can really get lost completely and this deals with I need to make it a bit darker probably too oh we can do it all here but when you know if you're you're really getting into these places where the the saturation the contrast all the things are almost the same the image is it doesn't pop enough so this is where I had a light blue it's probably gonna work better as a light orange or if I go into the really dark Browns but I feel like that's not gonna be dark enough so if I really wanted to use the orange I think I could do it in this case I don't really think I'm going to one thing you'll notice is usually and you'll see I'm using the orange really sparingly here there's not a lot of spots maybe I could use it up here but I don't think I could I don't particularly like it up here maybe I'm gonna try one thing where I keep the blue there so I could try something like that maybe you like that more because it really makes that pop off on the second line but I think I'm just gonna leave it like this I'm a fan of a little bit more understated designs personally you'll see I'm only using that orange color in a few spots because the whole point of the orange color is to grab my attention right I don't want to distract I don't want it to be jumping all over the place I'm here I see that and then I get okay here's my title I'm interested I read it I'm not interested I skip to the next title because it's popping off it's dragging my eye it's jumping it at me I go down a little bit boom my eye comes down to here I see it's a signup form I might read this text if I'm interested if not I keep going boom my eye drops right to here I'm really using this color to highlight things that are important I'm not trying to throw it all over the place and that's the main thing you want to keep color in general the reason it's hard to use color effectively is because people try too many colors and they're all fighting with each other it's the whole principle hierarchy where you want to lead the person's eye but if you try to use seven colors all these colors are fighting for your attention you don't know what to look at because everything's popping out at you it's why using one color black white and one color to get your attention and then you go okay now let me try variations of that color we bring in the tones it helps lead the eye a little bit it helps give you a bit more sense of hierarchy through color and then if you do want these pops of color you can come and bring them in and there's different ways of doing it but be very careful the less you use a color but you put it in a few important places and you're consistent with your use of that color it can really make a website pop and shine and you're leading and you're helping the user experience you're leading the person's eye through the website and you're making their life a lot easier now here my channel we are usually doing coding stuff we're in CSS HTML sometimes even some JavaScript and we're making stuff happen obviously this was a lot more design oriented if this is your you know you want more of this please leave a comment down below to let me know that because it's gonna you know if a lot of people are interested in this I will definitely keep putting out more Design content on top of what I'm already doing I'm not going to completely change this channel from one thing to another but if a lot of people like this type of content I'd gladly produce more of it and maybe this is your first time here so you don't really know the other stuff I've been doing and if it was your first time here and you really did like what you saw and you're still watching now I'm guessing you did you can please consider hitting that subscribe button and this is the end of this video so thank you very much for watching a very big thank you to my patrons for your support you guys are absolutely amazing and of course until next time don't forget to make your corn in the Internet just a little bit more awesome

Channel: Kevin Powell

Views: 151,887

Rating: 4.9549103 out of 5

Keywords: Kevin Powell, tutorial, html, css, adobe xd, color scheme, website color scheme

Id: mq8LYj6kRyE

Length: 25min 55sec (1555 seconds)

Published: Fri Nov 29 2019