# HSB 彩虹：色相跟著時間轉

正式網址：https://newmediaart.course.monolab.world/snippets/hsb-rainbow

colorMode(HSB) 之後第一個數字是色相，0 到 360 繞一圈就是彩虹；飽和度、亮度分開調，比 RGB 直覺。

- **分類**：顏色
- **行數**：18 行（p5.js 1.x／2.x）
- **在哪一堂用到**：[第 4 堂](https://newmediaart.course.monolab.world/lesson/04)

在 setup() 裡加 colorMode(HSB, 360, 100, 100, 1)；之後所有 fill、stroke、background 的數字都照 HSB 解讀，原本的 RGB 顏色要跟著改。

```js
// HSB 色彩：色相 0–360 繞一圈就是彩虹
function setup() {
  createCanvas(600, 600);
  // 色相 0–360、飽和 0–100、亮度 0–100、透明 0–1
  colorMode(HSB, 360, 100, 100, 1);
  noStroke();
}

function draw() {
  background(0, 0, 10); // HSB 模式下的深灰
  for (let i = 0; i < 12; i++) {
    // 色相：每一格往前轉一點，% 360 讓它繞回 0
    const h = (frameCount + i * 30) % 360;
    fill(h, 80, 100);
    const a = (TWO_PI * i) / 12;
    circle(width / 2 + cos(a) * 200, height / 2 + sin(a) * 200, 70);
  }
}
```

## 同類常用指令・顏色

- [色票陣列＋random(palette)](https://newmediaart.course.monolab.world/snippets/palette-random)

[回到全部常用指令](https://newmediaart.course.monolab.world/snippets)

[到 Hahow 報名](https://hahow.in/cr/creative-code)。價格與優惠以 Hahow 頁面為準。