ZipKit
Glossary

RGB

RGB is an additive color model that describes a color as amounts of red, green and blue light, written on the web as three channel values from 0 to 255. RGB stands for Red, Green, Blue. Screens mix those three lights, so rgb(0 0 0) is black and rgb(255 255 255) is white. In CSS the rgb() function is defined in CSS Color Module Level 4, and its values are interpreted in the sRGB color space.

How it works

Each channel is stored in one byte, so it holds an integer from 0 to 255. Three bytes make a 24-bit color. A hex color such as #3b82f6 is the same three bytes written in base 16: 3b is 59, 82 is 130 and f6 is 246.

CSS accepts two notations for the channels:

  • Numbers: rgb(59 130 246) uses 0 to 255 per channel.
  • Percentages: rgb(23.1% 51.0% 96.5%) maps 0% to 0 and 100% to 255. CSS defines the percentage range this way because many graphics engines stored channels as a single byte.
  • Alpha: the modern syntax adds a fourth value after a slash, as in rgb(59 130 246 / 50%). The older comma form rgba(59, 130, 246, 0.5) still works.

Values outside the range are not an error. CSS clamps them when the value is parsed, so rgb(300 0 0) becomes rgb(255 0 0).

const hex = "#3b82f6";
const [r, g, b] = [1, 3, 5].map(i => parseInt(hex.slice(i, i + 2), 16));
console.log(`rgb(${r} ${g} ${b})`);
console.log(`rgb(${(r / 255 * 100).toFixed(1)}% ${(g / 255 * 100).toFixed(1)}% ${(b / 255 * 100).toFixed(1)}%)`);
console.log(256 ** 3);
const lin = v => ((v / 255 + 0.055) / 1.055) ** 2.4;
console.log((lin(128)).toFixed(4));
console.log((128 / 255).toFixed(4));
rgb(59 130 246)
rgb(23.1% 51.0% 96.5%)
16777216
0.2159
0.5020

The last two lines show why channel values are not light amounts: 128 is 50.2% of the number range but only about 21.6% of the light.

How many colors does RGB have?

RGB with 8 bits per channel has 16,777,216 colors, because 256 x 256 x 256 = 16,777,216. CSS rgb() numbers always map to that 0 to 255 reference range.

What is the range of an RGB value?

Each RGB channel ranges from 0 to 255 in CSS. 0 means none of that light and 255 means the maximum the display can show for that channel.

Common pitfalls

  • Averaging channel values: the numbers are gamma encoded, so the midpoint of two colors computed on raw values comes out darker than real mixed light. Convert to linear light first, blend, then convert back.
  • Assuming rgb() is any color space: CSS rgb() is sRGB. A wide-gamut color needs the color() function with a space such as display-p3, not larger rgb() numbers.
  • Mixing comma and space syntax: rgb(59, 130, 246 / 50%) is invalid. Commas go with the legacy form, the slash with the modern form.
  • Treating out-of-range as an error: values above 255 or below 0 are clamped silently, which can hide a bug in your math. Validate before you serialize.
  • Using 0 to 1 for channels: rgb(0.2 0.5 0.9) means nearly black, because plain numbers are on the 0 to 255 scale. Use percentages or multiply by 255.

Related terms

  • Hex color — the same three channels written as base-16 digits
  • sRGB — the color space that CSS rgb() values are interpreted in
  • HSL — a hue-based way to write the same colors
  • HSV — another hue-based model computed from the same RGB channels
  • CMYK — the subtractive model used for print

See also