# Color Wheel

### What It Does

Generates a set of colors arranged in a color wheel pattern. Starting from a base hue, it creates a specified number of colors by rotating around the color wheel at consistent intervals, while maintaining the same saturation and lightness values.

### Inputs

| Name       | Description                                      | Type   | Required |
| ---------- | ------------------------------------------------ | ------ | -------- |
| baseHue    | The starting hue angle (0-360 degrees)           | Number | No       |
| angle      | The total angle to rotate around the color wheel | Number | No       |
| saturation | The saturation percentage for all colors (0-100) | Number | No       |
| lightness  | The lightness percentage for all colors (0-100)  | Number | No       |
| colors     | The number of colors to generate                 | Number | No       |

### Outputs

| Name  | Description                      | Type           |
| ----- | -------------------------------- | -------------- |
| value | An array of evenly spaced colors | List of Colors |

<figure><img src="https://3657049418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy0SFXZjN1sdgdxYM7QPE%2Fuploads%2F8oKMvdVmf2AKgPH70zXw%2FCleanShot%202025-03-20%20at%2011.19.51%402x.png?alt=media&#x26;token=a3adfe8b-a8fc-4805-8c69-43effbce9306" alt=""><figcaption></figcaption></figure>

### How to Use It

1. Drag the Color Wheel node into your graph.
2. Set the "baseHue" to your starting hue angle (default is 360/0, which is red).
3. Set the "angle" to determine how far around the wheel to go (default is 180 degrees).
4. Adjust "saturation" and "lightness" to control the vibrancy and brightness (defaults are 80%).
5. Set the "colors" value to determine how many colors to generate (default is 8).
6. Run the graph—your output will be an array of colors evenly distributed around the wheel.
7. Connect a [Color Scale](https://documentation.tokens.studio/graph-engine/available-nodes/vector2/scale) preview node to visualise your output.

<figure><img src="https://3657049418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy0SFXZjN1sdgdxYM7QPE%2Fuploads%2Fk7WBlnjrVvZkSEsvujeC%2FCleanShot%202025-03-20%20at%2011.25.40%402x.png?alt=media&#x26;token=730a3342-a08c-4ba6-b8aa-938c770f809e" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3657049418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy0SFXZjN1sdgdxYM7QPE%2Fuploads%2FL8ZKo5TRGo8VcASjVEPv%2FCleanShot%202025-03-20%20at%2011.45.27.gif?alt=media&#x26;token=09cc213a-a5c7-40d2-8666-0b7b2e6ee8cc" alt=""><figcaption></figcaption></figure>

### Tips

* For a full color wheel, set angle to 360 degrees.
* For complementary colors, use 2 colors with angle 180.
* For triadic colors, use 3 colors with angle 360.
* For analogous colors, use 3-5 colors with a smaller angle (30-60 degrees).

### See Also

* [**Range**](https://documentation.tokens.studio/graph-engine/available-nodes/color/range): For creating a range between two specific colors.
* [**Scale Colors**](https://documentation.tokens.studio/graph-engine/available-nodes/preview/color-scale): For generating a graduated scale of a single color.
* [**Mix Colors**](https://documentation.tokens.studio/graph-engine/available-nodes/color/mix): For blending between two specific colors.

### Use Cases

* **Color Harmonies**: Create complementary, triadic, or other color schemes.
* **Data Visualization**: Generate distinct colors for charts and graphs.
* **UI Theming**: Develop consistent color families for interface elements.