Color Theory/Color for programmers

How to use color in your program workflow in computer graphic Steps: check your data ( type, range) check color profiles of your graphic devices Device calibration choose what feature of the data you want to highlight apply gradient check the result/ optimize it theory khan academy: pixar color colour management In digital imaging systems, color management (or colour management) is the controlled conversion between the color representations of various devices, such as image scanners, digital cameras, monitors, TV screens, film printers, computer printers, offset presses, and corresponding media. The primary goal of color management is to obtain a good match across color devices; for example, the colors of one frame of a video should appear the same on a computer LCD monitor, on a plasma TV screen, and as a printed poster. Color management helps to achieve the same appearance on all of these devices, provided the devices are capable of delivering the needed color intensities. With photography, it is often crucial that prints or online galleries appear how they were intended. Color management cannot guarantee identical color reproduction, as this is rarely possible, but it can at least give more control over any changes which may occur Steps profile of each graphic device (scanner, digital camera, monitor and printer) and operating system rendering intent perceptual rendering: images will be reproduced on prints or displays colorimetric intent: images will be simulating one device on another such as a print on a display ( proofing) saturation intent: business graphics with maximum colourfulness on the print color fidelity refers to the successful interoperability of color data, from image creation to output across multiple targets, such that color reproduction quality consistent with the user’s intent can be achieved First color management system ( CMS) as a part of operating system Linux_color_management, ubuntu color menagment little CMS color bit depth Bit depth is the number of bits per pixel, sample, or texel in a bitmap image (holding one or mode image channels, typical values being 4, 8, 16, 24, 32 When referring to a color component, the concept can be defined as: bits per component ( bpc) bits per channel (bpc) bits per color (bpc) bits per pixel component (bpp) bits per color channel (bpc) bits per sample (bps) Modern standards tend to use bits per component, but historical lower-depth systems used bits per pixel more often. Color bit depth 8 bit color = 1 byte gray images color images with palette = 8-bit RGB (VGA colors) RGB565 ( 16 bit color = 2 bytes) High color. Here red and blue are encoded in 5 bits and green in 6 bits. 16BitColorValues by demmel products gmbh.rgb565-color-picker by Thomas Barth RGB888 ( 24 bit color = 3 bytes ) true color RGBA ( 32 bit color = 4 bytes) Color depth by image file types for png color depth can range from 1 to 64 bits per pixel number type, range and precision integer decimal hexadecimal real numbers Examples by RapidTables:rapidtables : RGB Color White RGB code = (255,255,255) = 255*65536+255*256+255 = #FFFFFF Blue RGB code = (0,0,255) = 0*65536+0*256+255 = #0000FF Precision in GIMP:docs gimp 2.10 : gimp-image-precision Integer Precision Options 8-bit integer 16-bit integer 32-bit integer Floating point precision options 16-bit floating point 32-bit floating point color profile icc specification ICC: a 3x3 matrix a one-dimensional tone curve for each colour channel a thre-dimensional look-up table (LUT) a second 1D tone curve for each channel iccmax DemoIccMAX = Demonstration Implementation for iccMAX color profiles color space color spaceColor_space in wikipediafaqs.org: colorspace-faq discrete samples from color space CMS = Color Matching System = industry standards in the classification of spot color systems manufactures and their color charts ListList of color spaces and their uses in wikipedia CMY CMYK HSL HSLuv = is a human-friendly alternative to HSLhsluv by Alexei Boronine. HSB HSV LAB LCH(uv) LCH(OK)oklch color picker LUV RGB XYZ YXY Types intermediate color space such as L*A*B*, more accurately preserving color. Color conversions from one device to another may also use Lab as an intermediate step Profile connection space (PCS) such as CIELAB or CIEXYZ Working Color Space such as sRGB, Adobe RGB or ProPhoto are color spaces that facilitate good results while editing. For instance, pixels with equal values of R,G,B should appear neutral. Using a large (gamut) working space will lead to posterization, while using a small working space will lead to clipping. linear color space, which corresponds more closely to nature, and makes computations more physically accurateblender manual: color management display color space ( monitor, projector, TV, web) Image Color Spaces PNG or JPEG files will typically store colors in a color space ready for display, not in a linear space. When they are used as textures in renders, they need to be converted to linear first, and when saving renders for display on the web, they also need to be converted to a display space. for intermediate files in production, it is recommended to use OpenEXR files. These are always stored in scene linear color spaces, without any data loss. That makes them suitable to store renders that can later be composited, color graded and converted to different output formats. Uniform color spaces (UCSs) are built such that the same geometrical distance anywhere in the color space reflects the same amount of perceived color difference. There have been many attempts at building such a color space. As human vision has three components, the space is necessarily 3D; it is generally assigned such that one is the lightness and the other two the chroma. A uniform color space is useful for a wide range of tasks. It can be used to calculate color difference or to pick colors in a visually harmonious way, for example. Examples: CIELAB, Nayatani et al. model, Hunt model, RLAB, LLAB, CIECAM97s, IPT, ICtCp, CIECAM02, iCAM06, CAM16, OKLab CSS predefined color spaces: CSS provides several predefined color spaces including: display-p3, which is a wide gamut space typical of current wide-gamut monitors prophoto-rgb, widely used by photographers rec2020, which is a broadcast industry standard, ultra-wide gamut space capable of representing almost all visible real-world colors A leaf colour measured with a spectrophotometer has the color rgb(41.587%, 50.3670%, 36.664%) lch(51.2345% 21.2 130) lab(51.2345% -13.6271 16.2401) sRGB ( 0.41587 , 0.503670 , 0.36664) display-p3 ( 0.43313, 0.50108, 0.37950 ) a98-rgb (0.44091, 0.49971, 0.37408) prophoto-rgb ( 0.36589, 0.41717, 0.31333 ) rec2020( 0.42210, 0.47580, 0.35605 ) properties of a color space perceptual uniformity: the same numerical change in coordinates produces the same perceptual color difference Types by perceptual uniformity perceptually uniform = the same numerical change in coordinates produces the same perceptual color difference LCH (and Lab) OKLab HSLuv CIELUVCIELUV in wikipedia, a color space designed for perceptual uniformity based on human experiments. roughly perceptually uniform: sRGB ( after applying a gamma ) types by precision 8-bit sRGB color space 10-bit 32-bit linear color space Why do we need perceptually uniform color spaces? Perceptually uniform color spaces allow us to align numbers in our code with the visual effect perceived in our viewersprogramming design systems : perceptually-uniform-color-spaces CIE XYZ CIE XYZ. It was designed in such a way that its Y component represented the brightness of the color. RGB Types RGB (linear, non-corrected ) The gamma-corrected color spaces = non-linear sRGB: ( non-linear, a standard default color space for the Internetw3 : sRGB) sRGB Linear space is the same as sRGB except that the transfer function is linear-light (there is no gamma-encoding)coloraide: srgb linear Adobe RGB DCI P3 Display P3 ( wide color gamut) The relationship between sRGB and linear RGB: is that you get an sRGB pixel by raising each component of a linear pixel to the power of 1/2.2. By applying a gamma, sRGB is roughly perceptually uniform. The RGB=>sRGB transformation is approximately:  snibgo's ImageMagick pages Greyscale gamma: RGB/sRGB by Alan Gibson HCV HSV space are not perceived as really equidistant. HCL HCL is in fact just a cylindrical transformation of CIE Lab*. HSL and HSV HSL (for hue, saturation, lightness) and HSV (for hue, saturation, value; also known as HSB, for hue, saturation, brightness) are alternative representations of the RGB color model. HSLuv = Human-friendly HSL CIE LUV the CIE 1976 L*, u*, v* color space, commonly known by its abbreviation CIELUV, is a color space adopted by the International Commission on Illumination (CIE) in 1976, as a simple-to-compute transformation of the 1931 CIE XYZ color space, but which attempted perceptual uniformity LAB CIELAB = CIE L*AB OKLAB = A perceptual color space for image processing. The default color space for mixing (and gradients) in CSS is oklab Hunter LAB Tools Olivier Vicario: Perceptual-ColorPicker for Processing3 OKLAB The default color space for mixing (and gradients) in CSS is oklab A color in Oklab is represented with three coordinates Lab:oklab: A perceptual color space for image processing OKLAB by Tycho Tatitscheff L – perceived lightness ( a unitless number in the range [0,1] ) a – is a numerical value between green (negative values) and red (positive values) b – is a numerical value between blue (negative values) and yellow (positive values) It's corresponding polar form is called Oklch. The standard coordinate can also be transformed into polar form ( Lch), with the coordinates: L = lightness c = chroma h = hue In reverse direction: See also Converting from linear sRGB to Oklab CIELAB color space is a device-independent "standard observer" model is not truly perceptually uniform color classification Web-safe_colors in wikipedia Device-independent Colors: CIE Lab and LCH, Oklab and Oklch w3.org: Device-independent Colors: CIE Lab and LCH, Oklab and Oklch A CSS color isw3.org css-color terminology valid or invalid in or out of gamut: A color may be a valid color but still be outside the range of colors that can be produced by an output device (a screen, projector, or printer) or the range of colors that may be represented by a given color model (for example HSL or HWB) False color in wikipedia Color_coding_in_data_visualization in wikipedia spectral colors: A rainbow is a decomposition of white light into all of the spectral colors. extra-spectral colors Grayscale (achromatic) colors, such as white, gray, and black. Any color that lacks strong chromatic content is said to be unsaturated, achromatic, or near neutral. Pure achromatic colors include black, white, all grays and beiges; near neutrals include browns, tans, pastels, and darker colors. Near neutrals can be of any hue or lightness. Neutrals are obtained by mixing pure colors with white, black or gray, or by mixing two complementary colors. In color theory, neutral colors are colors easily modified by adjacent more saturated colors and they appear to take on the hue complementary to the saturated color. Next to a bright red couch, a gray wall will appear distinctly greenish. Black and white have long been known to combine well with almost any other colors; black decreases the apparent saturation or brightness of colors paired with it, and white shows off all hues to equal effect Any color obtained by mixing a gray-scale color and another color (either spectral or not), such as pink (a mixture of a reddish color and white), or brown (a mixture of orange and black or gray). Violet-red colors, which in color theory include line of purples colors (such as, approximately, magenta and rose), and other variations of purple and red. Impossible colors, which cannot be seen under normal viewing of light, such as over-saturated colors or colors that are seemingly brighter than white. Metallic colors which reflect light by effect. Each valid color is either in-gamut for a particular output device (screen, or printer) or color space, or it is out of gamut. CMS Spot color classification has led to thousands of discrete colors being given unique names or numbers. There are several industry standards in the classification of spot color systems, such as: PANTONE, the dominant spot color printing system in the United States and Europe. Toyo, a common spot color system in Japan. DIC Color System Guide, another spot color system common in Japan – it is based on Munsell color theory.The Informed Illustrator: Digital Spot Color Systems ANPA, a palette of 300 colors specified by the American Newspaper Publishers Association for spot color usage in newspapers. GCMI, a standard for color used in package printing developed by the Glass Packaging Institute (formerly known as the Glass Container Manufacturers Institute, hence the abbreviation). HKS is a color system which contains 120 spot colors and 3,250 tones for coated and uncoated paper. HKS is an abbreviation of three German color manufacturers: Hostmann-Steinberg Druckfarben, Kast + Ehinger Druckfarben and H. Schmincke & Co. RAL is a color matching system used in Europe. The so-called RAL CLASSIC system is mainly used for varnish and powder coating. Because each color system creates their own colors from scratch, spot colors from one system may be impossible to find within the library of another. AS2700 = Australian Standard colours (AS 2700) Color volume thumb|The sRGB gamut projected into CIExyY color space Color volume is the set of all available color at all available hue, saturation and brightness.20 February 2014 HPA Tech Retreat 2014 – Day 4 https://www.dvinfo.net/article/show_reports/hpa-tech-retreat-2014-day-4.html live https://web.archive.org/web/20141101213814/http://www.dvinfo.net/article/trip_reports/hpa-tech-retreat-2014-day-4.html 1 November 2014 25 April 2021 en-USColor Volume of TVs: DCI-P3 and Rec. 2020 https://www.rtings.com/tv/tests/picture-quality/color-volume-hdr-dci-p3-and-rec-2020 2021-04-25 RTINGS.com en-US It's the result of a 2D color space or 2D color gamut (that represent chromaticity) combined with the dynamic range.Color Volume: What It Is and Why It Matters for TV https://news.samsung.com/global/color-volume-what-it-is-and-why-it-matters-for-tv 31 January 2021 news.samsung.com en2020-07-18 Color volume of a TV: You should know this about the successor to color space https://allhomecinema.com/color-volume-of-a-tv-you-should-know-this/ 2021-04-25 Homecinema Magazine en-US2017-04-11 Color Volume: Measuring and Understanding What it Means – ReferenceHT https://referencehometheater.com/2017/commentary/color-volume-measuring-understanding-means/ 2021-04-25 en-US The term has been used to describe HDR's higher color volume than SDR (i.e. peak brightness of at least 1,000 cd/m2 higher than SDR's 100 cd/m2 limit and wider color gamut than :w:Rec. 709 / :w:sRGB).BT.2100 : Image parameter values for high dynamic range television for use in production and international programme exchange https://www.itu.int/rec/R-REC-BT.2100 25 April 2021 www.itu.intBT.1886 : Reference electro-optical transfer function for flat panel displays used in HDTV studio production https://www.itu.int/rec/R-REC-BT.1886/ 25 April 2021 www.itu.intBT.2020 : Parameter values for ultra-high definition television systems for production and international programme exchange https://www.itu.int/rec/R-REC-BT.2020/en 25 April 2021 www.itu.int Color volumeObjective Color Metrics by Chris Seeger SDR Color Volume = 200 cd/m2 HLG Color Volume = 1 000 cd/m2 PQ Color Volume = 10 000 cd/m2 color gamut In color reproduction, including computer graphics and photography, the gamut, or color gamut, is a certain complete subset of colors. The most common usage refers to the subset of colors which can be accurately represented in a given circumstance, such as within a given color space or by a certain output device, like monitor. the difference between the RGB and CMYK color gamuts: the CMYK color gamut is much smaller than the RGB color gamut, thus the CMYK colors look muted. If you were to print the image on a CMYK device (an offset press or maybe even an inkjet printer) the two sides would likely look much more similar, since the combination of cyan, yellow, magenta, and black cannot reproduce the range (gamut) of color that a computer monitor displays. This is a constant issue for those who work in print production. Clients produce bright and colorful images on their computers and are disappointed to see them look muted in print. (An exception is photo processing. In photo processing, like snapshots or 8x10 glossies, most of the RGB gamut is reproduced.) The gamuts of different color spaces may be compared by looking at the volume (in cubic Lab units) of colors that can be expressed. The following table examines the predefined color spaces available in CSS. Display: a narrow-gamut display ( sRGB gamut) a wide-gamut display ( more than sRGB) gamut of Display P3 colorspace: Display-P3 color space includes vivid colors that aren’t available in sRGB. gamut of Rec.2020 colorspace ( rare) gamut of the lab lch colorspaces color space Volume in million Lab unitsw3.org docs : white point sRGB = 0.820 display-p3 = 1.233 a98-rgb 1.310 prophoto-rgb 2.896 rec2020 2.042 Links khan academy : pixar, color-space Color operators Simple rolor operators, an analytical color operators that can be parameterized on a single input variable f(x)nvidia pugems2 : using-lookup-tables-accelerate-color brightness gamma contrast color balance dynamic range Dynamic range Gamma correction gamma-correct downscaleImageMagick: resize_gammaA Cheritat wiki: see image showing gamma-correct downscale of dense part of Mandelbrot set fractalforums.org : gamma-correction-and-location-of-zoom-image The transfer function, also known as the tone response curve (TRC) or gamma function Gamma value real world = 1.0 floating point images ( HDRI) = 1.0 integer ( SDRI with sRGB) images = 2.2 Transfer function Transfer function T in imagingBasic Mapping Techniques from Computer Graphics Laboratory Department of Computer Science Zürich Switzerland function relating image luminance with image samples Examples: pyxplot : color objects gray(x) returns a shade of gray. The argument x should be in the range 0–1. If x=0, black is returned; if x=1, white is returned. rgb(r,g,b) returns a color with the specified RGB components, which should be in the range 0–1. cmyk(c,m,y,k) returns a color with the specified CMYK components, which should be in the range 0–1. hsb(h,s,b) returns a color with the specified coordinates in hue–saturation–brightness color space, which should be in the range 0–1. hsl(h,s,l) Normalisation = resecale to standard rangekitware : using-the-color-map-editor-in-paraview by Utkarsh Ayachit Types: separated transfer functions for color and opacity in ParaViewkitware : using-the-color-map-editor-in-paraview by Utkarsh Ayachit Multi-Dimensional Transfer FunctionsVisualization of Scalar Fields from IBBM "The Transfer Function technique is a volume ray casting and rendering technique that assigns a different color and a different opacity/transparency value in different ranges of intensity values. This is done with a histogram based function, the "transfer function". The transfer function consists several control points, and each one of them corresponds to an intensity value and it has an RGB color and an opacity/transparency value. The intensity value of a control point is displayed with its color and opacity/transparency value, and the intensity values between two control points are displayed with the interpolated colors and the interpolated opacity/transparency values of the two control points. With the use of the transfer function, the different parts of the human body are displayed with a different color and a different opacity/transparency value." from Sante DICOM Viewer 3D Prosantesoft : The Transfer Function technique HDR Transfer_function Tone mapping "The process of compressing a single frame of HDR data (real or synthetic) into a range displayable by monitors is called tone mapping." Adaptive Temporal Tone Mapping by Shaun David Ramsey, J. Thomas Johnson III, Charles Hansen "Tone mapping is the process of transforming floating point color values to the expected [0.0, 1.0] range known as low dynamic range without losing too much detail, often accompanied with a specific stylistic color balance."learnopengl : advanced-Lighting/HDR by Joey de Vries tonemapper = A tool for exploring and applying various tonemapping operators by Tizian Zeltner Tonemap operators Created by romainguy snibgo's ImageMagick pages: HDRI transfer functions "there's a lot of different ways to do it although some methods work better than others depending on what and how you are rendering." FractalLandscaper "if you're rendering something that utilizes random sampling (eg. Buddhabrot) then median stacking several images with different seeds and/or slightly different sampling offsets can be used to produce smoother final images." FractalLandscaper Types with respect to range: global local Transfer functions types with respect to function type: linear functions for raw image formats, Note that some OETF and EOTF have an initial linear portion followed by a non-linear part (e.g. sRGB and Rec.70 ) The identity transfer: output = input gamma functions logarithmic functions HDR: transfer functions for high dynamic range images ( HDR, HDRI ) The identity transfer: output = input Normalizating function, Linear compression, the "-autolevel" function: For all inputs, outputs are in the range [0,1]. Divide by the maximum, then the maximum input is transformed to 1.0. Compress highlights, For non-negatives input values, output values are in the range [0,1]. Negative inputs create negative outputs. The gradient at (0,0) is 1.0. At input=1, output=0.5. For large inputs, the output approaches 1.0 and the gradient approaches zero S-curve: compress highlights and shadows Compress shadows Hybrid Log-Gamma (HLG) transfer function ( Hybrid Log Gamma HDR = HLG HDR) Perceptual quantizer (PQ) transfer function Image magic code convert <SomeDirectory>\*.png -evaluate-sequence median MEDIAN.png Color value Color term color specification in Gnuplot colorhexa: Color encyclopedia : Information and conversion html color codes colour specifications by David Briggs Colour difference coding in computing (unfinished) by Billy Biggs color convert from colorjs library format Color can be specified using one of the formats point in the space - direct color hex RGB hex RGBA rgb rgba hsl hsla cmyk name ( string) indexed color: index number from color palette Alpha color chanel in OpenGl unintuitively, alpha = opaqueness, so alpha = 1 means fully opaque while alpha = 0 means fully transparent. In PIL ( Python Imaging Library ) pixel color format is defined by modesimaging module doc: concepts: 1 (1-bit pixels, black and white, stored with one pixel per byte) L (8-bit pixels, black and white) P (8-bit pixels, mapped to any other mode using a colour palette) RGB (3x8-bit pixels, true colour) RGBA (4x8-bit pixels, true colour with transparency mask) CMYK (4x8-bit pixels, colour separation) YCbCr (3x8-bit pixels, colour video format) I (32-bit signed integer pixels) F (32-bit floating point pixels) LA (L with alpha) RGBX (true colour with padding) RGBa (true colour with premultiplied alpha). Number type (precision) integer ( natural numbers)Floating Point vs Integer by Benjamin Seide unsigned char = range from 0 to 255 which gives 256 numbers integer real number float precision, example : 1.0f double precision hexadecimal color code (HEX color notation )hextoral: what-is-a-hex-color hex: A string representation of sRGB Examples in OpenGl each of color components has a value between 0.0 and 1.0 = in a range of [0,1]. Here 1.0 means as much of that color as possible, and 0.0 means none of that color. glColor3f(0.5f, 0.0f, 1.0f); // (0.5, 0, 1) is half red and full blue, giving dark purple. glm::vec3 coral(1.0f, 0.5f, 0.31f); // coral color definition in glm library and C++ Example in GIMP gray scale precision in Gimp At integer precision An 8-bit integer grayscale image provides 255 available tonal steps from 0 (black) to 255 (white). A 16-bit integer grayscale image provides 65535 available tonal steps from 0 (black) to 65535 (white). A 32-bit integer grayscale image theoretically will provide 4294967295 tonal steps from 0 (black) to 4294967295 (white). But as high bit depth GIMP 2.10 does all internal processing at 32-bit floating point precision, the actual number of steps will be no more than the number of tonal steps available in a 32-bit floating point image. At floating point precision: the available number of tonal steps in a grayscale image depends on the specified bit depth (8-bit, 16-bit, or 32-bit) See also: computergraphics SE question: how-much-precision-half-float-double-etc-is-enough-for-a-color-class?rq=1 Alpha, composition, transparency and layers Alphawebaim.org article: Contrast and Color Accessibility Understanding WCAG 2 Contrast and Color Requirements is the opacity or transparency of a color will also impact contrast is presented as a number between 0 (completely transparent) and 1 (completely opaque) Reducing the alpha for an element will reduce its contrast because you are allowing an underlying color to bleed through layers Fractals and multi layer coloring algorithms by Javier Barrallo and Santiago Sanchez css syntax Css codedescriptionPreview imageoklab(0.5 -0.3 -0.4);color blueoklab(0.7 -0.3 -0.4);color light blueoklab(100% 0.4 0.4); color redoklab(100% 0.2 0.4); color red-acolor(display-p3 1 0 0.331); vibrant pink color in display-p3. The color() function allows a color to be specified in a particular colorspace This shade of blue may commonly be defined in three different ways in webpage styles:Contrast and Color Accessibility Understanding WCAG 2 Contrast and Color Requirements by WEBAIM Last updated: Jan 9, 2021 rgb(97 97 255): The amount of red, green, and blue that form a color are each presented as a number between 0 and 255. #6161FF: This is a "hexadecimal" format where the red/green/blue values are presented as a combination of six letters or numbers. Typically called "Hex," this is a very common format in webpages. hsl(240 100% 69%): Hue, saturation, and lightness map more closely to the way people perceive colors. Changing the "lightness" of a color will change its contrast ratio to another color. Css codedescriptionPreview imagergb(97 97 255)rgb#6161FF;hex valuehsl(240 100% 69%) hsl Lime colorcolorjs apps: color converter: color=lime and precision=4 color(a98-rgb 0.565 1 0.234) color(a98rgb-linear 0.285 1 0.041) color(acescc 0.466 0.548 0.373) color(acescg 0.34 0.916 0.11) hsl(120 100% 50%) color(hsv 120 100 100) hwb(120 0% 0%) color(ictcp 0.54 -0.28 -0.05) color(jzczhz 0.177 0.161 132.5) color(jzazbz 0.177 -0.11 0.119) lch(87.82 113.3 134.4) lab(87.82 -79.3 80.99) lab-d65(87.74 -86.2 83.19) oklch(0.866 0.295 142.5) oklab(86.64% -0.23 0.179) color(display-p3 0.458 0.985 0.298) color(p3-linear 0.178 0.967 0.072) color(prophoto-rgb 0.54 0.928 0.305) color(prophoto-linear 0.33 0.873 0.118) color(rec2020 0.568 0.959 0.269) color(rec2020-linear 0.329 0.92 0.088) color(rec2100-hlg 0.511 0.733 0.264) color(rec2100-pq 0.468 0.572 0.347) color(xyz-abs-d65 72.59 145.2 24.2) color(xyz-d65 0.358 0.715 0.119) rgb(0% 100% 0%) color(srgb-linear 0 1 0) See also LeaVerou: color.js ( Color conversion & manipulation library by the editors of the CSS Color specifications) and www page color picker color picker from colorjs library color contrast Contrast in visual perception is a felt difference in appearance of two or more parts of a field seen simultaneously or successively (hence: brightness contrast, lightness contrast, color contrast, simultaneous contrast successive contrast etc. Contrast in physics is a quantity intended to correlate with the perceived brightness contrast, usually defined by one of a number of formulae (see below) which involve e.g. the luminances of the stimuli considered A contrast can also be due to differences of chromaticity specified by colorimetric characteristics (e.g. the color difference ΔE CIE 1976 UCS). The maximum contrast of an image is the contrast ratio or dynamic range. Typescolorjs library:contrast Simple contrast Web Content Accessibility Guidelines (WCAG)w3.org: WAI = Web Accessibility Initiative and Web Content Accessibility Guidelines (WCAG) Here contrast is a measure of the difference in perceived "luminance" or brightness between two colors. This brightness difference is expressed as a ratio ranging from 1:1 (e.g. white on white) to 21:1 (e.g., black on a white). On a white background pure red (#FF0000) has a ratio of 4:1, pure green (#00FF00) has a very low ratio of 1.4:1, pure blue (#000FF) has a contrast ratio of 8.6:1. Accessible Perceptual Contrast Algorithm ( APCA) Weber contrast, also often simply called Luminance Contrast Delta Phi L star Michelson Contrast, also called Modulation or Peak-to-Peak Constrast Wikipedia Display_contrast Color contrast Luminance Brightness is the term for the subjective impression of the objective luminance Programs leonardo: js package that Generate colors based on a desired contrast ratio color quality Colour Fidelity Indexcolour docs: colour.quality Colour Rendering Index Colour Quality Scale Academy Spectral Similarity Index (SSI) css Color Display Quality: the color-gamut featureW3C: Media Queries Level 4. Value: srgb | p3 | rec2020 References The Hitchhiker's Guide to Digital Colour John the Math Guy. Applied math and color science with a liberal sprinkling of goofy humor. John Seymour