CSS Colors

HTML CSS Colors
HTML & CSS Colors, Web Colors

In CSS, font color is given by using css "color" Property, background color is given using "background-color" property and border color is given using "border-color" property. Basically there are three major colors, Red, Green, and Blue. Rest all colors are a combination of these three colors. RGB Colors are basically Screen Colors. However for printing purpose, we use CMYK

CSS Color codes

  1. Color Name

  2. Hexadecimal Color code

  3. RGB Colors


CSS Color Names

CSS include total 16,777,216 ( 1 Crore 67 Lakhs ) or 16 Million colours.
However 17 colors are known by their name. These popular colors are

Way to write color by its name


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

Color Red

Color Blue

Color Green

Color yellow


RGB Color Code

We can also write a color value using RGB Color Code( Red, Green, Blue) color value.
In RGB, we write a color using its value which lies in-between 0 and 255, or 0%-100%. 0 or 0% is minimum value and 255 or 100% is maximum value.

Color NameRGB Code( in numbers)RGB Code( in %)
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%)

How To Use RGB Colors

Color Red

Color Green

Color Blue


<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>

Hexadecimal Color Code

We can also write color's value using HEXADECIMAL COLOR CODES.
Hexadecimal is basically a 16 base number system where we use 16 different values and mix them to write a color code.

In Hexadecimal color coding, we use:

0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.

Minimum value is 0, and maximum is f.

Color code in Hexadecimal

#RRGGBB;

There are total six digits. First two represent red, next two represents green and last two represents blue color.

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

Rest all color are mixture of RGB Colors

How To Use Hexa Colors

Color Red

Color Blue

Color Green

Color Black

Color White


<p style="color:#ff0000"> Color Red </p>
<p style="color:#0000ff"> Color Blue </p>
<p style="color:#00ff00"> Color Green </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 or 8-bit color graphics were popular, and High Resolution, HD, FHD and Ratina Based LCDs/LEDs were not in the market, Designers were asked to use only few major colors so that similar colors could be identified easily. The reason was CRT were based on light projection phenomenon. We can't view all colors on a CRT based Monitors.

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

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

True Web Colors/ Web Safe colors


CSS Color Picker

HTML Color Picker, or CSS Color Picker

CSS Color Picker

Red

Green

Blue

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 below

RGBA HSL and HSLA colors