# Why colors look different in different browsers?

**URL:** <https://discourse.processing.org/t/why-colors-look-different-in-different-browsers/39219>\
**Category:** p5.js\
**Created:** [October 11, 2022, 8:04pm UTC](https://discourse.processing.org/t/why-colors-look-different-in-different-browsers/39219 "2022-10-11T20:04:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nik](https://avatars.discourse-cdn.com/v4/letter/n/6de8d8/32.png) [@Nik](https://discourse.processing.org/u/Nik)\
**Post date:** [October 11, 2022, 8:04pm UTC](https://discourse.processing.org/t/why-colors-look-different-in-different-browsers/39219/1 "2022-10-11T20:04:54Z")

</div>

Hello! I noticed that the colors in different browsers are different.  
Below is a simple example with code and explanations:

```auto
////////////////////
function setup() {
createCanvas(1000, 1000);
background(255);
fill(255);

for (let x=0; x<=1000; x += 1) {
 rect(x,500,50,50); 
 }
  
}
/////////////////

```

As a result, in Chrome and Opera browsers, the image is not black but more gray, in the Mozilla browser the image is black

 ![diff1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/f/7f689947cd8eac3f9e34f39c93233114402d2e87.png)

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [October 12, 2022, 9:59am UTC](https://discourse.processing.org/t/why-colors-look-different-in-different-browsers/39219/2 "2022-10-12T09:59:36Z")

</div>

Hi @Nik,

This is quite interesting! 😉

Since p5.js is using the HTML Canvas element, by default if not set, the stroke color is supposed to be [`#000` (black)](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle).

You can verify that by getting this hidden `strokeStyle` value:

```javascript
const canvas = createCanvas(1000, 1000);
console.log(canvas._getStroke());

// => #000000

```

See the [source code](https://github.com/processing/p5.js/blob/36e9ca7cc202eba217007658c0bc67a9cde167c1/src/core/p5.Renderer2D.js#L1080) of `_getStroke()`

As you would expect, on Firefox and Chrome it returns the same thing so the issue is not here…

This is strange because the first time I tried, the color was different but now I can’t reproduce the issue anymore… (testing on Chromium and Firefox)

---

<div class="post-metadata">

**Author:** ![Nik](https://avatars.discourse-cdn.com/v4/letter/n/6de8d8/32.png) [@Nik](https://discourse.processing.org/u/Nik)\
**Post date:** [October 12, 2022, 3:33pm UTC](https://discourse.processing.org/t/why-colors-look-different-in-different-browsers/39219/3 "2022-10-12T15:33:55Z")

</div>

Perhaps this is due to the different GPU on the video cards.  
Tested on another computer - Chrome showed black color.

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [October 12, 2022, 5:24pm UTC](https://discourse.processing.org/t/why-colors-look-different-in-different-browsers/39219/4 "2022-10-12T17:24:16Z")

</div>

Hi

Here is some information about rendering color

> <https://stackoverflow.com/questions/6237455/chrome-renders-colours-differently-from-safari-and-firefox>