# colorMode()

Example

#### RGB Mode (Red, Green, Blue)

<figure><img src="/files/1haixXRghAbXh4o2m9hT" alt=""><figcaption></figcaption></figure>

#### HSB Mode (Hue, Saturation, Brightness)

<figure><img src="/files/jbtDxxYarYHBTuqxxzxo" alt=""><figcaption></figcaption></figure>

### Syntax

```
colorMode(mode, [max])
```

or

```
colorMode(mode, max1, max2, max3, [maxA])
```

<table><thead><tr><th width="249">Input</th><th>Description</th></tr></thead><tbody><tr><td>mode</td><td><strong>RGB</strong>(Red/Green/Blue) or <strong>HSB</strong>(Hue/Saturation/Brightness)</td></tr><tr><td>max(optional)</td><td>maximum value for each color component</td></tr><tr><td>max1</td><td>maximum value for red/hue component</td></tr><tr><td>max2</td><td>maximum value for green/saturation component</td></tr><tr><td>max3</td><td>maximum value for blue/brightness component</td></tr><tr><td>maxA(optional)</td><td>maximum value for alpha component</td></tr></tbody></table>

### Full Example

<details>

<summary>Example Full Code - RGB Mode</summary>

```python
#RGB Mode

def setup():
  createCanvas(400,400)
  colorMode(RGB)
  global slider1,slider2,slider3
  slider1 = createSlider(0, 255,1)
  slider1.position(50,40)
  slider2 = createSlider(0,255,1)
  slider2.position(50,60)
  slider3 = createSlider(0,255,1)
  slider3.position(50,80)
  
def draw():
  global slider1,slider2,slider3
  background("grey")
  textSize(15)
  stroke('black')
  fill(0)
  text("Red",200,25)
  text("Green",200,45)
  text("Blue",200,65)
  fill(slider1.value(),slider2.value(),slider3.value())
  triangle(100,100,200,300,300,100)
```

</details>

<details>

<summary>Example Full Code - HSB Mode</summary>

```
#HSB Mode

def setup():
  createCanvas(400,400)

  colorMode(HSB)
  global slider1,slider2,slider3
  slider1 = createSlider(0, 360,1)
  slider1.position(50,height - 40)
  slider2 = createSlider(0,100,1)
  slider2.position(50,height - 60)
  slider3 = createSlider(0,100,1)
  slider3.position(50,height - 80)

  noStroke()
  

def draw():
  translate(width/2,height/2)
  global slider1,slider2,slider3

  h = slider1.value()
  s = slider2.value()
  b = slider3.value()

  background(h,s,b)

  push()
  textSize(15)
  stroke(0, 0, 100-b)
  fill(0, 0, 100-b)
  
  text("Hue",0,-175)
  text("Saturation",0,-155)
  text("Brightness",0,-135)
  pop()
  
  for r in range(100, -10,-10):
    for theta in range(0,360,2):
      fill(theta,100*(r/100),100)
      size = 10
      circle(r*cos(theta),r*sin(theta),size)

  push()
  fill(h,100*(s/100),100)
  stroke('grey')
  circle(s*cos(h),s*sin(h),50)
  pop()
```

</details>

### Description

The `colorMode()` function is used to **set the range and mode for color** values in a sketch. It determines how colors are represented and displayed in the canvas.

When the color mode is set to **RGB**, the **maximum values** for red, green, and blue are typically **255**, which represents the maximum intensity of each color channel. When the color mode is set to **HSB**, the maximum values for hue, saturation, and brightness are typically **360, 100, and 100** respectively.

By default, the color mode is set to RGB with a maximum value of 255 for each color channel.

{% hint style="info" %}
Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)<mark style="color:blue;">**!**</mark>

We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learnpython.strivemath.com/p5-python-web/reference/colour-and-outline/colormode.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.