Color Names - HTML Colors
Every document or web page is attracted depending on the page design and the color combination like background color, text color, font color, heading color of each page.
In CSS, colors are specified in the form of RGB, HEX, HSL, RGBA, HSLA values.
Color codes and Color names are used to define the color for a particular area.
We can use predefined color names and color codes in CSS style property to give colors to heading, background etc.
Background Color - HTML Colors
Use CSS style background property to give color to the background of your HTML document.
<p style ="background-color:deepskyblue;">Deepskyblue color</p>
Example
<h3>Defining colors using names</h3> <p style="background-color:Orchid;">ORCHID</p> <p style="background-color:DeepSkyBlue;">DEEPSKYBLUE</p> <h3>Defining colors using color codes</h3> <p style="background-color:#F76DAC;">DarkGreen </p> <p style="background-color:#F7BB00;">GoldenRod </p> <h3>Defining colors using RGB</h3> <p style="background-color:rgb(236, 93, 54);">ORANGE</p> <p style="background-color:rgb(141, 190, 106);">Teal</p> <h3>Defining colors using RGB values</h3> <p style="background-color:Crimson ;">Crimson </p> <p style="background-color:Purple;">Purple</p> <h3>Defining colors using HSL values</h3> <p style="background-color:hsl(265, 60%, 67%);">Sienna</p> <p style="background-color:hsl(352, 85%, 79%);">Yellow</p>
Text Color - HTML Colors
Use CSS style property to give color to the text of your HTML document.
<p style ="color:Royalblue;">Royalblue color</p>
Example
<h3>Defining Text colors using names</h3> <p style="color:Orchid;">ORCHID</p> <p style="color:DeepSkyBlue;">DEEPSKYBLUE</p> <h3>Defining Text colors using color codes</h3> <p style="color:#F76DAC;">DarkGreen </p> <p style="color:#F7BB00;">GoldenRod </p> <h3>Defining Text colors using RGB</h3> <p style="color:rgb(236, 93, 54);">ORANGE</p> <p style="color:rgb(141, 190, 106);">Teal</p> <h3>Defining Text colors using RGB values</h3> <p style="color:Crimson;">Crimson </p> <p style="color:Purple;">Purple</p> <h3>Defining Text colors using HSL values</h3> <p style="color:hsl(265, 60%, 67%);">Sienna</p> <p style="color:hsl(352, 85%, 79%);">Yellow</p>
Interview Questions & Answer
Using CSS colors, you can set –
• The color of the text or the Color of the font.
• Background Color.
• Border Color around an Element.
• The color of a Link.
• Margin, Padding, button Colors.
• Other elements like div, paragraphs, etc.
In CSS, Color can be set in 7 ways –
1. color-name – The actual name of the color like Red, Blue, etc.
2. color-code – The Hexadecimal code of the color.
3. rgb– rgb stands for Red, Green, & Blue.
4. rgba– rgba stands for Red, Green, Blue, & Alpha.
5. hsl– hsl stands for Hue, Saturation, &Lightness. (Added as part of CSS3).
6. hsla– hsla stands for Hue, Saturation, Lightness, & Alpha(Added as part of CSS3).
7. hwb– hwb is the amount of Hue, Whiteness, & Blackness(Added as part of CSS4).
We need to use the color property of CSS to change the font color
Example:-
<h3 style="color:green;">This heading is in Font green color</h3>
To change color of one word we can use tag and give inline CSS to tag in HTML[1]For example:-
<h2>Learn HTML <span style="color:crimson";>Colors</span></h2>
HTML Code for red color are:-
1. <h1 style="background-color:#F71F1F;">1</h1> 2. <h1 style="background-color:#F74B4B;">2</h1> 3. <h1 style="background-color:#C30004;">3</h1> 4. <h1 style="background-color:#F80000;">4</h1> 5. <h1 style="background-color:#920912;">5</h1> 6. <h1 style="background-color:#F80404;">6</h1>