Loading...

Setting a color value with the RGB or RGBA method may be more comfortable for designers less familiar with hexadecimal.

CSS color properties can also be defined with base 10 numbers, which may be more appealing to designers less experienced in computing languages. There is no real advantage or disadvantage to using this method or hexadecimal—it really comes down to a matter of preference.

With this method, the color value is formatted like this: rgb(0, 0, 0). The color order is still the same as with hexadecimal, except in this format, you’ll set a number in the range of 0-255. That’s essentially the same range as with hexadecimal, except you can represent it here with base 10 numbers.

Here’s the same table of full-value colors from the previous page, except written in the RGB format.

Red: rgb(255,0,0)
Green: rgb(0,255,0)
Blue: rgb(0,0,255)
Yellow: rgb(255,255,0)
Cyan: rgb(0,255,255)
Magenta: rgb(255,0,255)

One thing that this method uniquely offers is the ability to also set the opacity of your color. This determines how transparent or opaque your color will display. This version is called RGBA—the “A” represents “alpha”, which is the digital term that refers to opacity. This portion is represented by adding one more number spot to the RGB code, expressed in decimal format. 0.0 will set the color to total transparency, while 1.0 will makes the color completely opaque.

rgba(0,0,255,0.0) rgba(0,0,255,0.2) rgba(0,0,255,0.5) rgba(0,0,255,0.7) rgba(0,0,255,1.0)