We have just looked at what you can style using Agility 3.2 Skin Design Options. And one of the things in Skin Design that you can use to customize your site is the color scheme system. So that’s what we are going look at next.
How the Color Generator Works
The Agility color scheme generator consists of a couple of parts. It has a system for automatically coming up with the color scheme for the colored sections. And it has a graded gray scale color system. It also has custom names for these various colors.
Choose Base Color
And so, for example, you can start by choosing a base color. If you don’t have a color scheme already but you’ve got a primary color that you want to develop a color scheme around then you can do that.
Choose a primary color and decide whether or not you want to use Complementary, Split Complementary, Triadic, Analogous or Monochromatic color scheme built around this color.
So if we save that color here and go to Complementary, here is a complementary color scheme where this color is this color. And so you’d go two shades lighter and two shades darker. And then we go grab its complement which is this color and we go two shades lighter and two shades darker for that. This could be a Complementary color scheme.
You have to save the settings here twice. The first time you save it, it sets it. The second time you save it, it writes the CSS. Now let’s change it. There we go, now it’s changed. So now we have a traditional complementary color scheme developed by simply picking that color.
Split Complementary Scheme
You could also choose a Split Complementary scheme. The split complementary scheme produces 3 different distinct colors.
Recalculting Color Wheel
If it doesn’t produce different and distinct colors then you want to click on this “flip and try it again”. The way the color wheel calculations work is in one direction or the other and so sometimes you have to calculate the color wheel in the counterclockwise direction instead of a clockwise direction and that’s what “flip and try it again” does.
Let’s save it again and reload it. Now we’ve got this green color here. And sort of a brown and green and dark blues.
Triadic also produces 3 distinct colors but slightly differently than split complementary. Okay, you can see when I chose this all I got was 2 colors. So, this is one of those cases where I have to flip it and try it again. So there are my 3 colors.
You may have noticed that in each one of these the base color…you know there are 5 colors associated with the base color and it starts in the middle with that color and goes 2 darker and 2 lighter. Then it picks up 2 or 3 of the other colors depending upon that calculation.
If you know something about color theory you know that a complementary color, split complementary color, triadic, and analogous are all established color scheme ideas that have very specific mathematical calculations. You are not going to go wrong by choosing them.
Let’s say you’ve got this color, this color and that color. And then you can do Monochromatic which just goes darker and lighter of the same color. You save it again and it writes the CSS. And then you can come up here and see what it looks like. So that’s a monochromatic color scheme.
Altering Produced Color Schemes
You may choose to rearrange it a little bit. So maybe blue is not your main color. Once you’ve got your triadic colors, which is this, this and that, maybe your choice then is to maybe make your primary color this color. Keeping it as a triadic but shuffling the colors around a little bit.
Now we’ve got to flip it again. So here you’ve got more red and less blue. The same green and so on and so forth. You can flip that around or you can use Analogous colors which is also sort of a 3 color color scheme.
In any case, the point is that this is designed for you to be able to play around so that you can come up with a color scheme that you like. Sometimes what I do is mess around with this differently. First I may setup a Split Complementary but then I may manually choose lighter and darker rather than letting this calculate it once I know what my 3 colors. That is also something you can do.
You can come over here and say I want this one to be that color. And so it doesn’t have to be automatic although as soon as you decide you’re no longer going to use the automatically calculated color you have to go back over here and hit set or adjust your own colors which will then let you change all this stuff.
Changing the Gray Color Set
You can do the same thing with the grays. You can actually put different colors here other than grays. And there are cases in which you may want to do.
Adding Skin Color Names
The other thing you can do with this once you’ve got a color scheme set up is you can come down to miscellaneous skin color options and you can choose skin color names. And now you can give these colors a name that you recognize.
You can name these 10 individually and if you are looking at colors you can see the colors here. But sometimes you might not know when you are looking at this, well what’s my main red color? Well, maybe this is your main red color so maybe what you really want to do is take that light primary and change that to my main red color.
And when you do that then it shows up that way. It shows up that way here and it shows up that way in all of your drop down menus. All of your drop down menus will give you an opportunity to choose from the colors that are here in these 11 colors, 10 colors and 11 grayscale. And the whole point of doing that is to make it really simple for you to move from a color scheme to applying that color to various aspects of the settings on your skin.
Why Use This Color Scheme Generator?
If you don’t use that feature you lose probably one of the most powerful features of the skin. Because if you go through and set every color individually then you will have to go through and reset every color individually if you decide to change your color scheme. Whereas if you use the color scheme system when you change your colors scheme all those settings will be automatically changed.
Again, if you don’t use the color scheme and you decide that you want a bluer site instead of a red site you end up having to go through the tedious process of finding all those places where you used one set of colors and changing them out for another set of colors.