HTML-Colors
HTML (Hypertext Markup Language) provides several ways to specify colors for elements on a web page. Here are the most commonly used methods:
1.Color Names: HTML supports a set of predefined color names that you can use directly.
For example:
|
1 |
<p style="color: red;">This is red text.</p> |
2.Hexadecimal Notation: Colors can also be specified using hexadecimal values. Hexadecimal colors start with a hash symbol (#) followed by a combination of six characters (0-9 and A-F) representing the red, green, and blue (RGB) components of the color.
For example:
|
1 |
<p style="color: #00FF00;">This is green text.</p> |
3.RGB Notation: Another way to specify colors is by using RGB values, which represent the intensity of red, green, and blue components as integers ranging from 0 to 255. The RGB notation is written as rgb(red, green, blue).
For example:
|
1 |
<p style="color: rgb(255, 0, 0);">This is red text.</p> |
4.RGBA Notation: RGBA allows you to specify colors similar to RGB, but with an additional alpha channel representing opacity. The alpha value ranges from 0 (completely transparent) to 1 (fully opaque). The RGBA notation is written as rgba(red, green, blue, alpha).
For example:
|
1 |
<p style="color: rgba(255, 0, 0, 0.5);">This is semi-transparent red text.</p> |
5.HSL Notation: HSL stands for Hue, Saturation, and Lightness. It provides a different way to describe colors. The hue is represented as an angle (0 to 360 degrees), saturation as a percentage (0% to 100%), and lightness as a percentage (0% to 100%). The HSL notation is written as hsl(hue, saturation, lightness).
For example:
|
1 |
<p style="color: hsl(120, 100%, 50%);">This is fully saturated green text.</p> |
6.HSLA Notation: Similar to RGBA, HSLA notation includes an additional alpha channel for opacity. The HSLA notation is written as hsla(hue, saturation, lightness, alpha).
For example:
|
1 |
<p style="color: hsla(120, 100%, 50%, 0.5);">This is semi-transparent green text.</p> |
These methods can be used to specify colors not only for text but also for backgrounds, borders, and other elements on a web page.
