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
Output
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
Output
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
Output
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.
Example
Output
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.
Example
Output
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
Output
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:
#fc0202
#e80202
#d10202
#bc0101
#a00101
Blue Color Scheme:
#0019ff
#0016e5
#0316bc
#011093
#010b6b
Green Color Scheme:
#00ff00
#02dd02
#01b201
#018901
#005b00
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.