{{short description|Specifies a range of position-dependent colors}} {{Use American English|date=March 2021}} {{Use mdy dates|date=March 2021}}
thumb|150px|A linear, or axial color gradient
In color science, a '''color gradient''' (also known as a '''color ramp''' or a '''color progression''') specifies a range of position-dependent colors, usually used to fill a region.
{{anchor|Nomenclature}}In assigning colors to a set of values, a gradient is a continuous colormap, a type of color scheme. In computer graphics, the term swatch<ref>[https://cssgradient.io/swatches/ cssgradient: CSS Gradient Swatches ]</ref> has come to mean a palette of active colors.
<gallery caption="real world color gradients or swatch books"> 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 </gallery>
==Definitions== * Color gradient is a set of colors arranged in a linear order (ordered) * A continuous colormap is a curve through a colorspace
<gallery caption="curve through RGB colorspace"> 3D RGB profile of the Linear Gray Continous color gradient.png|gray 3D RGB profile of cubehelix color gradient.png|cubehelix<ref>[https://people.phy.cam.ac.uk/dag9/CUBEHELIX/ Dave Green's 'cubehelix' colour scheme]</ref> 0 3d 60 75 v.png|HSV rainbow 3D RGB profile of the Smooth Cool Warm diverging color gradient by Kenneth Moreland.png|diverging<ref>[http://www.kennethmoreland.com/color-maps/ Diverging Color Maps for Scientific Visualization - Kenneth Moreland]</ref> </gallery>
===Strict definition===
A colormap<ref>[https://datascience.dsscale.org/wp-content/uploads/2017/10/TheGoodtheBadandtheUgly.pdf The Good, the Bad, and the Ugly: A Theoretical Framework for the Assessment of Continuous Colormaps by Roxana Bujack, Terece L. Turton, Francesca Samsel, Colin Ware]</ref> is a function which associate a real value r with point c in color space <math>C</math>
:<math>f: [r_{min}, r_{max}] \subset \mathbf{R} \to C</math>
which is defined by: * a colorspace C * an increasing sequence of sampling points <math>r_0 < ... < r_m \in [r_{min}, r_{max}]</math> * a series of values in the colorspace <math>c_0,..., c_m \in C</math> * the mapping <math>f(r_i) = c_i ,i = 0,...,m </math> * a rule for interpolating the intermediate values <math>r_{i-1} < r < r_i \in [r_{min}, r_{max}]</math>
where: * r is a real number <math> r \in [r_{min}, r_{max}] \subset \mathbf{R} </math> * <math>\mathbf{R}</math> is a set of real numbers * c is a color = point in colorspace C
==Types== Criteria for classification: * dimension * discrete ( classed, color scheme) <ref>[https://blog.datawrapper.de/which-color-scale-to-use-in-data-vis/ which-color-scale-to-use-in-data-vis by Lisa Charlotte Rost]</ref> / continuous * shape * range: full or limited. Example : pastel color with limited range of saturation. * perceptual uniformity<ref>[https://www.fabiocrameri.ch/visualisation/#ws-block-features-with-aside-icons-3-cols-mQE9rwEn Fabio Crameri: Scientific colour maps]</ref> * 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:<ref>[http://publica.fraunhofer.de/documents/N-337230.html A survey and task-based quality assessment of static 2D colormaps] Author(s): Bernard, Jürgen; Steiger, Martin; Mittelstädt, Sebastian; Thum, Simon; Keim, Daniel; Kohlhammer, Jörn, In Kao, David L. (Ed.) ; Society for Imaging Science and Technology -IS&T-; Society of Photo-Optical Instrumentation Engineers -SPIE-, Bellingham/Wash.: Visualization and Data Analysis 2015 : 9–11 February 2015, San Francisco, California Bellingham, WA: SPIE, 2015 (Proceedings of SPIE 9397) {{ISBN|9781628414875}}</ref> Multivariate map, bivariate or trivariate * 3D
===Shapes=== ====Axial gradients==== thumb|150px|An axial color gradient, with a white line segment connecting the two points 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.<ref> [http://www.w3.org/TR/2012/CR-css3-images-20120417/#linear-gradients Linear Gradients] in "CSS Image Values and Replaced Content Module Level 3", W3C Candidate Recommendation, April 2012</ref><ref> [http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#LinearGradients Linear Gradients] in "SVG 1.1 (Second Edition)", W3C Recommendation, August 2011</ref>
====Radial gradients==== thumb|150px|A radial color gradient 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.{{citation needed|date=September 2014}} Both CSS and SVG support radial gradients.<ref> [http://www.w3.org/TR/2012/CR-css3-images-20120417/#radial-gradients Radial Gradients] in "CSS Image Values and Replaced Content Module Level 3", W3C Candidate Recommendation, April 2012</ref><ref> [http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#RadialGradients Radial Gradients] in "SVG 1.1 (Second Edition)", W3C Recommendation, August 2011</ref>
====Conic gradients====
thumb|right|conic gradient 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.<ref>[https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient mozilla docs: CSS conic-gradient]</ref> Conic gradients are sometimes called "sweep gradients" (for example in the OpenType specification) or angular gradients.
====Other shapes==== {{anchor|gradient mesh}}In vector graphics polygon meshes can be used, e.g., Adobe Illustrator supports ''gradient meshes''.
===Color space===
<gallery> LCH Gradient Example.png|LCH HSV Gradient Example.png|HSV </gallery>
====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.<ref>{{cite web|url=https://www.youtube.com/watch?v=LKnqECcg6Gw |archive-url=https://ghostarchive.org/varchive/youtube/20211221/LKnqECcg6Gw |archive-date=2021-12-21 |url-status=live|title=Computer Color is Broken|author=Minute Physics|date=March 20, 2015|website=YouTube}}{{cbignore}}</ref><ref>{{cite web |title=What every coder should know about gamma |url=https://blog.johnnovak.net/2016/09/21/what-every-coder-should-know-about-gamma/ |last=Novak|first=John|date=September 21, 2016}}</ref> 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.<ref name="Zeileis2019">{{Cite journal |arxiv = 1903.06490|last1 = Zeileis|first1 = Achim|title = '''colorspace''': A Toolbox for Manipulating and Assessing Colors and Palettes|last2 = Fisher|first2 = Jason C.|last3 = Hornik|first3 = Kurt|last4 = Ihaka|first4 = Ross|last5 = McWhite|first5 = Claire D.|last6 = Murrell|first6 = Paul|last7 = Stauffer|first7 = Reto|last8 = Wilke|first8 = Claus O.| journal=Journal of Statistical Software |year = 2019| volume=96 | doi=10.18637/jss.v096.i01 | doi-access=free}}</ref>
A "linear" blend would match physical light blending and has been the standard in game engines for a long time.<ref>{{cite web |title=Chapter 24. The Importance of Being Linear |url=https://developer.nvidia.com/gpugems/gpugems3/part-iv-image-effects/chapter-24-importance-being-linear |website=NVIDIA Developer |language=en}}</ref> On the web, however, it has long been neglected for both color gradients and image scaling.<ref>{{cite web |title=Web color is still broken |url=https://webcolorisstillbroken.com}}</ref> Such a blend still has a subtle difference from one done in a perceptually-uniform color space.<ref>{{cite web |title=How software gets color wrong |url=https://bottosson.github.io/posts/colorwrong/ |website=bottosson.github.io |date=December 3, 2020 |language=en}}</ref>
==Examples== <gallery caption="2D RGB profiles"> 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 </gallery>
<gallery caption="Gradient on HSV color wheel"> Mono1.png| Single hue (monochromatic) gradient Le Jeu Analogue.png|polychromatic (multi hue) color gradient </gallery>
===HSV rainbow===
<gallery caption="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 </gallery>
==Applications== * represent quantitative or ordinal values, like in heat maps. More precise description is in color box.<ref>[https://gnuplot.sourceforge.net/docs%204.2/node167.html gnuplot docs 4.2 node167: Color box]{{Dead link|date=April 2024 |bot=InternetArchiveBot |fix-attempted=yes }}</ref> ** data visualisation * fill a region:<ref>{{cite book |title=SVG Essentials |url=https://archive.org/details/svgessentials00eise_317 |url-access=limited |isbn=0-596-00223-8 |last=Eisenberg |first=J. David |year=2002 |publisher=O'Reilly Media |page=[https://archive.org/details/svgessentials00eise_317/page/n32 107]}}</ref> 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 <gallery caption="Color gradients in physics"> 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 1850- Warming stripes - global average surface temperature.svg|Warming stripes that use classed color gradient </gallery>
== See also == {{Wikibooks|Colors/Color gradient}} {{Commons category|Color gradient}} * Bokashi (printing) * Color banding * Color difference * Color grading * Color mapping; a function that maps (transforms) the colors of one image to the colors of another image * Diffusion curve * Dither * Image gradient * Mach banding * Ombré * Palette; a finite set of colors in no particular order * Perceptually uniform color spaces * Posterization * Color chart * Swatch books (like in Paper color swatch book or RAL CLASSIC K5 colour fan or Pantone color guides)
== References == {{reflist}}
{{color topics}}
Category:Computer graphics