Using the Color Scheme

When designing web pages, computer applications, or house interiors, we need to find good color scheme — a set of colors producing the best impression. For every tint there are colors which it can coexist with, and which it can’t. Some combinations are uncomfortable, or disturbing, while others are more pleasant.

Experienced designers choose colors intuitively, many people can smell what colors go together well and what don’t. However, finding the good combination of colors may be sometimes long and gruelling work. The color theory makes the work easier. This tool will find set of colors you can start with, and it may facilitate your looking for the optimal color palette.

The Color Scheme Designer application generates color schemes of several types. Every scheme is based on one (base) color, which is supplemented with additional colors making together the best visual impression — using one of the genuine algorithms.

Selecting the Base Color

The base color can be set in several ways. The application works primarily with the color wheel, and with colors defined by it: the hue (the angle determining position of the color on the wheel). Warm colors (purple to yellow) and cold colors (yellow-green to violet) are marked here as well.

We can choose one of the elemetary colors on the wheel by clicking on its color strip. Primary colors (red, yellow, blue) correspond to angles 0°, 120°, and 240°, secondary colors (orange, green, violet) to angles 60°, 180°, and 300°, tertiary colors are between them. Smaller arcs (multiples of 15°) are standing for transitional colors. Clicking on any of these colors, you’ll set it as the base color. There is a scale 0—360° inside the color wheel, containing a dot pointer corresponding to the angle of actual color. By clicking or dragging on this scale, or by dragging the dot you can change the hue smoothly.

Important note: This tool doesn’t use the standard HSV or HSB model — the same HSV/HSB values ie. in Photoshop describe different colors! The color wheel used here differs from the RGB spectrum used on computer screens, it’s designed by the classical color theory. This is also why some colors (especially shades of blue) make less bright shades than the basic colors of the RGB-model. In plus, the RGB-model uses red-green-blue as primary colors, but the red-yellow-blue combination is used here. This deformation also causes incompatibility in color conversions from RGB-values. Therefore, the RGB input (eg. the HTML hex values like #F854A9) is not exact, the conversion may sometimes produce slightly different color.

Setting Color Variations

Each color in displayed scheme has several variations. These are colors of the same hue, but they differ in the saturation and brightness. You can click the “Adjust Scheme” tab to adjust the variations – to be more or less contrast, more or less saturated, or even set each variant individually.

There are several typical color variation sets prepared as presets (pastel, contrast etc.) Select a preset form the list to set in all colors in the scheme at once.