In color science, a color gradient (also known as a color ramp or a color progression) specifies a range of position-dependent

color Color (or colour in English in the Commonwealth of Nations, Commonwealth English; American and British English spelling differences#-our, -or, see spelling differences) is the visual perception based on the electromagnetic spectrum. Though co ...

s, usually used to fill a region. In assigning colors to a set of values, a gradient is a continuous colormap, a type of

color scheme In color theory, a color scheme is a combination of 2 or more colors used in aesthetic or practical design. Aesthetic color schemes are used to create style and appeal. Colors that create a harmonious feeling when viewed together are often u ...

. In computer graphics, the term swatch has come to mean a palette of active colors. RAL K5 Fächer RGB.jpg, RAL CLASSIC K5 color fan Guidapantonestandard.JPG, Pantone color guide Nuancier Pantone.jpg, cards of Pantone base colors and blends HKS-K-Farbfaecher.jpg, HKS colour fan

Definitions

* Color gradient is a set of colors arranged in a

linear order In mathematics, a total order or linear order is a partial order in which any two elements are comparable. That is, a total order is a binary relation \leq on some set X, which satisfies the following for all a, b and c in X: # a \leq a ( ref ...

( 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 A color space is a specific organization of colors. In combination with color profiling supported by various physical devices, it supports reproducible representations of colorwhether such representation entails an analog or a digital represe ...

C

\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 In mathematics, a real number is a number that can be used to measure a continuous one- dimensional quantity such as a duration or temperature. Here, ''continuous'' means that pairs of values can have arbitrarily small differences. Every re ...

\subset \mathbf

\mathbf

is a set of real numbers * c is a

= point in colorspace C

Types

Criteria for classification: * dimension * discrete ( classed,

) / 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 depth Color depth, also known as bit depth, is either the number of bits used to indicate the color of a single pixel, or the number of bits used for each color component of a single pixel. When referring to a pixel, the concept can be defined as bit ...

Dimension

* 1D * 2D:

Multivariate map A bivariate map or multivariate map is a type of thematic map that displays two or more variables on a single map by combining different sets of symbols.Nelson, J. (2020)Multivariate Mapping ''The Geographic Information Science & Technology Bod ...

, bivariate or trivariate * 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 In mathematics, linear interpolation is a method of curve fitting using linear polynomials to construct new data points within the range of a discrete set of known data points. Linear interpolation between two known points If the two known po ...

, then extended perpendicular to that line. In

digital imaging Digital imaging or digital image acquisition is the creation of a digital representation of the visual characteristics of an object, such as a physical scene or the interior structure of an object. The term is often assumed to imply or include ...

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 A circle is a shape consisting of all point (geometry), points in a plane (mathematics), plane that are at a given distance from a given point, the Centre (geometry), centre. The distance between any point of the circle and the centre is cal ...

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 Diffuse reflection is the reflection of light or other waves or particles from a surface such that a ray incident on the surface is scattered at many angles rather than at just one angle as in the case of specular reflection. An ''ideal'' dif ...

of light from a point source by a

sphere A sphere (from Ancient Greek, Greek , ) is a surface (mathematics), surface analogous to the circle, a curve. In solid geometry, a sphere is the Locus (mathematics), set of points that are all at the same distance from a given point in three ...

. 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. Conic gradients are sometimes called "sweep gradients" (for example in the OpenType specification) or angular gradients.

Other shapes

vector graphics Vector graphics are a form of computer graphics in which visual images are created directly from geometric shapes defined on a Cartesian plane, such as points, lines, curves and polygons. The associated mechanisms may include vector displ ...

polygon mesh In 3D computer graphics and solid modeling, a polygon mesh is a collection of , s and s that defines the shape of a polyhedron, polyhedral object's surface. It simplifies Rendering (computer graphics), rendering, as in a wire-frame model. The fac ...

es can be used, e.g.,

Adobe Illustrator Adobe Illustrator is a vector graphics editor and Computer-aided design, design software developed and marketed by Adobe Inc., Adobe. Originally designed for the Apple Inc., Apple Mac (computer), Macintosh, development of Adobe Illustrator began ...

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 Gamma correction or gamma is a Nonlinearity, nonlinear operation used to encode and decode Relative luminance, luminance or CIE 1931 color space#Tristimulus values, tristimulus values in video or still image systems. Gamma correction is, in the s ...

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 Data and information visualization (data viz/vis or info viz/vis) is the practice of designing and creating Graphics, graphic or visual Representation (arts), representations of a large amount of complex quantitative and qualitative data and i ...

, 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 engine A game engine is a software framework primarily designed for the development of video games which generally includes relevant libraries and support programs such as a level editor. The "engine" terminology is akin to the term " software engine" u ...

s 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 A monochrome or monochromatic image, object or palette is composed of one color (or values of one color). Images using only shades of grey are called grayscale (typically digital) or black-and-white (typically analog). In physics, mon ...

) 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 map A heat map (or heatmap) is a 2-dimensional data visualization technique that represents the magnitude of individual values within a dataset as a color. The variation in color may be by hue or intensity. In some applications such as crime analy ...

s. More precise description is in color box. ** data visualisation * 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 * Coloring cartographic maps Color temperature black body 800-12200K.svg, Color temperature black body 800-12200K Colours of the visible light spectrum.png, Colours of the visible light spectrum 20180522 Color palette for warming stripes - ColorBrewer 9-class single hue.svg, classed color gradient 20181204 Warming stripes (global, WMO, 1850-2018) - Climate Lab Book (Ed Hawkins).svg, Warming stripes that use classed color gradient

References

{{color topics Computer graphics