About Us

Contact Sales

Back to Glossary

Gradient

A color gradient is often used to fill a region of color, denoting a position-dependent set. For example, many window managers allow specifying the screen background as a gradient. The colors produced by a gradient constantly change with location, producing smooth color transitions.

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

Descriptions:

  • A color gradient is a set of colors arranged in a linear (sequential) pattern.
  • A continuous colormap is a curve across a color space.

Classification Criteria of Color Gradients

  • Dimension                                                                                                                                                                                                         
  • Discrete (classified) / continuous
  • Shape
  • Sensory
  • Uniformity
  • Order sequential (ordered) and unordered (categorical)
  • Perceptual order
  • Readability for people with color vision impairment or colorblindness (colorblind friendly)

Shapes

Axial gradients

An axial color gradient with a white line segment connecting two points An axial color gradient (sometimes called a linear color gradient) is indicated by two points and a color at each point. Colors along the line passing through these points are calculated using linear interpolation, then stretched perpendicular to that line. In digital display systems, color is typically interpolated in an RGB color space, often using gamma, as opposed to compressed linear RGB color values. CSS and SVG support linear gradients.

Radial gradients

A radial gradient is indicated as a circle with one color on the edge and another color in the centre. Colors are calculated by linear interpolation based on distance from the center. This can be used to predict diffuse reflection of light from a point source by a sphere.

Conical Gradients

Conical or conical gradients are gradients in which gradients are rotated around a center point (rather than radiating from the centre). Example conic gradients include pie charts and color wheels.

Other Shapes

Vector graphics in polygon meshes can be used, for example Adobe Illustrator supported gradient meshes.

Dimensions of Gradients

  • 1B
  • 2D
  • 3-dimensional