# Color - RGB (Red Green Blue Additive Model)

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

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

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

## 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]);
}


## Specification

• SRGB is known formally as IEC/4WD 61966-2-1. Title: Colour Measurement and Management in Multimedia Systems and Equipment - Part 2.1: Default Colour Space - sRGB. May 5, 1998.

Discover More
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...
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....
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|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 - 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) - Plus Color

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

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...
Color - Channel (Parameters|Properties|Coordinate)

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...
Color - Display (Monitor)

This page is display (monitor, screen) in the context of color. The RGB is the colour model for display of images in electronic systems, such as televisions and computers. Colors generated on given...
Color - Gamut (Subset of colors)

A gamut is the range of colors: a device can process, or that a color space can define. The gamut, or color gamut is: a certain complete subset of colors. or the complete set of colors found...