# Hex color in p5js web editor

**URL:** https://discourse.processing.org/t/hex-color-in-p5js-web-editor/9762
**Category:** Beginners
**Created:** [March 29, 2019, 2:31pm UTC](https://discourse.processing.org/t/hex-color-in-p5js-web-editor/9762 "2019-03-29T14:31:25Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![Leo\_Aguiar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/leo_aguiar/32/18942_2.png) [@Leo\_Aguiar](https://discourse.processing.org/u/Leo_Aguiar)
#### Post date: [March 29, 2019, 2:31pm UTC](https://discourse.processing.org/t/hex-color-in-p5js-web-editor/9762/1 "2019-03-29T14:31:25Z")

</div>

Hi forum,

Why does this not work in the p5js web editor?

```auto
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  let c1 = color('#f92804');
  fill(c1);
  rect(width/2,height/2,50,50);
}

```

Thanks for the help.

---

<div class="post-metadata">

### Author: ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)
#### Post date: [March 30, 2019, 1:51am UTC](https://discourse.processing.org/t/hex-color-in-p5js-web-editor/9762/2 "2019-03-30T01:51:28Z")

</div>

In the future please try to be more specific. Saying it doesn’t work doesn’t tell us much, so try to describe the behavior you expected versus what you’re actually seeing.

Also, try to get into the habit of looking at your [JavaScript console](https://happycoding.io/tutorials/javascript/developer-tools). Any errors you get will show up there.

Anyway, take a closer look at this line:

```auto
let c1 = color(’#f92804’);

```

Notice that the apostrophe characters in there are **smart quotes** instead of the straight up-and-down apostrophe character.

If I change that line to this:

```auto
let c1 = color('#f92804');

```

Then I see a single red rectangle on the screen, which is what I would expect.

---

<div class="post-metadata">

### Author: ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)
#### Post date: [March 30, 2019, 4:02am UTC](https://discourse.processing.org/t/hex-color-in-p5js-web-editor/9762/3 "2019-03-30T04:02:57Z")

</div>

hi Leo\_Aguiar,  
you not posted / PASTED the code in the

```auto
</> code tag

```

so possible the mentioned

```auto
(’#f92804’)
('#f92804')

```

problem is not the real problem, just created here at the forum post ?

if you refer to the problem where in p5.js color can be defined  
there is a good info at  
[p5.js overview · processing/p5.js Wiki · GitHub](https://github.com/processing/p5.js/wiki/p5.js-overview#why-cant-i-assign-variables-using-p5-functions-and-variables-before-setup) ,  
using this i got for example:  
[p5.js Web Editor](https://editor.p5js.org/kll/sketches/Ac56AkHp-)

 ![SNAG-0035](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a607170116df0a000a64b50e2547997e4c59fc69.jpeg)

* * *

> [@Kevin](#):
>
> If I change that line to this:
> 
> ```auto
> let c1 = color('#f92804');
> 
> ```
> 
> Then I see a single red rectangle on the screen, which is what I would expect.

hi Kevin,  
yes and no!  
i show a little gallery what i see here: ( win7 64bit / firefox browser )  
about [p5js.org](http://p5js.org) editor / and a possible problem with it.  
-a- the change works when i was not login

 ![SNAG-0036](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c519e7db2898389b02c42111fa35417fcc40c567.jpeg)  
-b- now i login and same code NOT work:  
 ![SNAG-0037](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d3cc2364edffb6715e7f9a5e188a0fd0b7d32e1c.jpeg)  
-c-  
can not use global: ( if you not use the

```auto
new p5();

```

 ![SNAG-0041](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/fcc792883ca95aba1b938208337a99b6ab6d3623.jpeg)  
-d- officially must use setup() for it  
 ![SNAG-0039](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/eeeb8802e1524638001a36d3c6d75d8b4cb2c87a.jpeg)  
 ![SNAG-0040](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/ea2b658c25498d6b2c1c3508846bfb3b645a017e.jpeg)

what you make out of that? what i do wrong?

---

<div class="post-metadata">

### Author: ![parc6502](https://avatars.discourse-cdn.com/v4/letter/p/b487fb/32.png) [@parc6502](https://discourse.processing.org/u/parc6502)
#### Post date: [March 30, 2019, 12:35pm UTC](https://discourse.processing.org/t/hex-color-in-p5js-web-editor/9762/4 "2019-03-30T12:35:51Z")

</div>

Would you mind sharing your sketch link? I’ve tried to duplicate your code in firefox, but it seems to be working for me.

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

---

<div class="post-metadata">

### Author: ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)
#### Post date: [March 30, 2019, 1:12pm UTC](https://discourse.processing.org/t/hex-color-in-p5js-web-editor/9762/5 "2019-03-30T13:12:25Z")

</div>

yes, here check again and save “project”  
[https://editor.p5js.org/kll/sketches/RgyiH6udg](https://editor.p5js.org/kll/sketches/RgyiH6udg)

 ![SNAG-0042](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/97573bcdd294914596b96cdb3696ee5388db4009.jpeg)

recheck again, copy code, logout / same  
copy code into clean new edit window: works!  
so same like i show above

* * *

call that sketch link from my Raspberry Pi / Raspbian OS / chromium browser /  
works!  
login

 ![SNAG-0043](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1555fd39db3bcb4947ace3efb56c9c44049c9e58.jpeg)

so, i have a bad name!!!

---

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [March 31, 2019, 3:30pm UTC](https://discourse.processing.org/t/hex-color-in-p5js-web-editor/9762/6 "2019-03-31T15:30:33Z")

</div>

Hmm.

@kll – perhaps file a bug report?

> **[processing/p5.js-web-editor](https://github.com/processing/p5.js-web-editor/issues)**
>
> p5.js Web Editor, officially launched! Contribute to processing/p5.js-web-editor development by creating an account on GitHub.

---

<div class="post-metadata">

### Author: ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)
#### Post date: [March 31, 2019, 3:43pm UTC](https://discourse.processing.org/t/hex-color-in-p5js-web-editor/9762/7 "2019-03-31T15:43:27Z")

</div>

> [@jeremydouglass](#):
>
> @kll – perhaps file a bug report?

not much to go on.

i should try first a new account.  
possibly hand my old account to a admin for check…

( i mentioned already somewhere that i have that funny noise problem too  
only when i am login ( and a sketch run and FPS drops)  
even published a video as proof, [here](https://discourse.processing.org/t/raspberry-pi-sound-not-playing-from-processing/8286/2) but no feedback so i think of it as a local bug?? but same, also on 2 computer with different OS and browser )

> / old man play old hardware / what i expect /  
> i not want to waste developers time
