colorMode()

Changes how colors are specified - using (Red, Green, Blue) or (Hue, Saturation, Brightness)

Example

RGB Mode (Red, Green, Blue)

HSB Mode (Hue, Saturation, Brightness)

Syntax

colorMode(mode, [max])

or

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

Input	Description
mode	RGB(Red/Green/Blue) or HSB(Hue/Saturation/Brightness)
max(optional)	maximum value for each color component
max1	maximum value for red/hue component
max2	maximum value for green/saturation component
max3	maximum value for blue/brightness component
maxA(optional)	maximum value for alpha component

Full Example

Example Full Code - RGB Mode

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

Example Full Code - HSB Mode

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

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.

Find these documents helpful? Let the people who made them help your child learn to code at Strivemath!

We'd love to hear your Feedback/Comments here.