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.
➔ Colors in HTML can also be displayed using standard color names.
➔ 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
Use of different color formats.
➔ HTML colors can be used in various formats in almost every UI element.
➔ The most common color formats used in web technology are RGB, HEX, HSL, and color names.
➔ Developers use different color formats in HTML and CSS for flexibility and compatibility with different software systems and design tools.
➔ Designers often work with external color tools, graphics software, or design software that uses color formats, and developers follow the designer's requirements.
➔ Hexadecimal (Hex), RGB, and HSL color codes offer millions of color combinations to meet interface design needs, which are not possible with predefined color names.
Standard web color names
➔ This provides simplicity with color names, color names can be used in simple tasks where basic and common color names are appropriate.
➔ Common colors such as red, green, dark blue, etc.
➔ Most browsers support 140 standard web color names and can be used in html and css.
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.