Movatterモバイル変換


[0]ホーム

URL:


Jump to content
WikipediaThe Free Encyclopedia
Search

Color gradient

From Wikipedia, the free encyclopedia
Specifies a range of position-dependent colors

A linear, or axial, color gradient

Incolor science, acolor gradient (also known as acolor ramp or acolor progression) specifies a range of position-dependentcolors, usually used to fill a region.

In assigning colors to a set of values, a gradient is a continuous colormap, a type ofcolor scheme.In computer graphics, the term swatch[1] has come to mean a palette of active colors.

  • real world color gradients or swatch books
  • RAL CLASSIC K5 color fan
    RAL CLASSIC K5 color fan
  • Pantone color guide
    Pantone color guide
  • cards of Pantone base colors and blends
    cards ofPantone base colors and blends
  • HKS colour fan
    HKS colour fan

Definitions

[edit]
  • Color gradient is a set of colors arranged in alinear order ( ordered)
  • A continuous colormap is a curve through acolorspace
  • curve through RGB colorspace
  • gray
    gray
  • cubehelix[2]
    cubehelix[2]
  • HSV rainbow
    HSV rainbow
  • diverging[3]
    diverging[3]

Strict definition

[edit]

A colormap[4] is afunction which associate a real value r with point c incolor spaceC{\displaystyle C}

f:[rmin,rmax]RC{\displaystyle f:[r_{min},r_{max}]\subset \mathbf {R} \to C}

which is defined by:

where:

Types

[edit]

Criteria for classification:

  • dimension
  • discrete ( classed,color scheme)[5] / continuous
  • shape
  • range: full or limited. Example :pastel color with limited range of saturation.
  • perceptual uniformity[6]
  • order
    • ordered (sequential) and non-ordered (categorical)
    • perceptual order
  • readability for color-vision deficient orcolor-blind people ( colorblind-friendly)
  • color space
  • color depth

Dimension

[edit]

Shapes

[edit]

Axial gradients

[edit]
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 usinglinear interpolation, then extended perpendicular to that line. Indigital imaging systems, colors are typically interpolated in anRGB color space, often usinggamma compressed RGB color values, as opposed to linear. CSS and SVG both support linear gradients.[8][9]

Radial gradients

[edit]
A radial color gradient

A radial gradient is specified as acircle 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 thediffuse reflection of light from a point source by asphere.[citation needed] Both CSS and SVG support radial gradients.[10][11]

Conic gradients

[edit]
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.[12] Conic gradients are sometimes called "sweep gradients" (for example in theOpenType specification) or angular gradients.

Other shapes

[edit]

Invector graphicspolygon meshes can be used, e.g.,Adobe Illustrator supportedgradient meshes.

Color space

[edit]

Effect of color space

[edit]

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 blendingcomplementary colors like red and green, with the middle color being a dark color instead of the expected yellow.[13][14] The radial and conic examples on this page clearly exhibit this error.
  • Handling of other perceptual properties. Ininformation 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.[15]

A "linear" blend would match physical light blending and has been the standard ingame engines for a long time.[16] On the web, however, it has long been neglected for both color gradients and image scaling.[17] Such a blend still has a subtle difference from one done in a perceptually-uniform color space.[18]

Examples

[edit]
  • 2D RGB profiles
  • Gradient on HSV color wheel
  • Single hue (monochromatic) gradient
    Single hue (monochromatic) gradient
  • polychromatic (multi hue) color gradient
    polychromatic (multi hue) color gradient

HSV rainbow

[edit]
  • HSV rainbow
  • RGB 2D profiles
    RGB 2D profiles
  • HSV 2D profiles
    HSV 2D profiles
  • 3D RGB profile
    3D RGB profile

Applications

[edit]
  • represent quantitative or ordinal values, like inheat maps. More precise description is in color box.[19]
  • fill a region:[20] manywindow 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. Seeprogress bar
  • Coloring cartographic maps

See also

[edit]
Wikibooks has a book on the topic of:Colors/Color gradient
Wikimedia Commons has media related toColor gradient.

References

[edit]
  1. ^cssgradient: CSS Gradient Swatches
  2. ^Dave Green's 'cubehelix' colour scheme
  3. ^Diverging Color Maps for Scientific Visualization - Kenneth Moreland
  4. ^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
  5. ^which-color-scale-to-use-in-data-vis by Lisa Charlotte Rost
  6. ^Fabio Crameri: Scientific colour maps
  7. ^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
  8. ^Linear Gradients in "CSS Image Values and Replaced Content Module Level 3", W3C Candidate Recommendation, April 2012
  9. ^Linear Gradients in "SVG 1.1 (Second Edition)", W3C Recommendation, August 2011
  10. ^Radial Gradients in "CSS Image Values and Replaced Content Module Level 3", W3C Candidate Recommendation, April 2012
  11. ^Radial Gradients in "SVG 1.1 (Second Edition)", W3C Recommendation, August 2011
  12. ^mozilla docs: CSS conic-gradient
  13. ^Minute Physics (March 20, 2015)."Computer Color is Broken".YouTube.Archived from the original on December 21, 2021.
  14. ^Novak, John (September 21, 2016)."What every coder should know about gamma".
  15. ^Zeileis, Achim; Fisher, Jason C.; Hornik, Kurt; Ihaka, Ross; McWhite, Claire D.; Murrell, Paul; Stauffer, Reto; Wilke, Claus O. (2019)."colorspace: A Toolbox for Manipulating and Assessing Colors and Palettes".Journal of Statistical Software.96.arXiv:1903.06490.doi:10.18637/jss.v096.i01.
  16. ^"Chapter 24. The Importance of Being Linear".NVIDIA Developer.
  17. ^"Web color is still broken".
  18. ^"How software gets color wrong".bottosson.github.io. December 3, 2020.
  19. ^gnuplot docs 4.2 node167: Color box[permanent dead link]
  20. ^Eisenberg, J. David (2002).SVG Essentials.O'Reilly Media. p. 107.ISBN 0-596-00223-8.
Color topics
Color science
Color physics
Color perception
Color psychology
Color reproduction
Color
philosophy
Color scheme
Color theory
Color terms
Basic English terms
Cultural differences
Color dimensions
Color
organizations
Names
Lists
Shades of:
Related
Retrieved from "https://en.wikipedia.org/w/index.php?title=Color_gradient&oldid=1293576619"
Category:
Hidden categories:

[8]ページ先頭

©2009-2025 Movatter.jp