Color gradient

In color science, a color gradient specifies a range of position-dependent colors, usually used to fill a region.

Name

A color gradient is also known as a color ramp or a color progression. In assigning colors to a set of values, a gradient is a continuous colormap, a type of color scheme.

Definitions

* Color gradient is a set of colors arranged in a linear order ( ordered)
* A continuous colormap is a curve through a colorspace

3D RGB profile of the Linear Gray Continous color gradient.png, gray
3D RGB profile of cubehelix color gradient.png, cubehelix
0 3d 60 75 v.png, HSV rainbow
3D RGB profile of the Smooth Cool Warm diverging color gradient by Kenneth Moreland.png, diverging

Strict definition

A colormap is a function which associate a real value r with point c in color space $C$

:f: _, r_\subset \mathbf \to C

which is defined by:
* a colorspace C
* an increasing sequence of sampling points r_0 < ... < r_m \in _, r_/math>
* a series of values in the colorspace $c_0,..., c_m \in C$
* the mapping $f(r_i) = c_i ,i = 0,...,m$
* a rule for interpolating the intermediate values r_ < r < r_i \in _, r_/math>

where:
* r is a real number r \in _, r_\subset \mathbf
* $\mathbf$ is a set of real numbers
* c is a color = point in colorspace C

Types

Criteria for classification:
* dimension
* discrete ( clasessed ) / continuous
* shape
* range: full or limited. Example : pastel color with limited range of saturation.
* perceptual uniformity
* order
** ordered (sequential) and non-ordered (categorical)
** perceptual order
* readability for color-vision deficient or color-blind people ( colorblind-friendly)
* color space

Dimension

* 1D
* 2D
* 3D

Shapes

Axial gradients

An axial color gradient (sometimes also called a linear color gradient) is specified by two points, and a color at each point. The colors along the line through those points are calculated using linear interpolation, then extended perpendicular to that line. In digital imaging systems, colors are typically interpolated in an RGB color space, often using gamma compressed RGB color values, as opposed to linear. CSS and SVG both support linear gradients.

Radial gradients

A radial gradient is specified as a circle that has one color at the edge and another at the center. Colors are calculated by linear interpolation based on distance from the center. This can be used to approximate the diffuse reflection of light from a point source by a sphere. Both CSS and SVG support radial gradients.

Conic gradients

Conic or conical gradients are gradients with color transitions rotated around a center point (rather than radiating from the center). Example conic gradients include pie charts and color wheels.

Other shapes

In vector graphics polygon meshes can be used, e.g., Adobe Illustrator supported ''gradient meshes''.

color space

LCH Gradient Example.png, LCH
HSV Gradient Example.png, HSV

Effect of color space

The appearance of a gradient not only varies by the color themselves, but also by the color space the calculation is performed in. The problem usually becomes important for two reasons:
* Gamma correction to a color space. With a typical γ of around 2, it is easy to see that a gamma-enabled color space will blend darker than a linear-intensity color space, since the sum of squares of two numbers is never more than the square of their sum. The effect is most apparent in blending complementary colors like red and green, with the middle color being a dark color instead of the expected yellow. The radial and conic examples on this page clearly exhibit this error.
* Handling of other perceptual properties. In information visualization, it is undesirable to have a supposedly "flat" gradient show non-monotonic variations in lightness and saturation along the way. This is because human vision emphasizes these qualities, causing bias or confusion in interpretation.

A "linear" blend would match physical light blending and has been the standard in game engines for a long time. On the web, however, it has long been neglected for both color gradients and image scaling. Such a blend still has a subtle difference from one done in a perceptually-uniform color space.

Examples

Cubehelix gnuplot palette.png
Gnuplot color gradient, defined as 0 0 0 0, 1 0 0 1, 3 0 1 0, 4 1 0 0, 6 1 1 1.png
P hot inv.gif
P hot.gif
Gnuplot color gradient RGB defined ( 0 "red", 0.5 "yellow", 1 "green" ).png
Matlab gradient.png
Gnuplot HSV gradient.png

Mono1.png, Single hue ( monochromatic ) gradient
Le Jeu Analogue.png, polychromatic ( multi hue ) color gradient

HSV rainbow

Gnuplot HSV gradient.png, RGB 2D profiles
HSV 2D profile of the rainbow gradient.png, HSV 2D profiles
0 3d 60 75 v.png, 3D RGB profile

Applications

* represent quantitative or ordinal values, like in heat maps. More precise description is in color box.
* fill a region: many window managers allow the screen background to be specified as a gradient. The colors produced by a gradient vary continuously with position, producing smooth color transitions.
* visualize the progression of an extended computer operation, such as a download, file transfer, or installation. See progress bar

Weblinks

See also

* Bokashi (printing)
* Color banding
* Color difference
* Color mapping; a function that maps (transforms) the colors of one image to the colors of another image
* Diffusion curve
* dithering
* Image gradient
* Mach banding
* Ombré
* Palette; a finite set of colors in no particular order
* Perceptually uniform color spaces
* Posterization
* Color chart

References

{{color topics

Computer graphics