How to use the Color Tool

by Yorgo Nestoridis

Select­ing a color scheme is a del­i­cate affair. To help with the choice and to asso­ciate color tones which are in har­mony or in har­mo­nious con­trast you can use the color tool which is based on the basic color wheel.

You find the tool on this site under tools in the above menu or by click­ing HERE.

While design­ing web pages, com­puter appli­ca­tions, or house inte­ri­ors, we need to find a good color scheme – a set of col­ors pro­duc­ing the best impres­sion. For every tint there are col­ors which it can coex­ist with, and which it can’t. Some com­bi­na­tions are uncom­fort­able, or dis­turb­ing – while oth­ers are pleasant.

Expe­ri­enced design­ers choose col­ors intu­itively, many peo­ple can smell which col­ors go together well and which don’t. How­ever, find­ing the good com­bi­na­tion of col­ors may be some­times long and gru­el­ing work. The color the­ory makes the work eas­ier. This tool will find sets of col­ors you can start with, and it may facil­i­tate your look­ing for the opti­mal color palette.

This appli­ca­tion gen­er­ates color schemes of sev­eral types. Every scheme is based on one (base) color, which is sup­ple­mented with addi­tional col­ors mak­ing together the best opti­cal impres­sion – using one of the authen­tic algo­rithms.

The base color can be set in sev­eral ways. The appli­ca­tion works pri­mar­ily with the color wheel, and with col­ors defined by it – hue (the angle deter­min­ing the posi­tion of the color on the wheel). Warm col­ors (pur­ple to yel­low) and cold col­ors (yellow-green to vio­let) are marked here as well.

Color Wheel

We can choose one of the ele­men­tary col­ors on the wheel by click­ing on its color strip. Pri­mary col­ors (red, yel­low, blue) cor­re­spond to angles 0°, 120°, and 240°, sec­ondary col­ors (orange, green, vio­let) to angles 60°, 180°, and 300°, ter­tiary col­ors are between them. Smaller cir­cles (mul­ti­ples of 15°) are stand­ing for tran­si­tional col­ors. Click­ing on any of these col­ors, you’ll set it as the Base Color.

There is a scale 0–360° inside the color wheel, con­tain­ing a small pointer cor­re­spond­ing to the angle of the actual color. Click­ing on this scale you can change the hue with­out chang­ing bright­ness and/or sat­u­ra­tion (you have to click, you can­not drag the pointer). There is a dif­fer­ence with this selec­tion type: when selec­tion the angle from the inner cir­cle, all color vari­a­tions are kept, but when you click the ele­men­tary color on the outer ring, all vari­a­tions are set to the default values.

