# How to change the colours for the buttons for controlP5 library?

**URL:** https://discourse.processing.org/t/how-to-change-the-colours-for-the-buttons-for-controlp5-library/24091
**Category:** Libraries
**Created:** [September 24, 2020, 4:07am UTC](https://discourse.processing.org/t/how-to-change-the-colours-for-the-buttons-for-controlp5-library/24091 "2020-09-24T04:07:21Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![anon76195010](https://avatars.discourse-cdn.com/v4/letter/a/c67d28/32.png) [@anon76195010](https://discourse.processing.org/u/anon76195010)
#### Post date: [September 24, 2020, 4:07am UTC](https://discourse.processing.org/t/how-to-change-the-colours-for-the-buttons-for-controlp5-library/24091/1 "2020-09-24T04:07:21Z")

</div>

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8959a00f758c5000712640177420222c7dabf6ac.png)

I am using the `controlP5 ` library and I have these two buttons. I want to have different colours for different buttons. I tried using `fill()` to change the colour but that doesn’t seem to work.

Here is the code.

```auto
import controlP5.*;

ControlP5 cp5;

void setup()
{
  size(800, 800);
  cp5 = new ControlP5(this);
  
  fill(255,0,0);
  cp5.addButton("1").setValue(0).setPosition(0, height/2).setSize(400,200);
  cp5.addButton("2").setValue(0).setPosition(width/2, height/2).setSize(400,200);
  
  
}

void draw()
{
  background(0);
}

```

Any ideas?

---

<div class="post-metadata">

### Author: ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)
#### Post date: [September 24, 2020, 5:51am UTC](https://discourse.processing.org/t/how-to-change-the-colours-for-the-buttons-for-controlp5-library/24091/2 "2020-09-24T05:51:29Z")

</div>

```auto
  ...
  cp5.addButton("2")
    .setValue(0)
    .setPosition(width/2, height/2)
    .setSize(400,200)
    .setColorBackground(color(255, 255, 0))
    .setColorForeground(color(255, 0, 0))
    .setColorActive(color(0, 255, 255));

```

---

<div class="post-metadata">

### Author: ![anon76195010](https://avatars.discourse-cdn.com/v4/letter/a/c67d28/32.png) [@anon76195010](https://discourse.processing.org/u/anon76195010)
#### Post date: [September 24, 2020, 5:52am UTC](https://discourse.processing.org/t/how-to-change-the-colours-for-the-buttons-for-controlp5-library/24091/3 "2020-09-24T05:52:49Z")

</div>

Thanks 🙂

ANother question.

```auto
public void two()
{
  colour = #ffffff;
}

```

this code keeps executing the first time I run it and I don’t want it to execute at all unless if I press the button. How would I fix this if you happen to know?

---

<div class="post-metadata">

### Author: ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)
#### Post date: [September 24, 2020, 6:07am UTC](https://discourse.processing.org/t/how-to-change-the-colours-for-the-buttons-for-controlp5-library/24091/4 "2020-09-24T06:07:16Z")

</div>

Maybe try structuring it something like this:

```auto
  ...
  Button b2 = cp5.addButton("2")
    .setValue(0)
    .setPosition(width/2, height/2)
    .setSize(400,200)
    .setColorForeground(color(255, 0, 0))
    .setColorBackground(color(255, 255, 0))
    .setColorValue(color(0))
    .setColorActive(color(0, 255, 255));
   
  b2.onRelease(new CallbackListener() {
    public void controlEvent(CallbackEvent theEvent) {
      println("clicked");
    }
  });
```

---

<div class="post-metadata">

### Author: ![anon76195010](https://avatars.discourse-cdn.com/v4/letter/a/c67d28/32.png) [@anon76195010](https://discourse.processing.org/u/anon76195010)
#### Post date: [September 24, 2020, 6:27am UTC](https://discourse.processing.org/t/how-to-change-the-colours-for-the-buttons-for-controlp5-library/24091/5 "2020-09-24T06:27:33Z")

</div>

Thanks.

```auto
import controlP5.*;

ControlP5 cp5;

int colour = #ce2fa9;

boolean is_pressed = false;

void setup()
{
  size(800, 800);
  cp5 = new ControlP5(this);
  
  fill(255,0,0);
  //
  
  cp5.addButton("one").setValue(0).setPosition(0, height/2).setSize(400,200);
  Button b2 = cp5.addButton("two").setValue(0).setPosition(width/2, height/2).setSize(400,200).setColorCaptionLabel(#000000).setColorBackground(colour).setColorForeground(#ff16c8).setColorActive(#ffffff);

  b2.onRelease(new CallbackListener()
  {
    public void controlEvent(CallbackEvent theEvent)
    {
      println("clicked");
      colour = #ffffff;
    }
  }
  );
  
}

void draw()
{
  background(0);
}

```

But the issue is that the button doesn’t turn white when I pressed it.

---

<div class="post-metadata">

### Author: ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)
#### Post date: [September 24, 2020, 6:53am UTC](https://discourse.processing.org/t/how-to-change-the-colours-for-the-buttons-for-controlp5-library/24091/6 "2020-09-24T06:53:20Z")

</div>

You’ll need to refer to the controller you’d like to make white:

```auto
  b2.onRelease(new CallbackListener() {
    public void controlEvent(CallbackEvent theEvent) {
      cp5.getController("2").setColorForeground(color(255, 255, 255));
      cp5.getController("2").setColorBackground(color(255, 255, 255));
    }
  });

```

However, it sounds like what you want is a toggle of some sort? So `cp5.addToggle()` instead of `cp5.addButton()`