HTML Colors

HTML allows you to apply colors to text, backgrounds, borders, and other elements using the style attribute.

Colors can be defined in different ways such as:

Color Names (red, blue, green)
HEX Values (#ff0000)
RGB Values (rgb(255, 0, 0))
HSL Values (hsl(0, 100%, 50%))

Example Code

<!DOCTYPE html>
<html>
<body>

<p style="color: red;">This text is red.</p>
<p style="color: #00ff00;">This text is green (HEX value).</p>
<p style="color: rgb(0, 0, 255);">This text is blue (RGB value).</p>

<p style="background-color: yellow;">This text has a yellow background.</p>
<p style="background-color: hsl(200, 100%, 50%);">This text uses HSL color.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

This text is red.

This text is green (HEX value).

This text is blue (RGB value).

This text has a yellow background.

This text uses HSL color.

</body>

</html>

Output Preview

Red text
Green text (HEX format)
Blue text (RGB format)
Yellow background
HSL-style colored background

Color Types Summary

Type	Example
Name	`red`, `blue`
HEX	`#ff0000`
RGB	`rgb(255, 0, 0)`
HSL	`hsl(0, 100%, 50%)`

Colors make your webpage more attractive and help highlight important content.

CodeCapsule

Sanjit Sinha — Web Developer | PHP • Laravel • CodeIgniter • MySQL • Bootstrap Founder, CodeCapsule — Student projects & practical coding guides. Email: info@codecapsule.in • Website: CodeCapsule.in

HTML Colors

HTML Colors

Example Code

Output Preview

Color Types Summary

You may also like...

Leave a Reply Cancel reply

HTML Colors

HTML Colors

Example Code

Output Preview

Color Types Summary

You may also like...

HTML Quotation and Citation Elements

HTML Links

HTML SVG Graphics

Leave a Reply Cancel reply