# How to fill with HEX color in p5.js

**URL:** <https://discourse.processing.org/t/how-to-fill-with-hex-color-in-p5-js/8048>\
**Category:** Libraries\
**Created:** [February 2, 2019, 5:00pm UTC](https://discourse.processing.org/t/how-to-fill-with-hex-color-in-p5-js/8048 "2019-02-02T17:00:22Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![blkpanther](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Post date:** [February 2, 2019, 5:00pm UTC](https://discourse.processing.org/t/how-to-fill-with-hex-color-in-p5-js/8048/1 "2019-02-02T17:00:22Z")

</div>

I intend to fill shape with hex color because I’ll use a GUI to allow users to pick color and dat.gui returns a hex value.

The two methods I attempted is either to use red(), green(), blue() on the color or use a hex2tgb conversion code. But somehow neither works.

```auto
function setup() {
  createCanvas(500, 500);
  background(255);
  let c = '#D8BFD8' ; 
  

}

function draw() {  

    fill(red(c),green(c),blue(c));
    //fill(hexToRgb(c).r,0,0);
    //fill(0);
    ellipse(100,100,50,50);
}

function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

```

What would be the best method to use hex color in p5? Thanks

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 2, 2019, 5:32pm UTC](https://discourse.processing.org/t/how-to-fill-with-hex-color-in-p5-js/8048/2 "2019-02-02T17:32:53Z")

</div>

> **[DatGuiTest](http://bl.ocks.org/GoSubRoutine/861b48f0b0118219c6a7cdd28309ee62)**
>
> GoSubRoutine’s Block 861b48f0b0118219c6a7cdd28309ee62

---

<div class="post-metadata">

**Author:** ![blkpanther](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Post date:** [February 3, 2019, 2:30pm UTC](https://discourse.processing.org/t/how-to-fill-with-hex-color-in-p5-js/8048/3 "2019-02-03T14:30:38Z")

</div>

Thanks. I can pass in the color control to fill the shape, but if I want to use a lerpcolor between two chosen colors from the control it will throw an error ‘TYPEeRROR: undefined is not an object’

```auto
function setup() {
    createCanvas(500, 500);
    background(255);
}

function draw() {
    background(options.Background);
    fill(options.Foreground)
    ellipse(100, 100, 50, 50);
    let intermediate = lerpColor(options.Foreground, options.Background, 0.5);
    fill(intermediate);
    ellipse(200, 100, 50, 50);

}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 3, 2019, 3:22pm UTC](https://discourse.processing.org/t/how-to-fill-with-hex-color-in-p5-js/8048/4 "2019-02-03T15:22:36Z")

</div>

**lerpColor()** demands that its 1st & 2nd passed arguments to be of p5.Color datatype:

- [reference | p5.js](http://p5js.org/reference/#/p5/lerpColor)
- [reference | p5.js](http://p5js.org/reference/#/p5.Color)

If _options.Foreground_ & _options.Background_ are an array or a number or even a color string, you can convert them to a p5.Color datatype by passing them as an argument for **color()**:

- [reference | p5.js](http://p5js.org/reference/#/p5/color)

Extra info about p5.Color:

> [@Dynamically update alpha in color()](https://discourse.processing.org/t/dynamically-update-alpha-in-color/5339):
>
> So, what if I wanted to dynamically change each individual rgba argument of color(), can I say this.col.r = 200; , or some equivalent? let btn; function setup() { createCanvas(400, 400); btn = new Btn(color(50, 127, 219, 255)); } function draw() { clear(); btn.run(); } class Btn { constructor(\_col) { this.col = \_col; this.pos = createVector(width \>\> 1, height \>\> 1); this.r = 33; } display() { if (this.hover()) { fill(this.col, this.col.a); // this is ignoring alpha if (…

---

<div class="post-metadata">

**Author:** ![blkpanther](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Post date:** [February 3, 2019, 5:31pm UTC](https://discourse.processing.org/t/how-to-fill-with-hex-color-in-p5-js/8048/5 "2019-02-03T17:31:56Z")

</div>

thanks! didn’t expect the solution to be so simple.