Color - RGB (Red Green Blue Additive Model)

Monet Femme Ombrelle 1886 Logo

About

Red Green Blue (RGB) is a color space (model) that specify a color by setting the amount of each of its three primary colors Red, Green, Blue (RGB).

Red Green Blue is an additive model where primary light color are combined to create other colors. (Note that the main purpose of an additive model is the rendering of images on electronic systems, such as televisions and monitors).

1)

By mixing the primary colors, we get secondary colors: <MATH> \begin{array}{rrrl} & & red & + & green & = & yellow \\ & & red & + & blue & = & magenta / purple \\ & & green & + & blue & = & cyan \\ red & + & green & + & blue & = & white \\ \end{array} </MATH>

Space Definition

As of 2007, sRGB is by far the most commonly used RGB color space 2)

In a sRgb Color space definition, a color consists:

  • of three pigments:
    • red (R),
    • green (G)
    • blue (B)
  • where:
    • the percentage is represented by:
      • a 8-bit numbers value (ie a decimal in the range 0..255)
      • of a percentage in the range 0 to 100%
rgb(255,255,255) = rgb(100%,100%,100%)

In the RGBA space, a fourth entry A has been added Alpha (A) which define the transparency.

Representation

To create a three-dimensional representation of a given color space, we can assign:

  • the amount of red color to the X axis,
  • the amount of green to its Y axis,
  • the amount of blue to its Z axis.

The resulting 3-D space provides a unique position for every possible color that can be created by combining those three pigments.

Rgb Cube 3)

Color Picker

color picker to explore this space. 4)

Operations

to Hsl

  • Algorithm 5)
function rgbToHsl (red, green, blue) {
    let max = Math.max(red, green, blue);
    let min = Math.min(red, green, blue);
    let [hue, sat, light] = [NaN, 0, (min + max)/2];
    let d = max - min;
    if (d !== 0) {
        sat = (light === 0 || light === 1)
            ? 0
            : (max - light) / Math.min(light, 1 - light);
        switch (max) {
            case red:   hue = (green - blue) / d + (green < blue ? 6 : 0); break;
            case green: hue = (blue - red) / d + 2; break;
            case blue:  hue = (red - green) / d + 4;
        }
        hue = hue * 60;
    }
    return [hue, sat * 100, light * 100];
}
  • d3:

from rgb to hsl calculation with d3-color

const color1 = d3.hsl("#075ebb") // hexadecimal RGB
console.log(`hue: ${color1.h} degree`);
console.log(`saturation: ${color1.s} `);
console.log(`lightness: ${color1.l} `);

Rgb Channels Array to Css Rgb Hex and back

In web css, the color are represented with their hexadecimal representation.

  • from the channels / coordinates to the web css hexadecimal representation
function rgbToHex(r, g, b) {
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
  • the web css hexadecimal representation to the channels / coordinates
function hexToRgb(hex) {
  return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}
  • Demo:
let hexColor = rgbToHex(128,128,0);
console.log(`Hexcolor ${hexColor}`);
let rgbColor = hexToRgb(hexColor)
console.log(rgbColor);

to Hwb

Algorithm 6)

function rgbToHwb(red, green, blue) {
    var hsl = rgbToHsl(red, green, blue);
    var white = Math.min(red, green, blue);
    var black = 1 - Math.max(red, green, blue);
    return([hsl[0], white*100, black*100]);
}

to CMYK

See Numerisation to Printing process (Color Space Transformation)

Specification





Discover More
Monet Femme Ombrelle 1886 Logo
CIELChab (a.k.a. LCh or HCL ) ColorSpace

CIELChab is a colorspace based on the following coordinates: L: lightness: in the range [0, 100] C is the Polar_coordinate_systempolar coordinates of chroma, relative saturation in [0, 230] H is...
CSS - Function

A css function is a function that can be used in a CSS property value to calculate complex styling requirement. Css function are mostly used with CSS Variable. Below we define the space unit variable...
CSS - RGB Color Definition

RGB model implementation in CSS Numerical notation where the intensity of the color is an integer between 0 and 255. Hexadecimal notation where the intensity of the color (RR|GG|BB) is an hexadecimal...
Monet Femme Ombrelle 1886 Logo
Color

A color is: a light wave in a range called the visual spectrum (that our eye see) the absence of light or mixed (achromatic colors (white, black, gray) in computer a data type that denotes a color....
Hslsphere
Color - (Lightness|Value|Tone) (White, Gray, Black scale)

Lightness, also known as value or tone, is a property (coordinate) placed on a linear scale where: White is the highest possible value (the lightest) Black is the lowest value (the darkest) Gray...
Color Saturation
Color - (Saturation|Chroma|Intensity) (Purity of a hue)

The third descriptive quality of colour is saturation, also known as chroma or intensity. It defines the degree of purity of a hue. Saturation: is a (comparative|relative) property is linear and...
Color Value Without Color
Color - Achromatic (Without hue)

achromatic colors are colors without hue: white black gray and all colors on the grayscale They does not come from the visible light spectrum. They shows: the totale absence of light reflection...
Color - Additive (Combination|Method)

An additive colorspace works by combination of colors, as in : overlapping projected lights. or in electronic visual displays. subtractive model Additive primaries color are also known as Plus color...
Color Blue
Color - Blue

blue is: a hue color (chromatic) a pure color (without additive) one of the percepted human colors. is used as primary color: coordinate in a colorspace (for instance the rgb colorspace) in...
Hsv Plotly
Color - (Parameters|Properties) Color Description

Colors are represented in a coordinate cartésien model known as a colorspace. Each colorspace has between 3 and 4 coordinates that are known as color channel (ie color property) A human colorspace...



Share this page:
Follow us:
Task Runner