Now that we have looked at how to use the Agility Skin Color Scheme system we are going to setup our own color scheme on this professional services architectural site.
Set Base Color
This is my base color, this orange here, and I’m going to use Triadic. And save it. And it’s mostly there but not entirely. I don’t think Split Complementary is going to solve my problem here. No it isn’t because what I really want with this color is a forest green and that’s not really what I have here.
Choose Special Text Colors
So I’m going to be happy with these 3 colors. But I want a whole different set of colors for some of my text so when I’m using a dark background like this I may use light text and then let this be a hover color which is what I’m going to do.
And then I’m going to change out this color for more of a dark forest green, that’s really what I wanted there. And then I’m going to lighten it up a little bit here so it’s this color, just lighter. And then I’m going to leave these three colors as they are because it is in fact a calculated relationship between these colors and this color.
Saving the Color Scheme
I’m just going to save it and make sure I set my own colors. Save it again.
Add Names for the Colors
And then I want to go change some color names because this is not particularly useful to me. So I’m going to come over here to Skin Color Names and the first one is fine but the second one is actually my canonical red. So I’m going to call it that. It’s my main red color.
And then this was my light text hover color and this is my light text color. And then below that was my canonical green. And then the rest of them I feel like I can pretty well figure out so I’m going to save that.
Now if I come up here you can see there’s our canonical red…oh whoops, no totally missed that. That stuff all needs to move down. It’s not the light text, this is the light text that’s the hover. Okay, let’s go fix that. Canonical red, canonical green. So that’s going to go here. That’s going to go there. And that’s going to go there.
So now we have dark primary canonical red, medium primary, light primary, light text hover,and light text canonical green. Obviously it’s just a lighter green but you don’t just have to know by the name. You have both color and name to choose from when you are looking at this. You aren’t going to think either of these are green obviously because they are the purple color.
Anyway, that is the system for setting up our color scheme and color scheme names. Let’s just go ahead and save color scheme options one more time. We’ll come over here and look at that. This isn’t exactly how we want to do so we’re going to end up changing everything around but now that we’ve got our color scheme we can do that.