HTML Colors
HTML
HTML colors are used in elements to look attractive and colorful.
Select and convert your color code in RGB | HEX | HSL
HTML Color
Color can be defined in many different ways.
RGB
, RGBA
, HEX
, HSL
, HSLA
are the common methods among many.
In HTML color can be displayed by standard color name also.
HTML color can be used in many ways in elements such as :background color, text color, border color etc.
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Color Example</title>
</head>
<body>
<h2>HTML Color Example</h2>
<h2 style="background-color:Tomato;">Tomato</h2>
<h2 style="background-color:Orange;">Orange</h2>
<h2 style="background-color:DodgerBlue;">DodgerBlue</h2>
<h2 style="background-color:MediumSeaGreen;">MediumSeaGreen</h2>
<h2 style="background-color:Gray;">Gray</h2>
<h2 style="background-color:SlateBlue;">SlateBlue</h2>
<h2 style="background-color:Violet;">Violet</h2>
<h2 style="background-color:LightGray;">LightGray</h2>
</body>
</html>
Click on the "See output" button to see how it works.
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Sample Code
Copy each file contents and paste it to your project, run and see the final output when everything is OK.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Color Example</title>
</head>
<body>
<h2>HTML Color Example</h2>
<h2 style="background-color:Tomato;">Tomato</h2>
<h2 style="background-color:DodgerBlue;">DodgerBlue</h2>
<h2 style="background-color:MediumSeaGreen;">MediumSeaGreen</h2>
<h3 style="background-color:Tomato;">Hello World</h3>
<p style="background-color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p style="background-color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Click on the "Try it Now" button to see how it works.