Build Your Own Business Website header image

Using the Agility Color Scheme System

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Agility 3 has been around for a year and a half so now this is old hat but the Agility Color Scheme Generator is a really cool feature.

Options for Creating Your Color Scheme

The way it works is you pick a base color to start with and then from that base color, you can generate a color scheme. So you set up your primary color and then you’ve got these choices of complementary, split complementary, triadic, analogous, monochromatic and then default.

Understanding What the Options Produce

If you want to understand what these choices give you there’s a website that I like and use a lot when I’m working on colors and that is the CSS Color Converter. Let’s go there. Here is a complementary color scheme, here’s a split complementary color scheme, here’s a triadic color scheme, this is a monochromatic and this is an analogous.

The only difference with their monochromatic is that they don’t go in a straight line here but these are the types of scheme that are generated by the color scheme generator in Agility. I’m going to leave this here because I’m going to show you how I did BYOBWebsite.

Complementary Color Scheme

You choose a color and if you want a complementary color scheme, you hit save color options and you see the complementary color scheme. What this does is it uses this primary color as the medium color, takes a couple colors darker and a couple colors lighter.

It takes the contrast color and uses it as the medium. Again, it goes a couple colors darker and a couple colors lighter so you always have the color range to choose from.

Split Complementary Color Scheme

You can choose split complementary which is a three color scheme. In that case the split complementary colors here really are the medium primary, the medium dark contrast and the medium contrast. We go lighter on the medium contrast, darker on the list one and then a lot darker and lighter on the main color.

Triadic Color Scheme

Triadic is three different places on the color wheel. The primary color gets five colors, two light and two darker. The secondary color has two colors and the tertiary color gets three colors. The main color and then two lighter versus the main color and the one darker.

Sometimes it fails to generate the scheme. In that case you need to click this flip and try again. This is a fail actually because this is really only two colors and since the Triadic is supposed to be three colors it didn’t work.

The other one was a success but any time you have a bunch of black colors or a bunch of white colors in our color that doesn’t make any sense or if you don’t have three colors and you’re supposed to have three colors just use the flip and try it again.

Analogous Color Scheme

Here’s Analogous. This is an instance where it’s failing. You can see these are just not right – this color 333 is not an analogous color of that and this one here is not a real color. Again, in this case you’ll flip it and do it again.

Flipping it just does the calculation in the other direction. The calculation for contrasting and colors either goes clockwise or counter-clockwise depending upon where you are in the color wheel. That’s what’s happening here, you’re going to go clockwise or counter-clockwise on the color wheel when you’re doing these calculations, so that’s what the flip is for.

Monochromatic Color Scheme

Monochromatic flip doesn’t matter, it’s always going to get it right. I actually calls it very light primary and then gets darker and lighter. You just have this whole range of colors.

Save Color Scheme Twice To Implement

One of the things to bear in mind is that once you find a color scheme you like, you’ll have to save it again. The first save just shows you the scheme whereas the second save applies the scheme. So when you’re working with the color scheme you want to remember that you have to save it twice.

Clear Any Caching to See Changes on Your Site

Let’s take a look at this scheme. We need to reload the page but first I need to clear my cache. Now the cache is purged but I’ve also got browser caching going on so let’s clear that too.

Customizing the Colors in Your Scheme

So you can see what happens with this analogous color scheme. I try to get the colors right but obviously these colors don’t really work in the bar here. That’s where the rest of the customization comes in. They let you go back and change these colors to something that works better and is easier to read than what happens automatically with the color scheme.

BYOBWebsite Color Scheme Example

The way I created the color scheme for BYOBWebsite is I used existing primary colors. I wasn’t trying to redesign my website style, all I was trying to do was get my website up and running in Agility 3.2. Since I was sticking with exactly the same color scheme I used my primary design colors.

Actually the primary design color is dark gray and then I had a blue and this red and I had orange buttons. What I did was take what I refer to as my canonical blue and I put it in this CSS color converter. Then I used this to get my lighter and darker color.

Let’s do that. Here’s a shade darker and now that’s the shade darker. Now I paste that into that and then I get a shade lighter and another shade lighter than that which gives a range of lightness and then I did the same thing with my canonical red. I took that red color stuck it in there and went a shade lighter, a couple shades lighter and a shade darker.

Change the Gray Scale

The cool thing about this color scheme generator is that you can change the names of the colors and you can change the gray scale colors too. The gray scale colors don’t even need to stay gray. If you’ve got another contrasting color you want to use you could change the gray scale color to something else.

I’ll do it over here. I’ll take this gray scale color and say I want that to be green. And here it is. The gray scale does not automatically calculate when you do one of these things so it never changes. This set of this gray scale has a very nice graduation from black to white.

They weren’t actually the colors I wanted to use on BYOBWebsite so I went in and changed them. The 333 and the 444 and the e3e3e3 were not colors that are automatically part of of this and so I set my own gray scale colors the way I wanted them for BYOBWebsite.

Give Your Colors Meaningful Names

Then the other thing you can do is you can change the names of the colors. In the first place let’s say you want to look at a background color. First, you choose an existing skin color, it shows you all of those skin colors. But you may not actually remember which one is canonical so I made it so you can name the colors once you’ve set those colors.

Let’s go back to a split complementary. The place you name those colors is down here under configuration options, under skin color names. This tells you which swatch you’re naming. So this is the leftmost. This is the next and right now it’s called dark primary but let’s change them.

Medium primary is our principal color so we’ll call that canonical purple. So script colors, medium primary that’s canonical purple. I just use the word canonical for my main color designation, it’s the color that defines the site.

So we’ve got canonical purple and then you just might say medium purple or darker purple or even leave it alone at that point. Maybe you only need to set the canonical purple.

Then what else did we want? Well, the medium dark contrast is the green, so medium dark contrast is the canonical green and then canonical orange is medium contrast. Let’s save that and now we have our main colors showing as canonical purple, canonical green and canonical orange.

Now if you go back into you want to add a background color you can more easily choose from the list because you can tell which are your main colors. And you’ll see the green in the in the gray scale instead of it being gray so on so forth.

You can’t change these gray color names, you can only change the colored names but I think you probably don’t need to rename those anyway.

Hopefully this example has shown the benefits of this color scheme generator. The goal of the color scheme generator is for you to actually use it for your colors so that you always use it for all your colors.

Custom Colors

Let’s say I really want a red for a couple of emphasis things. Then what you do is take one of these gray’s that you’re not using and turn it into a red. If you decide to change your color scheme later on and decide you don’t want that red anymore all you have to do is change the color there and it changes it everywhere.

In contrast if you go through here and put custom colors in all of your choices, then you’re going to have to go in and change all of those colors individually. So I strongly encourage you to use the color scheme generator for your colors.

If you find that you have colors that you aren’t using and you need more colors you’ve got a bunch of grays here that you’re not using or maybe you never use this like a primary so maybe you make that one your red color.

The color scheme should be the color scheme that works for you so that you can always use it. It’s very very simple for you to change the color scheme on your site because all you have to do is go in and change those colors and it changes it everywhere. It’s way better than putting in a custom color.

That’s the color scheme and that’s the philosophy I used when I changed from Thesis 1 to Thesis 2 for BYOBWebsite using the Agility Skin.

0 Comments… add one
0 comments… add one

Leave a Comment