The CSS COLORS are used to define color schemes of HTML elements.

CSS Colors help us to design an interactive HTML page. As a web designer, it is very important to understand which kind of color combination is best for a particular web site or web project.

CSS Colors are used in two ways i.e. foreground color ( text color ) and background-color.

Color Example


Hello! This is Text Paragraph.

Text Color

Basically, The CSS colors are used to define color of text in html page.

The HTML tags like <p>, <h>, <a> tags are contains text; So you can define color of text rendered in these tags.

Example of Text Color


This is Text Paragraph, contains CSS color.

Key points

  • If you define a color property for parent element then the child element inherits this color of parent element i.e. parent and child elements color will be the same.

Example of Key Points


Heading within div element.

Hello! This is Text Paragraph within div elemnet.

How to change color selected text?

You can define separate colors for parent and child elements because they will work independently as you want.

Suppose, You have a long paragraph and you want to include color only for some selected text, then you can use <span> HTML tag and define color property within the <span> tag.



Hello! This is a paragraph and you are learning CSS Colors, How to design beautiful html page?

CSS Background Color in HTML

By using CSS background-color you can define color in the background of HTML elements.



Hello! This is a paragraph, please set a background-color.

RGB Colors in CSS

  • RGB Colors are the list of base colors: R stands - Red, G stands - Green, and B stands - Blue.
  • Set RGB color in the format of rgb(value of red, value of green, value of blue ).
  • Set the minium value of any color in number, it starts from '0' to maximum value is '255'.
  • Also you can set the minium value of any color in alphabets, it starts from 'A' to maximum value is 'F'.
  • RGB used to mixed Red, Blue, and Green colors and generate a new Color.
  • For example: rgb(255,255,255) values generate 'white' color, rgb(0,0,0) generate 'Black' color, rgb(0,0,255) generate 'Blue' color.

Example of RGB Colors


Hello! This is a paragraph with rgb color scheme

CSS Color Format

The possible formats of RGB CSS Colors value specify in the table:

Format Syntax Example
keyword red, blue, green etc. p {color:green;}
Hex Code #RRGGBB p {color:#FFAA00;}
Short Hex Code #RGB p {color:#B7D;}
RGB % rgb (ddd%,fff%,ccc%) p {color:rgb(50%,70%,20%);}
RGB Absolute rgb (bbb,ggg,eee) p {color:rgb(213,0,255);}

Monochromatic Colors

Monochromatic colors are the different intensity values of the same color, which means if you use the same color but different lightness like blue, dark blue, light blue, etc. then this kind of color scheme is called a monochromatic color scheme. Basically, you can use an RGB color format to create a monochromatic color.

Red Color Scheme:


Blue Color Scheme:


Green Color Scheme:


Professional Color Scheme Tricks

  • Avoid using too much color in a single web page.
  • Choose 2 to 5 colors for a complete project but it is not fixed, sometimes it depends on requirement.
  • Do not use light colors, choose the color which is comfortable to eye.
  • Try to use monochromatic color scheme for entire project.

Email Us: advertise@gdatamart.com

Donate Us: Support to GDATAMART

© 2023 GDATAMART.COM (All Rights Reserved)