Colors

#	Content	Views
1.	Tutorial Tags	37,059
2.	Tutorial + Programming	1,061,603
3.	Videos	353,169
4.	Results (`Annual + Re-appear`)	44,846
5.	Quiz Chapters	37,081
6.	Quiz Questions	540,074
7.	Quiz Results	29,742
8.	Testimonials	7,594
9.	Projects	33,794
10.	e-Words	22,245
11.	e-Certificates	4,968
12.	Downloads (Softwares)	121,473
13.	Downloads (Syllabus)	2,638

Home
HTML
Colors

Text Color

<!DOCTYPE html>
<html>
<head>
    <title>Text Color</title>
</head>
<body>

<h1 style="color:blue;">CSPunjab.Com</h1>
<p style="color:red;">Computer Science, Punjab</p>

</body>
</html>

Output

Live Demo & Try it yourself!

#CSS #HTML #colors

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

<!DOCTYPE html>
<html>
<head>
<title>Colors</title>
</head>    
<body>

<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>

</body>
</html>

Output

Live Demo & Try it yourself!

HTML supports 140 standard color names

#CSS #HTML #style #color #border

Background Color

You can set the background color for HTML elements:

<!DOCTYPE html>
<html>
<head>
    <title>Background Color</title>
</head>    
<body>

<h1 style="background-color:DodgerBlue;">HTML</h1>

<p style="background-color:Tomato;" align="justify">
The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the meaning and structure of web content. It is often assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.</p>

</body>
</html>

Output

Live Demo & Try it yourself!

#CSS #HTML #style #color #value

Text Color

You can set the color of text:

<!DOCTYPE html>
<html>
<head>
    <Title>Text Color</Title>
</head>    
<body>

<h3 style="color:Tomato;">HTML & CSS</h3>

<p style="color:DodgerBlue;" align="justify">
The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the meaning and structure of web content. It is often assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.
</p>

<p style="color:MediumSeaGreen;" align="justify">
Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML.
</p>

</body>
</html>

Output

Live Demo & Try it yourself!

#CSS #HTML #inline

Border Color

You can set the color of borders:

<!DOCTYPE html>
<html>
<head>
<title>Border Color</title>
</head>
<body>

<h1 style="border: 2px solid Tomato;">CSPunjab.Com</h1>

<h1 style="border: 2px solid DodgerBlue;">CSPunjab.Com</h1>

<h1 style="border: 2px solid Violet;">CSPunjab.Com</h1>

</body>
</html>

Output

Live Demo & Try it yourself!

#CSS #HTML #internal

Color Value

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

The following three <div> elements have their background color set with RGB, HEX, and HSL values:

<!DOCTYPE html>
<html>
<head>
<title>Color Value</title>
</head>
<body>

<p>Same as color name "Tomato":</p>

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

<p>Same as color name "Tomato", but 50% transparent:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>

<p>In addition to the predefined color names, colors can be s

</body>
</html>