I borrowed the term “cline” from meteorology, but it is also used in other scientific fields. Here it describes a continuous, mathematically definable color transformation within a region of the visual field.

There are three types of clines that can be used individually or in combination to effect changes in color:

1. Spectrum

Light that is visible to the human eye lies approximately in the 390-700 nanometer range of wavelengths within the electromagnetic spectrum. A color’s position (wavelength) on that visual spectrum is referred to as its hue.

The distribution of solar irradiance — the variability in the incidence of individual wavelengths within plain white sunlight — peaks between green and yellow, at about 550 nanometers, and tails off to lower incidences at either end, at the blue-violet (390 nm) and the red (700 nm).

The human eye has evolved to perceive these frequencies of varying incidence as colors. Our retinas have three types of color-detecting cone cells which register respectively red, green, and blue. The visual cortex in the brain has adapted to the uneven distribution of solar irradiance by enabling the perception of a greater number of distinct hues between orange and green than in the rest of the spectrum. We simply can’t see as many distinctions in the blue-violet or blue-aqua areas as we do in the yellow-green region of the spectrum.

The peculiar nature of the red-green-blue distribution is represented in the color wheel, which uses as primaries red, green, and blue, with yellow, cyan, and magenta as secondaries. However, the spectrum itself is a simple linear distribution, with two ends. Thus we perceive various grades of magenta at opposite ends of the spectrum, below red and above blue, depending on how our brains process the distribution of the red-green-blue percepts reported by the retina.

Any perceived color may be represented as a three-dimensional vector (R,G,B). In a 24-bit color schema, the values of R, G, and B vary between 0 and 255, with (0,0,0) being black and (255,255,255) being white. A color may be called pure if at least one (but not all three) of its components is zero. For example, (255,0,255) would be a pure magenta of the highest intensity.

A pure color can be assigned a particular wavelength in the visual spectrum, with no admixture of other frequencies.

For non-pure colors — in which R, G, and B all have non-zero values — hue is determined by the ratio of the two largest values in (R,G,B). For example, consider the color vector (75,158,164). If each component is reduced by the minimum (which is the Red value, 75), the “pure” color would be determined by the resulting residues represented by (0,83,89), which is blue-green or cyan, about halfway between green and blue on the spectrum. The addition of the Red component reduces the perceived intensity of the color, but is not large enough to make it appear dull. In other words, this would be a blue-green of “regular” appearance.

The spectrum I use in my programming consists of 427 individual pure hues. The number 427 is not arbitrary: I carefully went through the color wheel looking at pure hues, placing squares of adjacent colors side-by-side on the monitor display to see if I could perceive a distinction between them. If any given hue was perceptibly different from the previous one, I marked it down and added it to the list of spectral elements. Beginning at red and running around the wheel from pure hue to pure hue and back to red, I was able to distinguish 427 separate hues. Because of the distribution of solar irradiance, the number of discernible hues between red and green is considerably larger than in the red/blue and green/blue areas.

Each hue may be varied by reducing or increasing the magnitude of each of the three R-G-B components, but without changing the ratio between the residues of two larger components. In the above blue-green example, the ratio of the residues of the two non-zero components (G:B) in the pure hue is 83:89 or 0.9326. Any (R,G,B) in which (G-R):(B-R) is 0.9326 would therefore have the same hue. The color (55,241,255) has a hue ratio of (241-55):(255-55) = 0.93, and would thus be the same blue-green hue (rounding to the nearest integer in each of the components) as (0,83,89) and (75,158,164). Similarly, (100,128,130) has the same ratio and is thus the same hue, but because the Red component is so large relative to G and B, the perceived color looks dull, almost grey. On the other hand, (240,254,255) is also the same hue, but is very light, almost white.

Holding the blue-green ratio and the R value constant while decreasing the magnitude of G and B thus makes the color duller, with the limiting color being a uniform grey. Holding the ratio constant while increasing R makes the color lighter, with the limiting color being white. Holding the ratio constant while reducing all three components eventually grades to black.

The above description applies to a blue-green hue on the 427-color spectrum. The same would be true of any other hue, each of which would have its own ratio of the residues in two largest components.

