# 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:** 1\
**Showing post:** 4

<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 (…

---

_[View the full topic](https://discourse.processing.org/t/how-to-fill-with-hex-color-in-p5-js/8048)._