Color gradient

A linear gradient from blue to red. The fill color of the rectangle is always exactly the same perpendicular to the white line, along the white line the blue portion changes linearly from 100% to 0% - exactly the opposite of the red portion.

A radial gradient in which the color gradient at each point points radially outwards from the starting color in the center of the image. If the start and finish colors are reversed, it will point in the opposite direction.

A color gradient can be characterized with a color gradient . A color gradient is a change from a (start) color to a (target) color with a different hue , color saturation and / or color brightness . A color gradient has a direction which points in the direction of the greatest change in a continuous color gradient.

Color gradients and color spaces

Linear RGB gradient

The RGB color space is a space in which each color is composed of a red, a green and a blue component. This forms a three-dimensional cube in which you can construct a straight line from the start to the target color.

{\ displaystyle F (x) = x \ cdot F_ {1} + \ left (1-x \ right) \ cdot F_ {2}}

Here stands for the 3 RBG colors, which are created with the mixing ratio of the two colors and . ${\ displaystyle F}$ ${\ displaystyle x}$ ${\ displaystyle F_ {1}}$ ${\ displaystyle F_ {2}}$

Non-linear RGB gradient

Since the linear mixing of two colors sometimes leads to unexpected results (e.g. the grayish ring between blue and red in the radial gradient), other interpolations can be used. An example is the following:

{\ displaystyle F (x) = {\ sqrt {x \ cdot F_ {1} ^ {2} + \ left (1-x \ right) \ cdot F_ {2} ^ {2}}}}

Linear gradient in other color spaces

There are a number of other color spaces that can be used to represent colors. For example the CMYK space or the various Lab color spaces (XYZ, Hunter-Lab or CIELab). If you convert the two original colors into such a model, calculate a linear gradient there and convert the result back to RGB, you get a different gradient that is no longer necessarily linear in RGB. Algorithms for converting to and from these rooms can be found on the EasyRGB website .

If you try to apply this method to the CMY space , you will find that the result is the same as that obtained in the RGB space.

Color gradients in the HSV room

The HSV space is a color space in which a color is determined by a hue angle, a saturation and a lightness. This representation should come closer to human color perception than other color spaces. The HSV room can either be understood as a cylinder or a cone.

Linear course

A linear curve can also be created in the HSV by first converting the angles and percentages into spatial coordinates and then back again. Here you have to decide for the representation of the room as a cylinder or a cone.

Clockwise spiral cutout

If two colors differ only in their color angle, the segment of a circle can be assumed to be the gradient on which these two colors lie.

If the two colors also differ in brightness and saturation, a spiral cutout is obtained in the HSV cone.

This type of transition has the advantage that no gray colors appear in the course of similarly saturated colors. However, if the saturation is 0, then unexpected colors also appear in the course.

Counterclockwise spiral

You can follow a similar spiral as described above in the other direction. If the two colors are relatively close together, only one of the two gradients, the shorter one, makes sense; if the two colors are far apart, it is a matter of taste which one is preferred. The upper one runs through the cooler colors, the lower one rather through the warmer colors.

Web links

www.andi-seine-seite.de Online tool that can be used to calculate discrete color gradients with several intermediate results.
Gradient file formats ( Memento from February 17, 2013 in the web archive archive.today )

Individual evidence

↑ EasyRGB ( English ) IRO Group Limited. Retrieved April 25, 2019.