AfterStep  color schemes are supposed to ease the pain of assembling  set of colors that go well with each other, while providing additional flexibility while designing custom looks/themes.

AfterStep Colorscheme is a standard  set of  color names, that may have different  color values assigned to them. This  color names are used in defining Look and in XML images. By assigning different  color values to teh same  color names it is possible to instantly change colors throughout entire Look, without altering any images or configuration files.

Not all of the Colorscheme colors have to be explicitely defined. Only the  Base  color is important. AfterStep is capable of autogeneration of good-looking colorscheme, from this single  color . Explicit  color definition in colorscheme file will override any automatic choice. Example of this is the NeXTish colorscheme, where all of the colors are customized. If grayscale  color is choosen for  Base - it will generate grayscale colorscheme, where different shades of gray are used for different colors.

Selected colorscheme file is loaded by all modules and afterstep proper. Whenever  new colorscheme is selected - it triggers reloading of the Look file and all image files.

All of the supplied Look files had been written to take advantage of the AfterStep colorschemes.

Please read below for more details on how colorschemes are generated and other  color -related topics :

HARMONIOUS COLORS


Task of selecting a  set of matching colors is a serious matter, and it was studied by artists and designers for centuries. AS the result there are certain rules developed to simplify this task.

Firstly, instead of selecting colors in Red/Green/Blue colorspace, matching colors should be selected using Hue/Saturation/Value (HSV) colorspace. Color hues are the most important characteristic of the  color , and is measured in degrees from 0(red hue) to 60(yellow hue) to 120(green hue) to 180(cyan hue) to 240(blue hue) to 300(purple hue) and then to 360 which is the same  hue as 0 -  red . Hues could be placed on a so called  color circle, making it easier to choose matching colors.

There are two main approaches to selecting  color scheme - single  hue , or several hues.

Single  hue colors differ in its saturation, and usually allow for a soothing, simple theme. Such theme could be pleasant to look at, but it lacks in excitement, and makes it difficult to distinguish between different elements.

Using several hues makes theme a bit more exciting, and adds more visual cues to the screen, providing for easier operation, and allowing user to relax eye muscles, resulting in better ergonomics. Accordingly this is the approach that should be used for user interface colors. Now how to select hues that compose harmonious theme? The rule of the thumb is that hues that are  close to each other on  color circle go well with each other, while those, located on opposing sides of the circle, create contrasting effect.

AfterStep addresses the task of selecting harmonious colors, by generating a  set of colors from a single  color using designer rules.

IMAGE HUES


Look of the screen (aka Theme), includes numerous images, such as icons, backgrounds, bars, etc. Each such image may have one or several dominating hues, which brings us back to the task of matching hues, in order to achieve harmonious look.

The rule of the thumb to follow here is that, each image on any particular interface element, such as titlebar, should have at least one dominating  hue to be the same as the  hue of the  background of this element.

There are several way to make sure that  hue of the image matches that of the  background :

tinting

If an image has single dominating  hue , it could be converted to grayscale and then tinted with the  color of the  background .

 hue rotation

If an image has several hues, or a  hue and some grayscale parts - its hues could be rotated, by converting image into HSV colorspace, changing range of hues, and then converting image back into  RGB colorspace.

superimposition

Also image hues may be altered by superimposing it over the  background image using allanon composition method, where each pixel is substituted with the average of image's pixel value and  background 's pixel value.

AfterStep addresses the task of changing hues of images using XML image scripting. See asimagexml for more on that.

COLOR NAMES


AfterStep Colorscheme  color names could be separated in several categories :

 Foreground and Background

 Foreground colors are used to render  text , while  background colors make up a backdrop for that  text . Now there are several constraints on foreground colors - they should be contrasting with backgrounds, and it is always better to constrain foreground colors to black and white, as colored  text tends to "bleed" ontop  background , making it less eligible. Another problem with foreground being colorfull is that it increases strain on user's eyes, forcing them to adapt to too many different contrasting colors.

 Base ,  Active and Inactive

General  color theme of the screen is determined by  background . Accordingly we term it a  Base  color , and determine the rest of the colors as relation to it. Now at any given time there could be one element that is focused and active, while other are off  focus and should assume lower visibility. We define  Active colors to be used with focused items (should be contrasting with the  Base color). We also define Inactive colors to be used with off- focus items (its a good idea to make them analogues to the  Base color). Now as we may have 2 kinds of off- focus windows (sticky and non-sticky ), we actually define 2 Inactive colors:  Inactive1 and  Inactive2 .

 Gradient colors

Gradients create very appealing look when used to  color titlebars and other interface elements. Generally its a good idea to use colors of the same  hue , but having different intensity. To denote colors designated for gradients we  add Dark/Light postfix to  color names.

COLOR VALUES


AfterStep supports extremely flexible and extensive ways to define  color value. Standard approach is to use #RRGGBB notation. In addition to that, AfterStep supports the following notations :

#RGB

Same as #RRGGBB, only using 4bit values for components. For example #F84 is the same as #F08040.

#ARGB

This is the same as # RGB plus Alpha value is added (Alpha value defines opacity of the color).

#AARRGGBB

This is the same as #RRGGBB plus 8-bit Alpha value is added.

hsv(hue,saturation,value)

Defines  color using HSV colorspace  hue is measured from 0 to 360 degrees, saturation and value are measured from 0 to 100.

rgb(red, green ,blue)

Defines  color in  RGB colorspace. Similar to #RRGGBB form, but values are not in hex, but in decimals (from 0 to 255). It also allows for nested expressions, such as : rgb(128,128,blue(Base)).

ahsv(alpha, hue ,saturation,value)

Same as hsv(), but also adds Alpha channel.

argb(alpha, red , green ,blue)

Same as argb(), but also adds Alpha channel.

hue(hue,color)

Alters  hue of the given predefined  color , preserving its saturation and value.

sat(saturation,color)

Alters saturation of the given predefined  color .

val(value,color)

Alters value of the given predefined  color .

alpha(alpha,color)

Alters  alpha of the given predefined  color . This is usefull to make colors from colorscheme semi-transparent.

red(red,color)

Alters  red channel value of the given predefined  color .

green(green,color)

Alters  green channel value of the given predefined  color .

blue(blue,color)

Alters  blue channel value of the given predefined  color .

Example :

#This could be used in colorscheme definition : 

 Inactive1  #FF5C5B66  		# or ahsv(255,245,10,40) or argb(255,92,91,102)

#This could be used in  MyStyle  definition in the look. 
#That makes Sticky  window 's titlebar semi-transparent: 

 BackMultiGradient    6 alpha(50,Inactive2Dark) 0.0 alpha(50,Inactive2Light) 1.0