js随机产生颜色

封面图 • 2025-11-25 • JavaScript

在 JavaScript 中，你可以通过生成随机的 RGB 值或十六进制值来随机生成颜色。下面是几种常见的方法：

---

### ✅ 方法一：生成随机 RGB 颜色

```javascript
function getRandomColor() {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgb(${r}, ${g}, ${b})`;
}

console.log(getRandomColor()); // 例如: "rgb(123, 45, 67)"
```

---

### ✅ 方法二：生成随机十六进制颜色（#000000 到 #FFFFFF）

```javascript
function getRandomHexColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

console.log(getRandomHexColor()); // 例如: "#A1B2C3"
```

---

### ✅ 方法三：使用 `Math.random()` 和字符串拼接（简洁版）

```javascript
function getRandomColor() {
  return '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
}

console.log(getRandomColor()); // 例如: "#f3c9a1"
```

> 注意：`16777215` 是 `0xFFFFFF` 的十进制表示。

---

### ✅ 使用示例（在 HTML 中应用颜色）

```html
<!DOCTYPE html>
<html>
<body>

<p id="colorText">点击按钮获取随机颜色</p>

function changeColor() {
  const color = getRandomColor();
  document.body.style.backgroundColor = color;
  document.getElementById("colorText").style.color = color;
  document.getElementById("colorText").innerText = "当前颜色: " + color;
}
</script>

</body>
</html>
```

---

如果你有其他需求（比如生成更柔和的颜色、渐变色等），也可以告诉我，我可以提供更高级的方法 😊