rgb()

The rgb() functional notation is used to set colors as a combination of red, green and blue.

Any color can be made by mixing these three colors together. The function accepts 3 comma-separated values that are either integers between 0 and 255, or percentages. For example, rgb(255,0,0) and rgb(100%,0%,0%) both correspond to red. The values between 0 and 255 for each color correspond to the hexadecimal values of these colors.

Converting from hexadecimal values to rgb() values is simple. For every six-character hexadecimal color, simply take the first number of every pair (there are three pairs), multiply it by 16, then add the second number of the pair.

For example, the hexadecimal color value #B60023 is made up of three pairs: B6 (red), 00 (green), and 23 (blue). To convert the first pair to an integer value that we want to use inside the rgb() function, we first multiply B (or 11, since B = 11 (see the hexadecimal color format section above)), by 16 to get 176, then add the 6 to give you 182. 

Similarly, we get 00 = (0 * 16) + 0, and 23 = (2 * 16) + 3 = 35. So, the rgb() equivalent of the hexadecimal #B60023 is rgb(182, 0, 35).

There are a lot of tools (e.g. HEX to RGB Converter, Devoth’s HEX 2 RGBA Color Calculator) that can convert hexadecimal RGB colors to the functional rgb() notation and vice versa, so you won’t have to do it yourself. The Chrome Developer Tools also provide an option to convert the colors in the dev tools to one of three formats (hex, rgb, or hsl).

The following examples all specify the same color: purple, which is a combination of red and blue in the different RGB formats (hexadecimal and rgb()).

          color: rgb(100%, 0%, 100%);
          color: rgb(255, 0, 255);
          background-color: #ff00ff;
          border-color: #f0f;
          text-decoration-color: #F0F;
        

The rgb() functional notation is also used to set opaque colors. But what if you want to set a semi-transparent color? That is where the <a href="http://tympanus.net/codrops/css_reference/color_value/#section_rgba">rgba()</a> function comes in.