CSS彩虹七色十六进制值

最新推荐文章于 2025-09-13 11:11:24 发布

原创最新推荐文章于 2025-09-13 11:11:24 发布 · 1.5k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#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>

效果预览👇