<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Color Examples</title>
<style>
body {
font-family: Arial, sans-serif;
}
.colorName {
color: red; /* 颜色名称 */
}
.hexColor {
color: #FF5733; /* 十六进制颜色 */
}
.rgbColor {
color: rgb(255, 87, 51); /* RGB颜色 */
}
.rgbaColor {
color: rgba(255, 87, 51, 0.5); /* RGBA颜色，带透明度 */
}
.hslColor {
color: hsl(14, 97%, 50%); /* HSL颜色 */
}
.hslaColor {
color: hsla(14, 97%, 50%, 0.5); /* HSLA颜色，带透明度 */
}
</style>
</head>
<body>
<h1>CSS颜色示例</h1>
<p class="colorName">这是一个使用颜色名称（红色）的例子。</p>
<p class="hexColor">这是一个使用十六进制颜色的例子。</p>
<p class="rgbColor">这是一个使用RGB颜色的例子。</p>
<p class="rgbaColor">这是一个使用RGBA颜色的例子，注意它的透明度。</p>
<p class="hslColor">这是一个使用HSL颜色的例子。</p>
<p class="hslaColor">这是一个使用HSLA颜色的例子，同样带有透明度。</p>
</body>
</html>
