ColorSchemex - Online in the Cloud

PROGRAM:

NAME

ColorScheme - defines color values for standard set of internal color names, to be used in
other configuration files

CONFIGURATION OPTIONS

Active

Color that will be used for background of different focused elemets, such as
focused window's titlebar, selected menu item, etc. This color should be
contrasting with Base, Inactive1 and Inactive2 in hue, but similar in saturation.

ActiveDark

This color should have slightly lesser value then Active (be 5-10% darker). This is
useful when background of focused titlebar is a gradient.

ActiveLight

This color should have slightly higher value then Active (be 5-10% lighter). This
is useful when background of focused titlebar is a gradient.

ActiveText

Color of the text on focused titlebars. It should be in high value contrast with
Active color.

Angle

Defines angle on the hue circle between Inactive1, Base and Inactive2 colors in
color schemes, that are automagically calculated by AfterStep. Default angle is 30
degrees. Use smaller angle to make Inactive and Base colors more similar.

Base

This color is defining color of the color scheme. It will be used for desktop
background. When AfterStep is allowed to calculate color scheme automagically - it
will use this color in conjunction with the Angle value as base of calculations.

BaseDark

Color that should be about 10% darker then the Base color, but have similar hue and
saturation. Useful for drawing gradiented desktop background.

BaseLight

Color that should be about 10% lighter then the Base color, but have similar hue
and saturation. Useful for drawing gradiented desktop background.

Cursor

This color will be used for pmouse pointer, and it should be in high contrast with
all the other colors.

DisabledText

Color of the text of disabled menu items. Should be very similar to menu item's
background color.

HighActive

Used for focused menus. Should be similar to Active color, but somewhat lighter.

HighActiveBack

Used for current menu item's background. Should be similar, but somewhat brighter
them Active color.

HighActiveBackDark

Should be 10% darker then HighActiveBack color. Useful for gradiented background of
selected menu item.

HighActiveBackLight

Should be 10% lighter then HighActiveBack color. Useful for gradiented background
of selected menu item.

HighActiveDark

Should be 10% darker then HighActive color. Useful for gradiented background of
focused menu titlebar.

HighActiveLight

Should be 10% lighter then HighActive color. Useful for gradiented background of
focused menu titlebar.

HighActiveText

Color to be used for drawing text on focused menu titlebar. Should be in high
contrast with HighActive color.

HighInactive

Used for unfocused menus. Should be similar to Inactive1 color, but somewhat
lighter.

HighInactiveBack

Used for inactive menu item's background. Should be similar, but somewhat brighter
them HighInactive color.

HighInactiveBackDark

Should be 10% darker then HighInactiveBack color. Useful for gradiented background
of inactive menu item.

HighInactiveBackLight

Should be 10% lighter then HighInactiveBack color. Useful for gradiented background
of inactive menu item.

HighInactiveDark

Should be 10% darker then HighInactive color. Useful for gradiented background of
inactive menu titlebars.

HighInactiveLight

Should be 10% lighter then HighInactive color. Useful for gradiented background of
inactive menu titlebars.

HighInactiveText

Color of the text on unfocused menu titlebar. Should be highly contrasting with
HighInactive color.

Inactive1

Primary color used for unfocused window titlebar's background.

Inactive1Dark

Should be 10% darker then Inactive1. Useful for gradiented background of unfocused
windows.

Inactive1Light

Should be 10% lighter then Inactive1. Useful for gradiented background of unfocused
windows.

Inactive2

Secondary color used for unfocused window titlebar's background. Should be used for
unfocused sticky windows.

Inactive2Dark

Should be 10% darker then Inactive2. Useful for gradiented background of sticky
windows.

Inactive2Light

Should be 10% lighter then Inactive2. Useful for gradiented background of sticky
windows.

InactiveText1

Color of the text on unfocused titlebars. Should be highly contrasting with
Inactive1.

InactiveText2

Color of the text on sticky titlebars. Should be highly contrasting with Inactive2.

DESCRIPTION

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 the 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 explicitly 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 chosen 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 colorful
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 useful 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

Actuall usage of colors is defined in AfterStep look file, in MyStyle definitions.
Also all ColorScheme colors could be used in AfterStep XML images, similarly to
standard X color aliases. It is also possible to use different aspects of each
color - red, green, blue and alpha, hue, saturation and value individualy. For each
color there are 6 variables defined using following sytax:
$ascs.colorname.component . For example $ascs.Active.hue represents hue of the
Active color. This is useful while doing transformations (tinting, hsv, etc ) in
AfterStep XML images.

Use ColorSchemex online using onworks.net services