HTML/CSS: Color Selection Made Easy!

1. Introduction: Hello, welcome to color for CSS.Has the mystery of color alluded you and you're wondering how to make your designs a little bit stronger.In this class, you're going to explore different systems of generating colors and how to use them in your code. We're going to explore mood boarding. We're going to explore color scheme generators.Then we're going to put it all together in Dreamweaver using your inline and external CSS. I hope you enjoy. 2. Color Scheme Generators: Let's check out color scheme generators, I love color scheme generators. I use them not only for my web design but for my print design as well. It's just a nice way to get our thoughts in order about our brand and our client before we actually jump into the process. I like to count this as a part of the research process, and I tend to do this in unison with actual sketches and idea generation. I know where the project is going to take us. Now on our blog or on my blog, which I do have linked in our course projects below, I made a list of the top five of it to show in class and took my students and the ones that I feel my students connect well to. The link is there, and if you don't want to use that, just go ahead and Google either color scheme generator, or top 20 color scheme generators. There are so many colors scheme generators out there that initially it can be overwhelming. This is the watered down top five and you can keep exploring if you so desire. The one I like to start students with is actually Palatton. This one is nice because I'm going to call this the more scientific version. You can be pretty exact with this one. If we were looking for a blue, maybe slate blue for our main site color. You can see, you can adjust the shades accordingly if you need that to be a little bit brighter, etc. You can tilt it to which ever way you want to take it and this is going to be our monochromatic palette. When you hover, you can see it has the hex number 446188. Now, what I will sometimes do to make life easier is just shift. I'm on a Mac, so Shift Command 4, and that gives us a crosshair. I'm going to take a screenshot of that so I can refer back to that. I can bring it into Photoshop and sample those colors or could use it in a print project if I'm a print designer instead of a web designer. What I also do as a backup is, I'm going to grab my pencil, right down that main color, 446188. I have a color notebook that I work with and it's always on my desk. You can use a Post-It note. Just write that number down so you can refer back to it. I'm just going to say for now, I'm just going to grab that main color. If I'm going to work monochromatically, I can grab the rest of them, but let's check out what more they do. Here's our monochromatic. This is going to be our adjacent or our analogous. You can see there's all of our codes. If you'd like adjacent and you want to use that for your system, grab it. We have our triad and this one has really nice contrast, as you can see so you get a nice harmony with it. But still have those contrasts points that we need for giving our page a sense of organization and hierarchy. Then we have our tag trad or our squared, depending on your foundations instructor, those two terms are interchangeable. There's one that's pretty decent as well. You can see it also gives each of our tints and shades. Also, if we wish to bounce off of that, we can, we can share our palettes if we so desire, or we can keep adjusting even further. I'd like to work with triads typically. Let's just start with that one. There's our main color and maybe this is going to be, maybe the yellow is going to be our backer color. I'm going to write down back. It's going to be CFB85E. Then maybe the peach color is going to be our div container. I'm going to write down div CFA85E and screenshot so that we'd have those colors as reference. If we click on our presets tab under our color wheel, you can see we get more options. You can go with lightest pastel. You can go bright pastel, shiny, full color, light pastel, brighter pastel, the darker colors. You can go the grayish writers. There are so many adjustments that you can keep going in here, just keep going. We can also add complements if you so desire so that you get an even broader range. We have our blues and our oranges. It's going to get that balance factor and give us a little bit more emphasis. Palatton is a nice one to start with, and then go back to our colors. Because it's going to give you a lot of options and they are going to be, since this is more color wheel based, really nice and harmonious for your design. Let's go ahead and look at the other ones. Canvas has one. Let's check out Canvas. Canvas' interesting because it will take a more a psychological approach to color and that just what we just saw with the color harmony. This is everything you need to know about colors. Let's click on purple. It's going to tell you what it's about, where it sat on the color wheel, what does it stand for. More on the meaning of the color, and what's nice is on the right you have your color combinations. You can, of course click on more, but let's just grab the first one so that we can see it. This is a preexisting mood board that someone has done. You can see the colors that this selected with it and the hex codes are of course with it. You can go ahead and write that down or do a screen capture. There's also color supply. This has a really nice interface and it's a similar version of concept with the Palatton. But what's nice with this one is it's going to give you samples of what your CSS/web design is going to look like if you use these color choices. It does help you make your decisions a little bit easier. If you want to orange or Germaine, what would that look like. As well as take it back to complement. Maybe you want it to be a little bit brighter and tone so you can see, you can shift each of the emphasis points to this, and it's going to give your code for the main ones also. As usual, screenshot, write it down, whatever your system is. Go ahead and try that. Just explore each of these, see which one works best for you. You will find one that you have a tendency to refer to time and time again. Like I said, there are so many out there, do a Google search and find even more. 3. Adobe Spark and Canva Moodboards: All right. Let's go ahead and check out mood boards. There's going to be two that we go over. The first one is Adobe Spark, and the second is the one through Canva. Both of these are free for you to use. For Adobe, you will have to make a login or use your Creative Clouds so that you'll be able to access it. But let's go ahead and create a mood board. Now for this, what we want to do is think about what would the client's needs be and how do we represent their site using colors. Not necessarily the colors we want, but what are the colors they want? They and their clients as well. For this, what we're going to need to do is make a new post. You can start from scratch if you so desire, you can go ahead and pick a template. For this, I'm just going to use a template. That way you can see how it functions. You can see their business, school, featured craft, food, collages, and undoubtedly the one that we're going to be looking for is going to be under the collage area, because you're going to want to be able to see the different photos that represent the mood for your client and their site. You can see, you can pick whichever one you so desire. Whichever one you feel is going to work best for you. I'm liking the gridding of this one. Let's go ahead and pop into here. One nice thing with both Spark and Canva is that they have free slash clip art images that you can use to create your mood board. It's going to take some of the searching out. One option that is also available to you is of course Pinterest. But I have figure most of us know Pinterest by now, so go ahead and use that one also if you so desire. This is nice because it's what you see is what you get. Let's go ahead and put a web design mood board or whoever your client would be. In our class project, I do have a list of several clients for you to use, so you can use one of those. You can change your type style if you so desire. You can see we have a primary, we have a secondary. If you don't want that one, let's go with that one, because maybe this slab serif is going to fit our client's style a bit more. You can be as customizable as you wish with this or keep it as broad and general. But the focus is of course going to be the images that represent our client. One of the clients is an outdoor site. So for this one, I'm going to build it like this is going to be an outdoor site. I'm going to click on our first cell, and you can see we have filters on it, I'm going to turn the filters off because if we're dealing with it from color, I want it to be non adjusted at this stage because we're going to pull our samples from this area. Go ahead, we're going to find a free photo and it's an outdoor. Let's say our first one, we want to look at mountains. Then what you'll want to do is think about what color would represent them, and let's go ahead and insert it into here, and you can slide them around, you can increase and decrease, you can rotate if you so desires, so if you're like, "Oh, I want it to look like this. A lot broader scale because I'm mostly interested in these colors." Then absolutely go for it. We're going to find another one here, so alter, I'm going to think lake. What colors of a lake are going to tie in with the inspiration for this project? This is the part you can take time and meander a bit. I'm thinking maybe this color. Same thing if you want to rotate, go ahead and rotate it. You can tell it is leaning towards a bit of an abstraction with this, and you can just keep going. You select each cell that you want to change, turn that filter off to make sure that filter is off as well. Sky, because we want to be out and about. This one's looking pretty nice. Then just rotate it into wherever the colors represent your client best. Now let's check out Canva which does function very similarly to Spark. Again, all of those links for these are in our class project area. Let's go ahead and click on, "start designing a mood board". You can of course work from scratch. But I'm just going to make just like the last one life a little bit easier and let's just go ahead and use a pre-existing template. But this one you can see there was a $ sign on it, so if you didn't want that one and if you wanted a free one, you can go ahead and click on one of the free ones, and you can see that it changes accordingly and you can morph as much as you want. Now, just the same, it's pretty much what you see is what you get. Let's go ahead, web design and color mood board. You can change the type if you so desire, just like in the last one. Let's double-click on that and if we don't want that one, I'm just going to grab the first one there, let it do it's thing, same deal here, let's change that one. Let's go with the bold so that we have our hierarchy established right off the bat. We can change this color. I'm going to assume that you have your hex codes all ready and written down from our last section. You can go ahead, pick a color in this little quadrant and click on the plus. If you have your hex code, you can go ahead and type it in there, or you can spin your wheel if you're using your mood board as a way to find those colors. You can increase the shades and the tense if you so desire, you can leave it at the mid-range. Let's go more towards this spectrum just so it looks a little bit different from our last one, and let's just stick with the nature theme, the outdoorsy shop from our last one. I'm going to go ahead, double-click. We're going to go into our elements first. Let's do that. Go ahead, delete that one out. Let's just find a free photo. There we go, oh, beautiful. You can see, you can just click and drag it in, and you can do your undo button here. When you double-click, you can resize and rotate accordingly. If you wanted more of the waterfall colors for this one, you'll be able to change it that way. I'm just going to keep dragging in one after the other, resize, adjust, rotate. Maybe in our outdoor sites, the canoe makes sense, and the field, and a mountain. Perfect. That worked out well for us. As well, you can see we can drag some of our colors in from here. Let's add a color. Let's say, the first one we want it to be that green on the canoe. Just going to lean more towards this. Then when we are happy with that, you can see it's adjusting it as I work. We're going to go with that one. Click on the next one. Let's just grab that purple, since we've already used that as our hierarchy. Mix another color, let's go with the wheat color. I'm going to take it more towards the light. The darker green of our mountain, change the intensity for that one. Maybe for our web design, this is going to be our background color. Maybe this one's going to be our div h1 paragraph, etc., or buttons. That way you have a starting point to the theme of your piece. These two sites are really easy to use and I highly recommend you try them out. 4. Dreamweaver: All right, so now let's take our code and take it into our actual website. For this, I'm going to be using Dreamweaver and I do have templates made for you. They're just really simple and straight forward to get you used to put in colors into the CSS, and seeing how they look on the page. Now, I took our color supply, one that we did and I found one that I liked. We're going to stick with analogous and here are our codes. I went ahead and wrote them down. That way I have access to that. You also had your screenshots. If you were using that system, of course we have our first one, go ahead into Photoshop, open it, and grab your eye dropper. Then when you double-click on your color swatch, your hex code is going to show up there, so you can write them down from there. In some capacity, whether it be through the screenshot or from one of our color scheme generators, go ahead, get our colors written down so that we can go ahead into Dreamweaver. All right, opening up our Dreamweaver and I do have the two sites. For this one, I'm going to show you the internal, let's go ahead, I'm going to manage the sites. There's our external, let's just make a new one, demo 1. We're going to link it to, let's just do inline. Demo 1, just making sure, all right, go ahead and hit "Done". This is the one that's going to be our inline. Let's go ahead and open our index page so that we can see what's going on here. Now, I do have basic colors dumped in here and I just used the yellow, green, red naming system, so it's not that accurate, our hex codes are going to give us more accuracy. For our background color, I liked that yellowish look. Let's go ahead, and the one that I have is FFF337, there's our first one, that's cheerful. Our h1, let's say we're going to put a background area on that one. Let's try the teal, 95ECD6, there's our teal look. All right, and let's go with our div area, I only grabbed three, so we're just going to do the top three, this is that orange look, FBC52C. I forgot the hex, don't forget your hex. There we go, got our pound sign on so we can see, we're turning those off. We have our teal that marigold orange, and then our yellow. If you wanted to grab one more, let's just go back to that one. Let's just adjust it maybe to more of the orangey look, just so you can see the four colors, FF6001, writing that down. I just could have copied and pasted it, but it is what it is. Let's go ahead, FF6001, and there would be all four in that color family that would be working on your page. Maybe some is going to be text, some is going to be headline. It's going to be completely up to you. Let's close out of that one. I am not going to save, but you would go ahead, screenshot that, you can preview it if you so desire, and upload it to our course projects so we can see what you're working on. Let's put the external in. We're going to manage it. I'm going to call this one demo 2, and let's link it to our external, save, that's fine, done. There's our index and there's our styles, and it's based on the last colors, just the light blue-green, etc. Change it in your external, I'm just going to grab them one at a time, CD6. Oops. Remember, it's the little typos that can throw us off. Make sure you're spelling and putting your symbols in correctly, BC52C, and last but not least, FF6001. If you're going to use my template, just go ahead and grab four of the colors. Now, if we go over here, you might be like, "Nothing's happening." Make sure you save it, if nothing's happening. The two are talking to each other if you have the newest version of Dreamweaver, but the older ones, you are going to need to make sure it's saved and refreshed. This way you can see what's happening with the colors, and you can build a site that's depending on your brand and clients' needs. 5. CSS Color Course Project: All right. For our class project, you have two options for this. The first one is to create mood boards that represent the clients that I have listed in the class project. There are around five of them and each one has a very specific clientele need. One's more kid oriented. One is more, say, financial oriented. How do you deal with colors that represent your various clients, their needs, and their brand? Option 1, you can go ahead and create these mood boards. You can save them or screenshot them and upload them to our course projects for us to see. The other option is you can also add a little bit extra to this. What happens if you add the code into your CSS? I have inline and external templates free to use. They're very basic so it's just manipulating your CSS to see how to adjust your colors and to see how it would work on an actual webpage. The files are created in Dreamweaver so you could use Dreamweaver or you can open them through TextEdit or Notepad plus plus if you're a PC user. As ever, whenever you're finished, go ahead and share them so that we can see what you've done. 6. Conclusion: In this class, you got to explore color scheme generators, and see how each of them function, to find out which one works best for you and your workflow. By giving a more harmonious color scheme, you're going to pull your designs to the next level. As well, you have to see how mood boards could influence of impact to brand and color decisions, and you've got to bring it all together using Inline or external CSS, whichever one you choose. I hope you enjoyed the class. I can't wait to see what you've created.