Part of the CSS Color Reading List

While longer-winded than hexadecimal, the RGB method for color in CSS is easier to manipulate directly via JavaScript; RGB is also the method that JavaScript uses to report the color of elements, regardless of how they may have originally been set in CSS, making RGB particularly useful to understand.

RGB stands for “red, green. blue”. Like hexadecimal, RGB color is an additive system. Values of 0 for each component will produce a black color, while maximum values for each component will produce white. Modifying the values for each component will change the color; while easier to read than hexadecimal, RGB is not as instinctive as a system like HSL.

rgb values can be specified as values between 0 and 255: 

h3 {
    color: rgb(100, 18, 255);
}

Or as percentages: 

h3 {
    background: rgb(50%, 6%, 100%);
}

10-bit color

It should be noted that both RGB and HSL can be defined using floating-point values: 

#genera {
    background-color: rgb(0.1%, 12.5%, 22%);
}

This provides a far greater gamut (or range) of color values: thousands of levels of each component, for a billion possible color combinations.

Unfortunately, the vast majority of screens don’t yet display this breadth of color, and most browsers will currently round floating-point color values to the nearest whole number.

Future Alternatives

Future versions of the RGB CSS color specification will allow for space-separated values, rather than comma-separated: 

h1 {
    color: rgb(60 30 200);
}

If it is defined in the color, the alpha component is separated with a slash: 

h1 {
    color: rgb(60 30 200 / 0.3);
}

These syntaxes aren’t yet supported in any browser, so there’s little point in using them currently, but you should be aware that they are coming.

Uses of RGB

rgba is particularly useful for shadows and (to a lesser extent) gradients; in JavaScript, it is especially powerful for determining aspects of elements like contrast and luminosity. Otherwise, I generally prefer to use HSL, which I’ll look at next.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.