I've been watching Youtube videos and learning more about how to pick your website's colors. They talk about analogous, monochromatic, triad, and complimentary which can all help. And I just wonder if there is some software out there that could show what your site would look like using these different color schemes. So you can quickly see what your site would like like with many different color scheme without actually making the changes.

 

In the Firebug add on for Firefox you can quickly see what a color on your site would look like if it were a different color. So that got me wondering if there was a software that could take all of your colors and and show what they'd all look like under a different color scheme.

 

Like if you know you want your site to be some kind of blue color mainly, and you wanted to go with a monochromatic color scheme. It would be nice if you could choose a blue color and have a program show you your site with all the colors changed monochromatically to different shades of blue based off of the blue color you choose.

 

And perhaps the program would have a slider that when you slide it one way or the other the colors get lighter or darker. And if you don't like how it laid the monochromatic colors out on the page you could hit a button that rearrange them. And if you would like to choose what blue color goes where, you could also tell it that too.

 

And if you'd rather try an analogous, triad, or complimentary scheme, or whatever, it would base it off the color you originally picked. And then you could see what your site would look like with those schemes as well. And with those color schemes, it could also have a rearrange button to so you can have it rearrange the colors on the page. And you can also pick what colors go where.

 

So, is there any software out there that can do that?

You mean a tool like this: https://addons.mozilla.org/en-GB/firefox/addon/color-that-site/

 

Fun to play with but of little real value. Colour theory is great but its no substitute for real testing. I've discovered that the fewer colours you use the better, keep the palette under 5 and don't get hung up on shades. Everybody has different colour perception and there are a whole range of colour blindness conditions. And each device and each browser resolve colours slightly different as well. All of which means what you see is not going to be what I see. The only way to know if your palette is acceptable to your visitors is to test it.

I don't know of a site like that, but paletton.com will show you a mock up example site using the colour scheme you've picked which might be some help.

I am familiar with paletton, but I've never heard of this mozzila addon. I'll check it out when i get a chance, but judging by the video I don't think It's quite like what I'm envisioning. And parts are somewhat confusing.

 

Fun to play with but of little real value. Colour theory is great but its no substitute for real testing. I've discovered that the fewer colours you use the better, keep the palette under 5

 

I agree, I think it's better to stick with few colors. But, as far as "real testing", that's the point of the program I'm envisioning. It would shorten the time it would take to test out different color schemes. In no time at all you would be able to see numerous examples of your site (not other people's sites like paletton does), with different color schemes based upon the main color you choose. With the ability to quickly rearrange the colors however you want.

 

There are websites that can tell you all the colors you have on your page. And I'm sure they can tell where on the page those colors are, so this program idea seems totally doable. I can't imagine why someone hasn't created it for me. just kidding.

Edited April 23, 201610 yr by kuurt

If you write all your CSS using Sass then you can set up a bunch of variables for your colours so you can change your colour theme very quickly. There's no need for any software.

i was going to suggest the sass route too but wondered whether you were even aware of sass or using it... otherwise make a mood board or a mini version of the site and change it using HSLA - easy to find the complement of a colour by simply adding or subtracting 180 from the first value. codepen perhaps. it's a lot easier to change colours logically with HSL(a) than using hex or rgb or a colour picker.

 

reallyt though this isn't the way to choose colours for a web site - then you're just picking what's pretty. choose a base colour (either from the logo) or that represents the brand values of the company e.g. mid-dark blue for trust /bank for example, then choose accent colours according to that.

 

doing it your way might end up with an attractive colour scheme, but not necessarily one that fits the image the company should portray

Not only that but changing the layout affects the palette you use. For example, a hover effect on a navigation link may not work so well if you change the font, margins or padding.

I haven't heard of Sass, but if I have to write my all my css it sounds too difficult for me at the moment.

 

reallyt though this isn't the way to choose colours for a web site - then you're just picking what's pretty. choose a base colour (either from the logo) or that represents the brand values of the company e.g. mid-dark blue for trust /bank for example, then choose accent colours according to that.

 

I did say you would pick a color first before trying different things with it in the program. I didn't say how you would pick it, but I would choose a color that makes sense for my niche, and is perhaps in the header pic or logo as well. But, then you could figure out what accent colors go well with it with the use of such a program.