css颜色代码大全

/* CSS颜色代码大全 */

/* 基本颜色 */
.red { color: #FF0000; } /* 红色 */
.green { color: #00FF00; } /* 绿色 */
.blue { color: #0000FF; } /* 蓝色 */
.yellow { color: #FFFF00; } /* 黄色 */
.black { color: #000000; } /* 黑色 */
.white { color: #FFFFFF; } /* 白色 */

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

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

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

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

/* 颜色名称 */
.color-name { color: red; } /* 红色 */

/* 十六进制颜色短码 */
.color-short { color: #F00; } /* 红色 */

/* 颜色渐变 */
.gradient { background: linear-gradient(to right, red, yellow); } /* 从红色到黄色的渐变 */

/* 自定义属性（CSS变量） */
:root {
  --main-color: #FF0000;
}
.custom-color { color: var(--main-color); } /* 使用自定义颜色变量 */

解释说明：

1. 基本颜色：使用十六进制代码表示常见的基本颜色。
2. RGB颜色：通过红、绿、蓝三个分量来定义颜色。
3. RGBA颜色：在RGB基础上增加透明度（alpha）通道。
4. HSL颜色：通过色相（Hue）、饱和度（Saturation）、亮度（Lightness）来定义颜色。
5. HSLA颜色：在HSL基础上增加透明度（alpha）通道。
6. 颜色名称：直接使用预定义的颜色名称。
7. 十六进制颜色短码：简化的十六进制代码，如#F00等价于#FF0000。
8. 颜色渐变：使用线性渐变效果。
9. 自定义属性（CSS变量）：通过CSS变量定义和使用颜色。