Criteria for classification: • dimension • discrete ( classed,
color scheme) / 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 •
color depth Dimension • 1D • 2D:
Multivariate map, 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, 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. Conic gradients are sometimes called "sweep gradients" (for example in the
OpenType specification) or angular gradients.
Other shapes In
vector graphics polygon meshes can be used, e.g.,
Adobe Illustrator supports
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==