Impor­tant note: This tool doesn’t use the stan­dard HSV or HSB model (the same HSV/HSB val­ues ie. in Pho­to­shop describe dif­fer­ent col­ors!). The color wheel used here dif­fers from the RGB spec­tre used on com­puter screens, it’s more in accor­dance with the clas­si­cal color the­ory. This is also why some col­ors (espe­cially shades of blue) make less bright shades than the basic col­ors of the RGB-model. In plus, the RGB-model uses red-green-blue as pri­mary col­ors, but the red-yellow-blue com­bi­na­tion is used here. This defor­ma­tion also causes incom­pat­i­bil­ity in color con­ver­sions from RGB-values. There­fore, the RGB input (eg. the HTML hex val­ues like #F854A9) is not exact, the con­ver­sion is rough and some­times may pro­duce a slightly dif­fer­ent color.

Each of the col­ors in the dis­played scheme has four vari­a­tions. These are col­ors of the same hue, but they dif­fer in the sat­u­ra­tion and bright­ness. You can click the small square of the vari­a­tion and choose another vari­a­tion. The very first vari­a­tion (the big­ger square) is the base vari­a­tion, which deter­mines the look of the scheme. The other three vari­a­tions are just addi­tional. If the scheme is made by less than four col­ors, the unused place is used to dis­play vari­a­tions (or the com­ple­ment) of the base color.

There are sev­eral typ­i­cal color vari­a­tion sets pre­pared under the swatch area (pas­tel, con­trast etc.). Click any of these but­tons to use this vari­a­tion set in all col­ors in the scheme at once.

The result­ing color set is made by installing the base color into one of the color schemes. You can select the scheme by click­ing on the scheme cards bel­low the color wheel. Sev­eral schemes allow addi­tional set­tings, which are dis­played bel­low the cards. You can choose one of fol­low­ing schemes:

Mono­chro­matic scheme is based on only one color tint, and uses only vari­a­tions made by chang­ing its sat­u­ra­tion and bright­ness. Black and white col­ors are always added. The result is com­fort­able for eyes, even when using aggres­sive color. How­ever, it’s harder to find accents and highlights.

The appli­ca­tion makes only sev­eral mono­chro­matic vari­ants of each color. You’ll be able to make oth­ers – more or less sat­u­rated, lighter or darker. Mono­chro­matic vari­a­tions are made for each color in other schemes, too. They are dis­played as smaller (click­able) squares next to each color.

Base color is sup­ple­mented with its com­ple­ment (color on the oppo­site side of the wheel). One warm and one cold color is always cre­ated – we have to con­sider, which one will be dom­i­nant, and if the result should look warm, or cold. Suit­able mono­chro­matic vari­a­tions of this two col­ors may be added to the scheme.

Base color is sup­ple­mented with two col­ors, placed iden­ti­cally on both sides of its com­ple­ment. Unlike the “sharp” con­trast, this scheme is often more com­fort­able for the eyes, it’s softer, and has more space for bal­anc­ing warm and cold colors.

Click­ing the scale (will be dis­played bel­low the scheme card) you can set the dis­tance of these col­ors from the base color com­ple­ment. The less the value is, the closer the col­ors are to the con­trast color, and are more sim­i­lar. The best value is between the first quar­ter and the half of the scale. Higher val­ues aren’t too suit­able – except the shift by 60°, which makes another color scheme, the triad:

The tri­ade is made by three col­ors evenly dis­trib­uted on the thirds of the color wheel (by 120 degrees). The triade-schemes are vibrat­ing, full of energy, and have large space to make con­trasts, accents and to bal­ance warm and cold col­ors. You can make the tri­ade in the “soft con­trast” scheme set­ting the dis­tance to the max­i­mal value (clear to the right).

This scheme is made by a pair of col­ors and their com­ple­ments. It’s based on the tetrad – the four­some of col­ors evenly dis­trib­uted on the fourths of the color wheel (by 90 degreees). The tetrad is very aggres­sive color scheme, requir­ing very good plan­ning and very sen­si­tive approach to rela­tions of these colors.

Less dis­tance between two base col­ors causes less ten­sion in the result. How­ever, this scheme is always more “ner­vous” and “action” than other schemes. While work­ing with it, we have to take care espe­cially of rela­tions between one color and the com­ple­ment of its adja­cent color – in case of the tetrad (max­i­mum dis­tance 90°, clear to the right), good feel­ing and a very sen­si­tive approach are necessary.

This scheme is made by base color and its adja­cent col­ors – two col­ors iden­ti­cally on both sides. It always looks very ele­gantly and clear, the result has less ten­sion and it’s uni­formly warm, or cold. If a color on the warm-cold bor­der is cho­sen, the color with oppo­site “tem­per­a­ture” may be used for accent­ing the other two colors.

You can set the dis­tance of adja­cent col­ors click­ing the scale (will be dis­played bel­low the scheme cards). Val­ues between 15–30° (between the fourth and the half of the scale) are opti­mal. You can also add the con­trast color, the scheme is then sup­ple­mented with the com­ple­ment of the base color. It must be treated only as a com­ple­ment – it adds ten­sion to the palette, and it’s too aggres­sive when overused. How­ever, used in details and as accent of main col­ors, it can be very effec­tive and elegant.

There is no scheme named “con­tra­dic­tory” on the tool – to the con­trary; con­tra­dic­tory is a color scheme, which can’t fit into any rule described above. This scheme may not be use­less – there may be sit­u­a­tions, when we have to cre­ate shock­ing, really gaudy, jazzy work. Even in this case this tool may be use­ful – if your scheme dif­fers from all described mod­els, you’ve got it: a ner­vous, loud, aggres­sive set of col­ors. Of course, such a scheme can­not be suit­able for appli­ca­tions requir­ing not so inten­sive emo­tions .

You can acti­vate the “safe” col­ors con­ver­sion by click­ing on the check-box above the color swatch. All col­ors in the scheme will be trans­formed to the 216-colors color space (Web­Col­ors). Even if this reduc­tion has not much sense today, some­one make find it use­ful as most screens ren­der at least 16 000 col­ors. This trans­for­ma­tion changes color tints and the bal­anced scheme may be deformed. If you want to use this func­tion, you’d rather pre­fer col­ors which aren’t very dif­fer­ent after the Web­Col­ors transformation.

At the bot­tom right, a select box pro­vides switch­ing between color blind sim­u­la­tion. (Sev­eral types of color blind­ness.) If you select one of these sim­u­la­tions, dis­played col­ors in the swatch are changed to show how peo­ple hav­ing the selected mal­func­tion may see them. This func­tion has just acces­si­bil­ity ver­i­fi­ca­tion pur­pose, gen­er­ated color codes are not affected by it.

Actual codes of dis­played col­ors are in the table on the right side. The color blind­ness sim­u­la­tion doesn’t change them, but the Web­Col­ors trans­for­ma­tion does. Each color has its base color and three vari­a­tions are dis­played bel­low it. You can rotate these vari­a­tions by click­ing the arrow on the right (e.g. make any of vari­a­tions to be the base color and check how it looks on a larger area).

The final color palette is just a base for designer’s work. You must not use all gen­er­ated col­ors. To keep the inten­tion of the color scheme, you shouldn’t overuse the color vari­a­tions; mostly only black and white are rec­om­mended. Any­way, if you really need the vari­a­tions, just select only sev­eral ones of the base color, and one or two vari­a­tions of one of the con­trast col­ors. Anther pos­si­bil­ity is to use the same vari­a­tion of all main col­ors in the scheme, to cre­ate the same motive in lighter/paler/darker shades. Gen­er­ally, one appli­ca­tion (one web page, or one web site) should use no more than six color (includ­ing the vari­ants), plus black and white. This tool can help you make them go well together.

As you can see from my sites, my per­sonal pref­er­ence is mono­chro­matic between black and white with one color to set accents (red or blue).

The Color Tool is dis­trib­uted under the BY-NC-SA license. License for com­mer­cial use is not possible.

• Corvette 79 for Sale Grunge
• Grunge Web Design
• Web Design Hand­writ­ing Fonts
• Web Design Ele­gant Fonts
• Weg Design Font Faces

This page is wiki editable click here to edit this page.

Related posts:

1. Web Design Color Theory
2. Web Design Col­ors Harmony
3. New Seman­tic Com­mu­ni­ca­tion Tool
4. Web Design Colors
5. Web Design Colors

Tags: Acessibility, Analogous Colors, Base Color Selection, Color Blindness, Color Schemes, Color Tool, Create a Color Scheme, How to use the Color Tool, Web Design Colors, Yorgo Nestoridis

This entry was posted on September 19, 2009 at 5:55 pm and is filed under Web Design, Web Design Basics, Yorgo Nestoridis. You can follow any responses to this entry through the RSS 2.0 feed.