在 CSS 中，彩虹七色（红、橙、黄、绿、蓝、靛、紫）的标准十六进制（HEX）颜色值如下：
css
/* 彩虹七色标准 HEX 值 */
:root {
--red: #FF0000; /* 红色 */
--orange: #FF7F00; /* 橙色 */
--yellow: #FFFF00; /* 黄色 */
--green: #00FF00; /* 绿色 */
--blue: #0000FF; /* 蓝色 */
--indigo: #4B0082; /* 靛色 */
--violet: #9400D3; /* 紫色 */
}
使用示例：
css
/* 单个颜色使用 */
.red-element {
background-color: #FF0000;
}
/* 创建彩虹渐变背景 */
.rainbow-bg {
background: linear-gradient(
to right,
#FF0000, /* 红 */
#FF7F00, /* 橙 */
#FFFF00, /* 黄 */
#00FF00, /* 绿 */
#0000FF, /* 蓝 */
#4B0082, /* 靛 */
#9400D3 /* 紫 */
);
}
颜色说明：
| 颜色名 | HEX 值 | RGB 值 | 示例预览 |
|---|---|---|---|
| 红 | #FF0000 |
rgb(255, 0, 0) |
<div style="background:#FF0000;width:50px;height:20px"></div> |
| 橙 | #FF7F00 |
rgb(255, 127, 0) |
<div style="background:#FF7F00;width:50px;height:20px"></div> |
| 黄 | #FFFF00 |
rgb(255, 255, 0) |
<div style="background:#FFFF00;width:50px;height:20px"></div> |
| 绿 | #00FF00 |
rgb(0, 255, 0) |
<div style="background:#00FF00;width:50px;height:20px"></div> |
| 蓝 | #0000FF |
rgb(0, 0, 255) |
<div style="background:#0000FF;width:50px;height:20px"></div> |
| 靛 | #4B0082 |
rgb(75, 0, 130) |
<div style="background:#4B0082;width:50px;height:20px"></div> |
| 紫 | #9400D3 |
rgb(148, 0, 211) |
<div style="background:#9400D3;width:50px;height:20px"></div> |
注意事项：
靛色（Indigo） 的定义可能存在差异，
#4B0082是广泛接受的靛色值，接近深蓝紫色。紫色（Violet）有时也使用
#8A2BE2（蓝紫色）或#8B00FF（更明亮的紫），但#9400D3是彩虹标准色中更接近光谱的紫色。这些颜色可直接用于 CSS 属性（如
color、background-color、border-color等）。
彩虹渐变效果：
html
<div class="rainbow-bg" style="height:50px;width:100%"></div>
效果预览👇
<div style="background:linear-gradient(to right, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000FF, #4B0082, #9400D3);height:30px;border-radius:4px;margin-top:8px"></div>