To install click the Add extension button. That's it.

The source code for the WIKI 2 extension is being checked by specialists of the Mozilla Foundation, Google, and Apple. You could also do it yourself at any point in time.

Kelly Slayton
Congratulations on this excellent venture… what a great idea!
Alexander Grigorievskiy
I use WIKI 2 every day and almost forgot how the original Wikipedia looks like.
Live Statistics
English Articles
Improved in 24 Hours
Added in 24 Hours
What we do. Every page goes through several hundred of perfecting techniques; in live mode. Quite the same Wikipedia. Just better.

Color gradient

From Wikipedia, the free encyclopedia

A linear, or axial, color gradient
A linear, or axial, color gradient

In computer graphics, a color gradient (sometimes called a color ramp or color progression) specifies a range of position-dependent colors, usually used to fill a region.[1] For example, 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.

YouTube Encyclopedic

  • 1/3
    2 778 003
    37 602
    129 868
  • Computer Color is Broken
  • CSS Tutorial for Beginners - 57 - Linear gradients
  • Adobe Illustrator CS6 - How to use the gradient tool


If you put a colorful image into photoshop or instagram and blur it, you’ll see a weird, dark boundary between adjacent bright colors. Yuk! In the real world, out of focus colors blend smoothly, going from red to yellow to green – not red to brown to green! This color blending problem isn’t limited to digital photo blurring, either – pretty much any time a computer blurs an image or tries to use transparent edges, you’ll see the same hideous sludge. There’s a very simple explanation for this ugliness – and a simple way to fix it. It all starts with how we perceive brightness. Human vision, like our hearing, works on a relative, roughly logarithmic scale: this means that flipping from one light to two changes the percieved brightness a TON more than going from a hundred and one to a hundred and two, despite adding the same physical amount of light. Our eyes and brains are simply better at detecting small differences in the absolute brightness of dark scenes, and bad at detecting the same differences in bright scenes. Computers and digital image sensors, on the other hand, detect brightness purely based on the number of photons hitting a photodetector – so additional photons register the same increase in brightness regardless of the surrounding scene. When a digital image is stored, the computer records a brightness value for each colors – red, green and blue – at each point of the image. Typically, zero represents zero brightness and one represents 100 percent brightness. So 0.5 is half as bright as 1, right? NOPE. This color might LOOK like it’s halfway between black and white, but that’s because of our logarithmic vision – in terms of absolute physical brightness, it’s only one fifth as many photons as white. Even more crazy, an image value of 0.25 has just one twentieth the photons of white! Digital imaging has a good reason for being designed in this darker-than-the-numbers-suggest way: remember, human vision is better at detecting small differences in the brightness of dark scenes, which software engineers took advantage of as a way of saving disk space in the early days of digital imaging. The trick is simple: when a digital camera captures an image, instead of storing the brightness values it gives, store their square roots – this samples the gradations of dark colors with more data points and bright colors with fewer data points, roughly imitating the characteristics of human vision. When you need to display the image on a monitor, just square the brightness back to present the colors properly. This is all well and good – until you decide to modify the image file. Blurring, for example, is achieved by replacing each pixel with an average of the colors of nearby pixels. Simple enough. But depending on whether you take the average before or after the square-rooting gives different results!! And unfortunately, the vast majority of computer software does this incorrectly. Like, if you want to blur a red and green boundary, you’d expect the middle to be half red and half green. And most computers attempt that by lazily averaging the brightness values of the image FILE, forgetting that the actual brightness values were square-rooted by the camera for better data storage! So the average ends up being too dark, precisely because an average of two square roots is always less than the square root of an average. To correctly blend the red and green and avoid the ugly dark sludge, the computer SHOULD have first squared each of the brightnesses to undo the camera’s square rooting, then averaged them, and then squared-rooted it back – look how much nicer it is!! Unfortunately, the vast majority of software, ranging from iOS to instagram to the standard settings in Adobe Photoshop, takes the lazy, ugly, and wrong approach to image brightness. And while there are advanced settings in photoshop and other professional graphics software that let you use the mathematically and physically correct blending, shouldn’t beauty just be the default?


Axial gradients

An axial color gradient, with a white line segment connecting the two points
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.[2][3]

Radial gradients

A radial color gradient
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] Both CSS and SVG support radial gradients.[4][5]

Other shapes

In some specialized occasions it is appropriate to grab a color gradient that takes two of three colors at the radius of a polygon or other shape and that doesn't forget the aspect of a different color, preferably the fourth, towards the interior of the radius or such a gradient may be removed by combining multiple color gradients, with the straight skeleton of the polygon used to determine the boundaries between pairs of axial gradients.[6]

In vector graphics polygon meshes can be used, e.g., Adobe Illustrator supported gradient meshes.

See also


  1. ^ Eisenberg, J. David (2002). SVG Essentials. O'Reilly Media. p. 107. ISBN 0-596-00223-8.
  2. ^ Linear Gradients in "CSS Image Values and Replaced Content Module Level 3", W3C Candidate Recommendation, April 2012
  3. ^ Linear Gradients in "SVG 1.1 (Second Edition)", W3C Recommendation, August 2011
  4. ^ Radial Gradients in "CSS Image Values and Replaced Content Module Level 3", W3C Candidate Recommendation, April 2012
  5. ^ Radial Gradients in "SVG 1.1 (Second Edition)", W3C Recommendation, August 2011
  6. ^ Asente, Paul; Carr, Nathan (2013), "Creating contour gradients using 3D bevels", Proceedings of the Symposium on Computational Aesthetics (CAE '13, Anaheim, California), New York, NY, USA: ACM, pp. 63–66, doi:10.1145/2487276.2487283, ISBN 978-1-4503-2203-4.

This page was last edited on 30 November 2018, at 16:30
Basis of this page is in Wikipedia. Text is available under the CC BY-SA 3.0 Unported License. Non-text media are available under their specified licenses. Wikipedia® is a registered trademark of the Wikimedia Foundation, Inc. WIKI 2 is an independent company and has no affiliation with Wikimedia Foundation.