| Introduction to HTML |
|---|
| Introduction to HTML |
|---|
| HTML Attributes |
|---|
| HTML5 Semantic Elements |
|---|
| HTML Graphics |
|---|
HTML colors are used to style web pages and include various attributes such as background color, text color, and border color. These colors can be specified by name, hexadecimal values, RGB values, RGBA values, HSL values, and HSLA values. Let’s explore each in detail with examples.
1. Color Names
HTML provides 140 predefined color names. Here are a few examples:
- Red:
red - Green:
green - Blue:
blue - Yellow:
yellow
Example:
<p style="color: red;">This is red text.</p>
<p style="background-color: yellow;">This background is yellow.</p>
<p style="border: 2px solid blue;">This border is blue.</p>
2. Hexadecimal Values
Hexadecimal values are six-digit codes that represent a color. They start with a ‘#‘ followed by three pairs of hexadecimal digits.
- Red: ‘
#FF0000‘ - Green: ‘
#00FF00‘ - Blue: ‘
#0000FF‘ - Yellow: ‘
#FFFF00‘
Example:
<p style="color: #FF0000;">This is red text.</p>
<p style="background-color: #FFFF00;">This background is yellow.</p>
<p style="border: 2px solid #0000FF;">This border is blue.</p>
3. RGB Values
RGB values specify colors using the Red, Green, and Blue components. Each component can range from 0 to 255.
- Red: ‘
rgb(255, 0, 0)‘ - Green: ‘
rgb(0, 255, 0)‘ - Blue: ‘
rgb(0, 0, 255)‘ - Yellow: ‘
rgb(255, 255, 0)‘
Example:
<p style="color: rgb(255, 0, 0);">This is red text.</p>
<p style="background-color: rgb(255, 255, 0);">This background is yellow.</p>
<p style="border: 2px solid rgb(0, 0, 255);">This border is blue.</p>
4. RGBA Values
RGBA values are similar to RGB values but include an alpha channel for opacity. The alpha value ranges from 0.0 (completely transparent) to 1.0 (completely opaque).
- Red: ‘
rgba(255, 0, 0, 1)‘ - Green: ‘
rgba(0, 255, 0, 0.5)‘ - Blue: ‘
rgba(0, 0, 255, 0.3)‘ - Yellow: ‘
rgba(255, 255, 0, 0.8)‘
Example:
<p style="color: rgba(255, 0, 0, 1);">This is red text.</p>
<p style="background-color: rgba(255, 255, 0, 0.8);">This background is yellow.</p>
<p style="border: 2px solid rgba(0, 0, 255, 0.3);">This border is blue.</p>
5. HSL Values
HSL values specify colors using the Hue, Saturation, and Lightness components. Hue is a degree on the color wheel (0-360), Saturation is a percentage (0-100%), and Lightness is also a percentage (0-100%).
- Red: ‘
hsl(0, 100%, 50%)‘ - Green: ‘
hsl(120, 100%, 50%)‘ - Blue: ‘
hsl(240, 100%, 50%)‘ - Yellow: ‘
hsl(60, 100%, 50%)‘
Example:
<p style="color: hsl(0, 100%, 50%);">This is red text.</p>
<p style="background-color: hsl(60, 100%, 50%);">This background is yellow.</p>
<p style="border: 2px solid hsl(240, 100%, 50%);">This border is blue.</p>
6. HSLA Values
HSLA values are similar to HSL values but include an alpha channel for opacity.
- Red: ‘
hsla(0, 100%, 50%, 1)‘ - Green:
hsla(120, 100%, 50%, 0.5) - Blue:
hsla(240, 100%, 50%, 0.3) - Yellow:
hsla(60, 100%, 50%, 0.8)
Example:
<p style="color: hsla(0, 100%, 50%, 1);">This is red text.</p>
<p style="background-color: hsla(60, 100%, 50%, 0.8);">This background is yellow.</p>
<p style="border: 2px solid hsla(240, 100%, 50%, 0.3);">This border is blue.</p>
- Background Color: Used to set the background of an element.
- Text Color: Used to set the color of the text within an element.
- Border Color: Used to set the color of the border of an element.
- Color Values: Can be specified using color names, hexadecimal values, RGB values, RGBA values, HSL values, and HSLA values.
