ColorScheme(7x)

✨ ColorScheme(7x) ✨

AfterStep X11 window manager 💖

Okay bestie, sit down, hydrate, because this page is the palette bible for AfterStep. ColorScheme defines the actual color values for a standard set of internal color names — and those names are what you drop into your other config files. It's giving "one file to color them all". 🎨✨

---

🎀 NAME 🎀

ColorScheme — defines color values for a standard set of internal color names, to be used in other configuration files. No cap, that's the whole job description. 🫶

---

💅 CONFIGURATION OPTIONS 💅

Every single one of these is a named color slot. Fill them in, and AfterStep knows what to paint where. Go off. 👑

• Active — the color that goes on the background of different focused elemets, like a focused window's titlebar, a selected menu item, etc. 🌸 The vibe requirement: it should contrast with Base, Inactive1 and Inactive2 in hue, but be similar in saturation. Yes the spec really said "elemets". We move.
• ActiveDark — this one should have slightly lesser value than Active (specifically, be 5-10% darker). Useful when the background of a focused titlebar is a gradient. 🌈
• ActiveLight — this one should have slightly higher value than Active (5-10% lighter). Also for gradiented focused titlebar backgrounds. ✨
• ActiveText — the text color on focused titlebars. It should be in high value contrast with the Active color. Readable or bust. 💅
• Angle — defines the 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 a smaller angle to make the Inactive and Base colors more similar. 📐
• Base — the color that defines the color scheme. It'll be used for the desktop background. When AfterStep is allowed to calculate the color scheme automagically, it uses this color in conjunction with the Angle value as the base of calculations. 👑
• BaseDark — should be about 10% darker than the Base color, but with similar hue and saturation. Useful for drawing a gradiented desktop background. 🌈
• BaseLight — should be about 10% lighter than the Base color, again with similar hue and saturation. Also for gradiented desktop backgrounds. ✨
• Cursor — this color is used for the pmouse pointer, and it should be in high contrast with all the other colors. It's the main character of pointers. 🖱️💖
• DisabledText — the color of the text of disabled menu items. Should be very similar to the menu item's background color. Faded, but make it fashion. 🙈
• HighActive — used for focused menus. Should be similar to the Active color, but somewhat lighter. 🔥
• HighActiveBack — used for the current menu item's background. Should be similar, but somewhat brighter than the Active color. ⭐
• HighActiveBackDark — should be 10% darker than the HighActiveBack color. Useful for a gradiented background of a selected menu item. 🌈
• HighActiveBackLight — should be 10% lighter than the HighActiveBack color. Also useful for a gradiented background of a selected menu item. ✨
• HighActiveDark — should be 10% darker than the HighActive color. Useful for a gradiented background of a focused menu titlebar. 🌈
• HighActiveLight — should be 10% lighter than the HighActive color. Also useful for a gradiented background of a focused menu titlebar. ✨
• HighActiveText — the color used for drawing text on a focused menu titlebar. Should be in high contrast with the HighActive color. 💅
• HighInactive — used for unfocused menus. Should be similar to the Inactive1 color, but somewhat lighter. 🦋
• HighInactiveBack — used for an inactive menu item's background. Should be similar, but somewhat brighter than the HighInactive color. ⭐
• HighInactiveBackDark — should be 10% darker than the HighInactiveBack color. Useful for a gradiented background of an inactive menu item. 🌈
• HighInactiveBackLight — should be 10% lighter than the HighInactiveBack color. Useful for a gradiented background of an inactive menu item. ✨
• HighInactiveDark — should be 10% darker than the HighInactive color. Useful for a gradiented background of inactive menu titlebars. 🌈
• HighInactiveLight — should be 10% lighter than the HighInactive color. Useful for a gradiented background of inactive menu titlebars. ✨
• HighInactiveText — the color of the text on an unfocused menu titlebar. Should be highly contrasting with the HighInactive color. 💜
• Inactive1 — the primary color used for an unfocused window titlebar's background. 🦋
• Inactive1Dark — should be 10% darker than Inactive1. Useful for a gradiented background of unfocused windows. 🌈
• Inactive1Light — should be 10% lighter than Inactive1. Useful for a gradiented background of unfocused windows. ✨
• Inactive2 — the secondary color used for an unfocused window titlebar's background. This is the one you use for unfocused sticky windows. 🍓
• Inactive2Dark — should be 10% darker than Inactive2. Useful for a gradiented background of sticky windows. 🌈
• Inactive2Light — should be 10% lighter than Inactive2. Useful for a gradiented background of sticky windows. ✨
• InactiveText1 — the color of the text on unfocused titlebars. Should be highly contrasting with Inactive1. 💜
• InactiveText2 — the color of the text on sticky titlebars. Should be highly contrasting with Inactive2. 🎀

