CSS Colors

CSS Colors

CSS colors are used for font colors, background colors, and more. Font color can be changed using the CSS "color" property, background color with "background-color", and border color with "border-color".

CSS supports RGB colors and HSL colors, which are screen-based. For printing, CMYK is used, but it's not supported in CSS.

Type of CSS Colors

1. Color Name
2. RGB Colors
3. Hexadecimal Color code

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.

CSS Colors by color name

<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 built using red, green, and blue values ranging from 0 to 255. There are two ways to write RGB: the rgb() function and hexadecimal colors. RGB can display a total of 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()

<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

Hexadecimal colors are a shorthand for RGB colors. RGB colors take 12-16 characters, but hexadecimal colors use just 3 or 6 characters preceded by a #.

The hexadecimal number system is base-16, using 16 different values from 0-F to create color codes.

In Hexadecimal color coding, we use:

The minimum value in hexadecimal is 0, and the 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 #.

Hexa Colors Example

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

Conclusion

Mastering CSS colors enhances your web design skills. Whether using predefined color names, precise RGB values, or compact hexadecimal codes, you can create visually appealing and accessible websites. Experiment with the color picker tool above and explore advanced options like HSL for more creative possibilities.