Create Websites with CHEETAH

Special websites and techniques (11)

Colors and web pages
 

Colors are one of the most important "non-verbal" information carriers of a website, which is why special attention should be paid to color design in web design. Colors not only help with orientation, they also have something to do with the character of a website and they serve to present content more clearly. Colors can be used to set accents, define brands with high recognition value (just think of Telekom - magenta) and emphasize meanings. Colors also trigger emotions in the viewer, create references to experiences and convey certain value structures.
 

So it makes sense to think about the effect of colors and color combinations on websites. In particular, the question arises under which context one should choose which color or which color combinations. Of course, no absolute recommendations can be given here, because the optimal choice of color ultimately depends on many factors. But there are some guidelines that should be followed.
 

Colors do not have the same effect everywhere. It rather depends on the surrounding colors. There are color combinations that have a harmonious effect, while others "don't work at all", are dissonant, so to speak. Many strong colors appear very restless, while a flowing "gray" tonality is quickly perceived as boring. Red and green next to each other can lead to recognition problems for red-green blind people and should therefore be avoided. Sometimes even black and white websites have their own appeal if the colors match the theme.
 

The color palette of a website should be limited to not too many colors that are coordinated with each other, with a so-called "accent color" determining the palette. In fact, such an "accent color" ensures that certain elements of a web page are particularly prominent and stand out from the rest (e.g. headlines, buttons, navigation elements, dividing lines, etc.), which is why it should clearly stand out from the basic color of the web page. Moreover, it can significantly increase the corporate identity of the website and thus its recognition value.
 

Over time, web designers and psychologists have put a lot of effort into compiling color palettes that are coordinated with each other. Among other things, this has resulted in so-called "Flat UI Colors" - palettes. "Flat Color" means that the colors have no "shine" and there are no blending effects when they are combined. They are also coordinated in such a way that they show a good contrast among each other. The palettes represent, among others, so-called "earth colors" (more brownish tones), "cold colors" (blue tones), "pastel colors" and "hot colors" (more red tones). You can find corresponding compilations together with their color codes (mostly RGB Hexa) on the Internet. Many colors also have a proper name (e.g. "Wet Asphalt" for #34495E).
 

Tip: If you are clear about the "character" of the website you want to create, then choose a color palette that matches it and try to use the colors it offers consistently and uniformly throughout your website (which does not mean, of course, that you can use other colors not included in the palette). In this context, also take a look at the color design of your competitors' sites.
 

"Colors" can be represented numerically in different ways. One usually speaks of so-called "color spaces". For monitor outputs, the RGB color space is usually used for color coding. RGB" stands for the three primary colors red, green and blue, from whose varying proportions the color of a pixel on the monitor is "mixed". For example, a pixel in pink has the color composition R=184, G=81 and B=149 (where the maximum proportion of each primary color is 256). So if you assign a concrete value to the "Color" property of an element, these are the mentioned RGB values. You can do this for each color part separately (fields "R", "G", "B") or (usually better) enter the hexa total value in the field "HEX". This is the value you usually copy to the clipboard when you select a color on a web page with Flat UI palettes (or use a "color picker" in general). Transferring a color is therefore very simple:
 

• Copy the color code with from the clipboard into the previously emptied HEX field of the "Cheetah" - color selection

Note: To set the transparency, use the slider bar below the rainbow palette or a value between 0 and 1 in field A. "1" here means "opaque" and "0" "completely transparent". With a value somewhere between 0 and 1, the background then shines through the coloring more or less clearly, allowing you to achieve interesting design effects.

TB Amazon