---

That's every color name in this half of the page, babes. More is literally coming — don't go anywhere. 🫶💖

✨ DESCRIPTION ✨

okay bestie so AfterStep color schemes exist for one very specific reason: putting together a set of colors that actually look good next to each other is hard, and this whole system is here to make that pain go away 💅 while ALSO giving you extra flexibility when you're out here designing your own custom looks and themes.

Here's the tea 🍓 AfterStep Colorscheme is a standard set of color names, and those names can have different color values assigned to them. Those color names get used when you're defining your Look and in XML images. So by assigning different color values to the same color names, you can instantly flip colors across an entire Look — no touching any images, no touching any configuration files. Iconic behavior honestly.

And here's the part that's giving main character energy: not all of the Colorscheme colors have to be explicitly defined. Only the Base color matters. AfterStep can autogenerate a genuinely good-looking colorscheme from that single color ✨. And if you DO explicitly define a color in the colorscheme file, that overrides any automatic choice. Example of this: the NeXTish colorscheme, where literally all of the colors are customized. Also, if you pick a grayscale color for Base, it'll generate a grayscale colorscheme where different shades of gray are used for the different colors.

Selected colorscheme file gets loaded by all modules and by afterstep proper. And the moment a new colorscheme is selected — that triggers reloading of the Look file and all image files. No chill, instant glow-up 💖.

All of the supplied Look files were written to take advantage of the AfterStep colorschemes, bestie. You're not fighting the system here, the system was built for you 🫶

Read on for more deets on how colorschemes get generated and other color-related topics:

🌈 HARMONIOUS COLORS 🌈

Picking a set of matching colors is a serious matter — artists and designers have studied this for centuries, no cap. And as a result, there are certain rules that were developed to make this task simpler.

First things first: instead of picking colors in Red/Green/Blue colorspace, you should be picking matching colors using Hue/Saturation/Value (HSV) colorspace. Color hues are the most important characteristic of a color, and they're measured in degrees:

• 0 — red hue
• 60 — yellow hue
• 120 — green hue
• 180 — cyan hue
• 240 — blue hue
• 300 — purple hue
• 360 — same hue as 0, so, red again 🔁

Hues can be placed on a so-called color circle, which makes it way easier to choose matching colors.

Now, there are two main approaches to selecting a color scheme — single hue, or several hues.

Single hue colors differ in their saturation, and usually give you a soothing, simple theme. That theme can be pleasant to look at, but lowkey it lacks excitement, and it makes it hard to distinguish between different elements.

Using several hues makes the theme a bit more exciting and adds more visual cues to the screen — which means easier operation, and it lets the user relax their eye muscles, which results in better ergonomics. So this is the approach you should be using for user interface colors, periodt. Now, how do you select hues that compose a harmonious theme? The rule of thumb is that hues close to each other on the color circle go well together, while hues on opposing sides of the circle create a contrasting effect.

AfterStep handles this whole "selecting harmonious colors" task by generating a set of colors from a single color using designer rules. Slay 🔥

