# Do material base color and emissive color work the same way(saving / loading background)?

**URL:** <https://discourse.threejs.org/t/do-material-base-color-and-emissive-color-work-the-same-way-saving-loading-background/59427>\
**Category:** Questions\
**Tags:** load, save\
**Created:** [December 19, 2023, 4:19pm UTC](https://discourse.threejs.org/t/do-material-base-color-and-emissive-color-work-the-same-way-saving-loading-background/59427 "2023-12-19T16:19:16Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![gree303](https://avatars.discourse-cdn.com/v4/letter/g/b3f665/32.png) [@gree303](https://discourse.threejs.org/u/gree303)\
**Post date:** [December 19, 2023, 4:19pm UTC](https://discourse.threejs.org/t/do-material-base-color-and-emissive-color-work-the-same-way-saving-loading-background/59427/1 "2023-12-19T16:19:16Z")

</div>

I stumbled across an issue related to loading/saving colors.  
Especially the emissive color seems to work kinda different when trying to load/save any value.

Could it be that the emissive color does work with 0x112233 color-codes and the base color with #112233?  
I realize that lil-gui does work with #112233; that is not what I’m after.  
The problem happens only on load and on save; no matter what I try.

Even duplicating the “working” code from “color” to “emissive” won’t work. That’s why I am asking if there is something different in the background I’m not aware of… either that or I’ve screwed myself 🙂

Thanks for any thoughts on this.  
Doing all this in r143.

This issue is only related to saving/loading RGB values. As soon I set the emissive color manually (via lil-gui) everything does work. It just won’t load/save as #112233 ; instead it saves as 0x112233

I do suspect some other 3rd party modules; but wanted to check first on three.js if there is something I’m not aware of.  
Thanks.

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [December 19, 2023, 4:29pm UTC](https://discourse.threejs.org/t/do-material-base-color-and-emissive-color-work-the-same-way-saving-loading-background/59427/2 "2023-12-19T16:29:53Z")

</div>

They work exactly the same, and in fact neither of them allows `0xRRGGBB` or `#RRGGBB`. It’s just a peculiarity of Material constructors, that if you do:

```js
new MeshStandardMaterial({ color: 0xffffff });

```

It’ll not throw and just [pass that input](https://github.com/mrdoob/three.js/blob/fe312e19c2d8fa4219d035f0b83bc13a46fb1927/src/materials/Material.js#L141) to Color constructor, making it equivalent to:

```js
new MeshStandardMaterial({ color: new THREE.Color(0xffffff) });

```

But if at any point you’d do any of this:

```js
material.color = 0xFFFFFF;
material.color = "#FFFFFF";
material.emissive = 0xFFFFFF;
material.emissive = "#FFFFFF";

```

It’ll no longer do that little substitution for you and just throw an error.

The simplest and safest way to set it would be just to always initialise the color yourself:

```js
material.color = new THREE.Color("#FFFFFF");
material.emissive = new THREE.Color(0xFFFFFF);

```

If you’re 101% sure the color has been initialised and you just want to change it, you can also do:

```js
material.color.set(0xFFFFFF);
material.emissive.set("0xFFFFFF");

```

But this will throw if the value of `color / emissive` is not `THREE.Color`.

(Same applies to [Scene.background](https://threejs.org/docs/index.html?q=scene#api/en/scenes/Scene.background).)

---

<div class="post-metadata">

**Author:** ![gree303](https://avatars.discourse-cdn.com/v4/letter/g/b3f665/32.png) [@gree303](https://discourse.threejs.org/u/gree303)\
**Post date:** [December 19, 2023, 4:51pm UTC](https://discourse.threejs.org/t/do-material-base-color-and-emissive-color-work-the-same-way-saving-loading-background/59427/3 "2023-12-19T16:51:30Z")

</div>

> [@mjurczyk](#):
>
> ```javascript
> material.color = new THREE.Color("#FFFFFF");
> material.emissive = new THREE.Color(0xFFFFFF);
> 
> ```

thanks for pointing this out - surely I’ve messed around with it just like you’ve described it and it threw me off big-time 🙂  
_solved_