CSS RGB Colors
Web design uses the RGB (Red, Green, Blue) color model as a way of creating various shades and hues to display in browsers. This model combines the three light-based primary colors, which differs a bit from the red, yellow and blue primary colors used to create paint colors. Hexadecimal and RGB codes represent the two basic options for using RGB values to create colors in CSS (Cascading Style Sheets) code.
Other People Are Reading
-
RGB Values in Hexadecimal Codes
-
Hexadecimal color codes are made of three pairs of 16-base (hexadecimal) numbers that range from zero to "F" with "F" being equal to 16. Each pair of numbers represents a red, green and blue value in that order. In HTML and CSS, hexadecimal color codes are prefixed by a hash symbol:
#0776F8
This example code creates a nice blue. When you multiple two values in a pair, you get the 10-base (decimal) value of red, green or blue. The hexadecimal code in the example breaks down as follows:
0 x 7 = 7
7 x 6 = 42
F x 8 = 128
Shorthand Hexadecimal Codes
-
Another way to add colors in CSS using hexadecimal codes uses shortened three-digit codes. Shorthand comes in handy when you want to add white, black or shades of gray. For example, the hexadecimal code for white is "#FFFFFF" while its shorthand representation is "#FFF". Dark grays like "#555555" similarly become "#555".
-
RGB Values Using RGB()
-
Introduced to CSS in level 3 (CSS3), RGB() codes allow you to add colors to your style sheets without the need to convert red, green and blue values into hexadecimal code. Wherever you normally use a hexadecimal code, you can replace it with this:
RGB(255,0,0)
Color values range from zero to 255. Since the first value -- red -- is set to 255 while blue and green are set to zero, this RGB() code creates a bright, primary red. You can also use percentage values in RGB() color codes: "RGB(100%,0,0)".
RGB Values in RGBa()
-
The RGBa() color code adds one extra value to your colors: alpha transparency. This value ranges from zero to one using decimal numbers that equal the percentage of transparency for the color. For example, if you want to add a black drop shadow to an image on a Web page and give the shadow 50 percent transparency, the alpha transparency value in RGBa() is 0.5:
rgba(0,0,0,0.5)
-
