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

• Same image on five different color depths, showing resulting (compressed) file sizes. 8 and smaller use an adaptive palette so quality may be better than some systems can provide.
• 
  24 bit.png 16,777,216 colors
  (57,178 in the image)
  98 KB
• 
  8 bit.png 256 colors
  (249 in the image)
  37 KB (−62%)
• 
  4 bit.png 16 colors
  13 KB (−87%)
• 
  2 bit.png 4 colors
  6 KB (−94%)
• 
  1 bit.png 2 colors
  4 KB (−96%)

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.
• 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:

• 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:

• 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 space
  • discrete samples from color space
  • CMS = Color Matching System = industry standards in the classification of spot color systems
  • manufactures and their color charts

List

• CMY
• CMYK
• HSL
  • HSLuv = is a human-friendly alternative to HSL
• HSB
• HSV
• LAB
• LCH(uv)
• LCH(OK)
• 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 accurate
• 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
  • CIELUV, 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 viewers

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 Internet)
    • sRGB Linear space is the same as sRGB except that the transfer function is linear-light (there is no gamma-encoding)
  • 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: $V_{sRGB}=V_{RGB}^{1/2.2}$

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:

• 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

$C={\sqrt {a^{2}+b^{2}}}$

$h^{\circ }={\text{atan2}}(b,a)$

In reverse direction:

$a=C\cos(h^{\circ })$

$b=C\sin(h^{\circ })$

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
• A CSS color is
  • 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.
• 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

The sRGB gamut projected into CIExyY color space

Color volume is the set of all available color at all available hue, saturation and brightness. It's the result of a 2D color space or 2D color gamut (that represent chromaticity) combined with the dynamic range.

The term has been used to describe HDR's higher color volume than SDR (i.e. peak brightness of at least 1,000 cd/m² higher than SDR's 100 cd/m² limit and wider color gamut than w:Rec. 709 / w:sRGB).

Color volume

• SDR Color Volume = 200 cd/m2
• HLG Color Volume = 1 000 cd/m2
• PQ Color Volume = 10 000 cd/m2

color gamut

• 
  P3, Rec2020, sRGB and other gamuts
• 
  sRGB gamut of CRT monitor
• 
  the difference between the RGB and CMYK color gamuts.

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 units

• 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)

• brightness
• gamma
• contrast
• color balance

dynamic range

Dynamic range

Gamma correction

• gamma-correct downscale
• 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 imaging

• function relating image luminance with image samples

 $T:scalarvalue\to colorvalue$

Examples:

• 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 range

 $scalarvalue{\xrightarrow {normalize}}[0,1]{\xrightarrow {transferfunction}}colorvalue$

Types:

• separated transfer functions for color and opacity in ParaView
• Multi-Dimensional Transfer Functions
• "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 Pro
• 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."
• "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."

 $HDR\xrightarrow {tone\ mapping} LDR$

• 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 modes:

• 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)
  • 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 )
  • 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

Alpha

• 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

• 
  This color spectrum image's alpha channel falls off to zero at its base, where it is blended with the background color

layers

• Fractals and multi layer coloring algorithms by Javier Barrallo and Santiago Sanchez

css syntax

Css code	description	Preview image
oklab(0.5 -0.3 -0.4);	color blue
oklab(0.7 -0.3 -0.4);	color light blue
oklab(100% 0.4 0.4);	color red
oklab(100% 0.2 0.4);	color red-a
color(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:

• 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 code	description	Preview image
rgb(97 97 255)	rgb
#6161FF;	hex value
hsl(240 100% 69%)	hsl

Lime color

• 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.

Types

• Simple contrast
• 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 Index
• Colour Rendering Index
• Colour Quality Scale
• Academy Spectral Similarity Index (SSI)
• css Color Display Quality: the color-gamut feature. 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