css 颜色大全

/* CSS 颜色大全示例代码 */

/* 1. 命名颜色 */
body {
    background-color: red; /* 红色 */
}

h1 {
    color: blue; /* 蓝色 */
}

p {
    color: green; /* 绿色 */
}

/* 2. 十六进制颜色 */
div {
    background-color: #ff0000; /* 红色 */
}

span {
    color: #0000ff; /* 蓝色 */
}

a {
    color: #008000; /* 绿色 */
}

/* 3. RGB 颜色 */
section {
    background-color: rgb(255, 0, 0); /* 红色 */
}

article {
    color: rgb(0, 0, 255); /* 蓝色 */
}

aside {
    color: rgb(0, 128, 0); /* 绿色 */
}

/* 4. RGBA 颜色 (带透明度) */
header {
    background-color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
}

footer {
    color: rgba(0, 0, 255, 0.7); /* 70% 不透明蓝色 */
}

nav {
    color: rgba(0, 128, 0, 0.3); /* 30% 不透明绿色 */
}

/* 5. HSL 颜色 */
main {
    background-color: hsl(0, 100%, 50%); /* 红色 */
}

figure {
    color: hsl(240, 100%, 50%); /* 蓝色 */
}

figcaption {
    color: hsl(120, 100%, 30%); /* 绿色 */
}

/* 6. HSLA 颜色 (带透明度) */
mark {
    background-color: hsla(0, 100%, 50%, 0.5); /* 半透明红色 */
}

small {
    color: hsla(240, 100%, 50%, 0.7); /* 70% 不透明蓝色 */
}

strong {
    color: hsla(120, 100%, 30%, 0.3); /* 30% 不透明绿色 */
}

解释说明：

• 命名颜色：使用预定义的颜色名称，如 red、blue、green。
• 十六进制颜色：使用 # 加上六个十六进制数字表示颜色，如 #ff0000 表示红色。
• RGB 颜色：使用 rgb() 函数指定红、绿、蓝三个通道的值，范围是 0 到 255。
• RGBA 颜色：在 RGB 的基础上增加一个透明度参数（alpha），范围是 0 到 1。
• HSL 颜色：使用 hsl() 函数指定色调（hue）、饱和度（saturation）和亮度（lightness）。
• HSLA 颜色：在 HSL 的基础上增加一个透明度参数（alpha），范围是 0 到 1。

这些方法可以帮助你在 CSS 中灵活地定义和调整颜色。