Choosing your website colors

[miguelkp]

First of all, I'm going to apologize in advance since I'm not English. So sure I'll make some typos and orthographical errors.

Once said this... to the point.



Almost everyone have had problems choosing the color scheme for our website.
I've found a very useful and powerful tool that helps us to make the decision:

Color Scheme Designer

I will try to explain some of the features. This is an online tool so nothing has to be downloaded in order to get it work. This tool, as I said, is very powerful and has got a lot of features. I've done a screenshot (see here) where I divided the tool layout in some parts that I'll explain now:

First of all, we can see in the upper-left part some circles (1). With these, we can choose between mono, complement, triad, tetrad, analogic and accented analogic palettes. I recommend to play with this controls and see yourself what you can get.

Under the palette type controls, we have the color wheel itself (2). And depending on what palette type you choose, you would see little circles that you can move to select a wider or tighter palette. In the image, I have chosen a triad palette so we have three circles. The darkest one (a) is the 'main color'. You can move this one and the other two (b) and (c) will move with it. These ones are complementary colors. Move one and the other will simmetrically move as well.
As I said, play with different palette types and see what you can get.

Under the color wheel we can see three tabs (3). The first one is the one that is selected by default: i.e. the color wheel. With the second one, 'Adjust theme', we can adjust saturation and brightness of the whole scheme. We can also change individual colors. There are also a lot of presets we can choose. Again, play with this controls.
The third tab is 'Color list'. That's the list of color with the Hex code for each one.

Then, in the upper-right part, we have a toolbar (4). The options are evident (maybe except the 'Vision simulation' tool that is even remarkable). It's worth noting that it has the option of export the color scheme both in PS and Gimp formats.

Below, there is a scheme detailed list of colors (5).

And, eventually, we have a preview menu (6). The 'Light page example' button will pop up a window with a generic webpage. It will have light background and dark fonts. While this window is open, clic anywhere inside the website and the secondary colors will swap.
On the other side, 'Dark page example' will show a 'dark background w/ light fonts' generic website. You can swap the secondary colors as well.



And that's all. I, again, recommend to play with all options and features.


Thank you for reading this. I hope it'd be useful to all of you.