A smooth, continuous transformation of hue within an area is called a spectrum cline.

2. Brightness

In mathematical terms, a color vector (R,G,B) for a pure hue changes in brightness when the values of R, G, and B change, but their relative proportions stay the same. In other words, the unit vector for (R,G,B) — call it (R₀,G₀,B₀) — remains the same after the transformation.

Brightness may also be described as intensity.

Thus when a pure bright blue (0,0,255) is decreased in brightness to (0,0,75), it remains the same color but appears very dim.

Changes in brightness for some colors produce counterintuitive results. For example, a pure yellow whose brightness is reduced — say, from (255,255,0) to (80,80,0) — appears olive in tone. Similarly, when reduced in brightness an intense orange becomes brown.

A smooth, continuous transformation of brightness within an area is called a brightness cline.

3. Vividness

The vividness of any given hue is determined by the value of the smallest component in the (R,G,B) vector.

In the example below, a green hue increases in vividness from left to right, as the Red and Blue components of the (R,G,B) vector remain equal to each other as they decrease in magnitude:

To take another example, (128,0,128) is a magenta of medium brightness but maximum vividness. Adding a green value of 64, however, makes it (128,64,128), which still has the same magenta hue, but is much duller. Pushing it to (128,127,128) makes it just barely distinguishable from grey.

A smooth, continuous transformation of vividness within an area is called a vividness cline.

The graphic below presents four versions of the same violet hue created by varying the brightness and vividness:

All four colors have the same underlying hue, in which the red and blue residues have a ratio of 1:2.

Regular		(135,75,195)		(R-G):(B-G) =	60/120, or 1:2
Bright		(202,150,254)		(R-G):(B-G) =	52/104, also 1:2
Dark		(98,38,158)		(R-G):(B-G) =	60/120, same as in “Regular”
Dull		(105,75,135)		(R-G):(B-G) =	30/60, also 1:2

 
Extending the same set of relationships used in the violet hue above to the entire spectrum, each of the 427 hues in the following graphic is displayed in its “regular”, “bright”, “dark”, and “dull” versions:

The spectrum cline in the above graphic is continuous, but the other characteristics for each hue — brightness and vividness — are represented discretely, in just four variants. We may further extend the range of variation by using the other two types of continuous clines.

To begin with, in the image below a basic spectrum cline proceeds four times through all hues in a horizontal progression. The brightness and vividness for each hue are set at medium levels:

Cline, spectrum only

Next we add a brightness cline proceeding four times vertically from the greatest possible brightness to very dark and then back again:

Cline, spectrum plus brightness

Note that in the darker sections of each brightness cline, the region of the spectrum from teal through blue to carmine looks darker than in the range from orange to green. This illustrates the distribution of solar irradiance in the visual spectrum — there is simply far more available light in the orange-to-green region than in the rest of the spectrum.

In the graphic below, a vividness cline has been added in a series of four diagonal stripes, varying from the most vivid to the dullest, proceeding from the top left towards the bottom right. The dullest areas appear in various shades of grey or near-grey:

Cline, spectrum plus brightness plus vividness

The illustrations above simply depict the mathematical relationships that can be used in clines when displaying variations in color. The image below provides an example of the way a spectrum cline might be used in a design. The underlying pattern is based on the large version of the Ornate tile. Each color in the pattern shifts through 50% of the spectrum from left to right:

The effect is not the same as shining a blue light on the left side of the pattern and an orange one on the right. Each of the colors on the left margin shifts through the spectrum independently as we move right — dark green becomes blue, then violet, then carmine, then red, and finally rusty orange; while indigo becomes purple, red, orange, and ochre. In other words, the relationships among the colors remain constant throughout the pattern.

Utilizing all three types of cline in the creation of chromatized transformations makes it possible to build colored patterns of virtually unlimited complexity.

Each of the clines used in these examples employs a linear progression to create a transformation — that is, a series of coefficients (used for brightness, for example) might look like this: 0.1, 0.2, 0.3, 0.4, 0.5,….

However, other continuous functions may also be applied when creating clines. The most useful of these — especially when defining the boundary between two distinct color areas, such as in shadows — is the cosine-proportional transition, which is explained more fully on its own page.