🖼️ IMAGE HUES 🖼️

The look of the screen (aka the Theme) includes a ton of images — icons, backgrounds, bars, etc. Each one of those images may have one or several dominating hues, which brings us right back to matching hues so you can achieve a harmonious look.

The rule of thumb to follow here: each image on any particular interface element (like a titlebar) should have at least one dominating hue that's the same as the hue of the background of that element.

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

• tinting — if an image has a 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 the image into HSV colorspace, changing the range of hues, and then converting the image back into RGB colorspace.
• superimposition — also, image hues may be altered by superimposing the image over the background image using the allanon composition method, where each pixel is substituted with the average of the image's pixel value and the background's pixel value.

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

🎨 COLOR NAMES 🎨

AfterStep Colorscheme color names can be separated into 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, because colored text tends to "bleed" on top of the background, making it less legible 😭. Another problem with the foreground being colorful is that it increases strain on the user's eyes, forcing them to adapt to too many different contrasting colors.

Base, Active and Inactive

The general color theme of the screen is determined by the background. So we call it a Base color, and we determine the rest of the colors in relation to it.

Now, at any given time there could be one element that's focused and active, while the others are off-focus and should assume lower visibility. So we define Active colors to be used with focused items (these should be contrasting with the Base color). We also define Inactive colors to be used with off-focus items (and it's a good idea to make them analogues to the Base color).

And since 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 a very appealing look when they're used to color titlebars and other interface elements. Generally it's a good idea to use colors of the same hue, but with different intensity. To denote colors designated for gradients, we add a Dark/Light postfix to the color names.

🎨 COLOR VALUES 🎨

AfterStep supports extremely flexible and extensive ways to define a color value. The standard approach is to use #RRGGBB notation. On top of that, AfterStep also supports the following notations:

• #RGB — same as #RRGGBB, only using 4-bit values for the components. For example, #F84 is the same as #F08040.
• #ARGB — this is the same as #RGB, plus an Alpha value is added (the Alpha value defines the opacity of the color).
• #AARRGGBB — this is the same as #RRGGBB, plus an 8-bit Alpha value is added.
• hsv(hue,saturation,value) — defines a color using the HSV colorspace. Hue is measured from 0 to 360 degrees, saturation and value are measured from 0 to 100.
• rgb(red,green,blue) — defines a color in the RGB colorspace. Similar to the #RRGGBB form, but the values are not in hex, they're 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 an Alpha channel.
• argb(alpha,red,green,blue) — same as argb(), but also adds an Alpha channel.
• hue(hue,color) — alters the hue of the given predefined color, preserving its saturation and value.
• sat(saturation,color) — alters the saturation of the given predefined color.
• val(value,color) — alters the value of the given predefined color.
• alpha(alpha,color) — alters the alpha of the given predefined color. This is useful for making colors from the colorscheme semi-transparent.
• red(red,color) — alters the red channel value of the given predefined color.
• green(green,color) — alters the green channel value of the given predefined color.
• blue(blue,color) — alters the blue channel value of the given predefined color.

Example — here's how it could be used in a colorscheme definition:

#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

Actual usage of colors is defined in the AfterStep look file, in MyStyle definitions. Also, all ColorScheme colors can be used in AfterStep XML images, similarly to standard X color aliases 🦋

It's also possible to use different aspects of each color — red, green, blue and alpha, hue, saturation and value individually. For each color there are 6 variables defined using the following syntax: $ascs.colorname.component. For example, $ascs.Active.hue represents the hue of the Active color. This is useful while doing transformations (tinting, hsv, etc.) in AfterStep XML images.

---

and that's a wrap bestie 🎀 you just read part 2 of the ColorScheme(7x) page — this cutie came from the 3rd Berkeley Distribution, and it's for AfterStep v.2.2.12. go forth and pick some harmonious hues, you've fully got this 💜✨