CSS彩虹七色十六进制值
在 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>