CSS Colors RGB
CSS Colors, RGB Colors

CSS Colors

CSS Colors are used in fonts color and background colors. Font color can be changed by using css "color" Property, background color is changed using "background-color" property and border color is changed using "border-color" property.

CSS Supports RGB Colors and HSL Colors. RGB and HSL are basically Screen Colors. However for printing purpose, we use CMYK (not allowed in css).

Type of CSS Colors


CSS Color Names

CSS supports total 16,777,216 ( 1 Crore 67 Lakhs ) or 16 Million colors.

However 17 colors are very common and known by their name. These popular colors are given below.

Name Code (HEXA) Example
Black#000000
Silver#c0c0c0
Gray#808080
White#ffffff
Maroon#800000
Red#ff0000
Purple#800080
Fuchsia#ff00ff
Green#008000
Lime#00ff00
Olive#808000
Yellow#ffff00
Navy#000080
Blue#0000ff
Teal#008080
Aqua#00ffff
Transparent#00000000

CSS Colors by color name

Color Red

Color Blue

Color Green


<p style="color:red"> Color Red </p>
<p style="color:blue"> Color Blue </p>
<p style="color:green"> Color Green </p>

RGB Colors

RGB Colors are Screen Colors build using Red, Green and Blue colors ranging from 0 to 255. There are two ways to write rgb, rgb() function and hexadecimal colors. RGB can display total 16 Million colors.

rgb() function

RGB() function is used as a value of color in css. rgb function() has three parameters, first red, second green and third blue. The value of parameters is between 0 to 255 or 0% to 100%.

Using numbers ranging 0-255, 16 million colors can be produced. But 0%-100% can have only 1 million colors. It is recommended to used rgb function with numbers, not percentage.

RGB Colors using rgb() function
Color NameRGB Code( in numbers)RGB Code (in %age)
RedRGB(255,0,0)rgb(100%,0%,0%)
GreenRGB(0,255,0)rgb(0%,100%,0%)
BlueRGB(0,0,255)rgb(0%,0%,100%)
BlackRGB(0,0,0)rgb(0%,0%,0%)
WhiteRGB(255,255,255)rgb(100%,100%,100%)
CyanRGB(0,255,255)rgb(0%,100%,100%)
MagentaRGB(255,0,255)rgb(100%,0%,100%)
yellowRGB(255,255,0)rgb(100%,100%,0%)

RGB Colors using rgb function()

Color Red

Color Green

Color Blue

Color Yellow

Color Magenta

Color Cyan

Color Black

Color White


<p style="color:rgb(255,0,0)"> Color Red </p>
<p style="color:rgb(0,255,0)"> Color Green </p>
<p style="color:rgb(0,0,255)"> Color Blue </p>
<p style="color:rgb(255,255,0)"> Color Yellow </p>
<p style="color:rgb(255,0,255)"> Color Magenta </p>
<p style="color:rgb(0,255,255)"> Color Cyan </p>
<p style="color:rgb(0,0,0)"> Color Black </p>
<p style="color:rgb(255,255,255)"> Color White </p>
		

Hexadecimal Color Code

Hexadecimals colors are basically rgb colors is short form. RGB Colors took 12-16 characters, but Hexadecimals colors takes just 3 or 6 characters followed by hash # prefix.

Hexadecimal number system is 16 base number system where we use 16 different values ranging between 0-F and mix them to write a color code.

In Hexadecimal color coding, we use:

Hexa 0 1 2 3 4 5 6 7 8 9 a b c d e f
Decimal 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Minimum value is in hexadecimal is 0, and maximum is f.

Color code in Hexadecimal

#RRGGBB;   or   #RGB;

There are total six or three places in Hexadecimal colors. In 6 place, First two represent red, next two represents green and last two represents blue color followed by #. While in 3 place, first is red, second is green, and third is blue, followed by #.

Hexadecimal Colors
Color NameHexa CodeHexa in short
Red#FF0000#F00
Green#00FF00#0F0
Blue#0000FF#00F
Black#000000#000
White#FFFFFF#FFF
Cyan#00FFFF#0FF
Magenta#FF00FF#F0F
yellow#FFFF00#FF0

Hexa Colors Example

Color Red

Color Green

Color Blue

Color Yellow

Color Magenta

Color Cyan

Color Black

Color White


<p style="color:#ff0000"> Color Red </p>
<p style="color:#00ff00"> Color Green </p>
<p style="color:#0000ff"> Color Blue </p>
<p style="color:#ff0000"> Color Yellow </p>
<p style="color:#ff00ff"> Color Magenta </p>
<p style="color:#00ffff"> Color Cyan </p>
<p style="color:#000000"> Color Black </p>
<p style="color:#ffffff"> Color White </p>    
		


True Web Colors / Web Safe Colors

Earlier, when color monitors based on 8-bit color graphics ( 8 bit is 256 colors) were popular, designers used only 216 colors so that similar colors would be identified easily. The reason was CRT were based on light projection phenomenon. We can't view all colors on a CRT based Monitors.

However High Resolution, HD, FHD and Retina Based LCDs/LEDs use 24 bit (True Tone with 16M colors) or 32 bit colors

There are total 216 colors in true web or Web Safe colors..

True Web Colors are written in hexa code, but only three place with values 0, 3, 6, 9, c, f

True Web Colors or Web Safe colors list

CSS Color Picker

CSS Color Picker to check RGB and hexadecimal colors.

CSS Color Picker

Hexa Color Code: #

RGB Color Code:

This color picker will not work on Touch based devices, like smartphones and tablet


For CSS3 RGBA, HSL and HSLA colors, click link below

RGBA HSL and HSLA colors