HTML Colors
In HTML, colors are used to make web pages look attractive and readable. Colors can be applied to text, backgrounds, borders, and other elements using CSS or inline styles.
There are different ways to define colors in HTML:
Color Names
HTML supports 140 standard color names like red, blue, green, yellow, etc.
Example
<p style="color: red;">
This is red text.
</p>
<p style="background-color: lightblue;"> This has a light blue background. </p>
<p style="background-color: lightblue;"> This has a light blue background. </p>
Hexadecimal (HEX) Values
Colors can be defined with a hex code in the format #RRGGBB.
- RR = red value
- GG = green value
- BB = blue value
- Each ranges from 00 to FF.
<!DOCTYPE html>
<html>
<head>
<title>Hexadecimal (HEX) Example</title>
</head>
<body>
<p style="color: #ff0000;">This is red text.</p>
<p style="background-color: #00ff00;">This is green background.</p>
</body>
</html>
RGB Values
You can define a color using the RGB function → rgb(red, green, blue) Each value ranges from 0 to 255.
<!DOCTYPE html>
<html>
<head>
<title>RGB Example</title>
</head>
<body>
<p style="color: rgb(0, 0, 255);"> Blue text.</p>
<p style="background-color: rgb(255, 255, 0);"> Yellow background.</p>
</body>
</html>
RGBA Values (with Transparency)
RGBA is just like RGB, but it includes an extra alpha value for transparency.
- 1 = fully visible
- 0 = fully transparent
<!DOCTYPE html>
<html>
<head>
<title>RGBA Example</title>
</head>
<body>
<p style="color: rgba(255, 0, 0, 0.5);">
This is semi-transparent red text.
</p>
</body>
</html>
HSL (Hue, Saturation, Lightness)
- Hue: This is the actual type of color. On a color wheel, it is measured in degrees (0–360). For example:
- 0° = Red
- 120° = Green
- 240° = Blue
- Saturation: The intensity or dullness of the color is controlled by this. It’s given in percentages:
- 0% = completely gray (no color)
- 100% = full, vivid color
- Lightness: This controls how light or dark the color is. It’s also given in percentages:
- 0% = completely black
- 100% = completely white
<!DOCTYPE html>
<html>
<head>
<title>HSL Example</title>
</head>
<body>
<p style="color: hsl(120, 100%, 50%);">
This is green text.
</p>
</body>
</html>
HSLA (with Transparency)
Same as HSL, but includes alpha (transparency).
<!DOCTYPE html>
<html>
<head>
<title>HSLA Example</title>
</head>
<body>
<p style="color: hsla(240, 100%, 50%, 0.3);">
This is transparent blue text.
</p>
</body>
</html>
HTML Colors Chart
Tip: Use these hex codes in CSS like
color: #0066CC;
Accessible text color auto-selected (black/white) for contrast
Copied!