# Get code from foregroundColor

**URL:** <https://forums.creativeclouddeveloper.com/t/get-code-from-foregroundcolor/5506>\
**Category:** UXP Plugin API\
**Created:** [November 17, 2022, 8:20pm UTC](https://forums.creativeclouddeveloper.com/t/get-code-from-foregroundcolor/5506 "2022-11-17T20:20:44Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![MalbertCunha](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/malbertcunha/32/2760_2.png) [@MalbertCunha](https://forums.creativeclouddeveloper.com/u/MalbertCunha)\
**Post date:** [November 17, 2022, 8:20pm UTC](https://forums.creativeclouddeveloper.com/t/get-code-from-foregroundcolor/5506/1 "2022-11-17T20:20:44Z")

</div>

Greetings to all!  
How to get hex color code from foregroundColor in UXP?  
in extendScript it works like this: alert(app.foregroundColor.rgb.hexValue);  
Grateful!  
 ![Captura de tela 2022-11-17 172008](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/c/c19a4f14a44a62a4d80b940a1a0a6cc631d36899.jpeg)

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [November 18, 2022, 7:27am UTC](https://forums.creativeclouddeveloper.com/t/get-code-from-foregroundcolor/5506/2 "2022-11-18T07:27:55Z")

</div>

Should be [pretty much the same](https://developer.adobe.com/photoshop/uxp/2022/ps_reference/classes/photoshop/)

```auto
const app = require('photoshop').app
alert(app.foregroundColor.rgb.hexValue)

```

P. S. You might get an answer probably quicker, if you ask in the appropriate category 😉 Colors have nothing to do with UDT

---

<div class="post-metadata">

**Author:** ![MalbertCunha](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/malbertcunha/32/2760_2.png) [@MalbertCunha](https://forums.creativeclouddeveloper.com/u/MalbertCunha)\
**Post date:** [November 18, 2022, 12:08pm UTC](https://forums.creativeclouddeveloper.com/t/get-code-from-foregroundcolor/5506/3 "2022-11-18T12:08:54Z")

</div>

I’ve already tried this method, but it returns “ANANAN” if I don’t uncheck the “Only web color” option, and that’s not what I wanted.

> **[2022-10-04-0001.png](https://drive.google.com/file/d/1f--74WI2NjtlgSBFmfpo0Aqyz5ofgk_P/view?usp=sharing)**
>
> Google Drive file.

My goal is to select a color using the standard color picker, copy the code and add it as the background color of a button whenever it is clicked.  
1: The color does not return “ANANAN”;  
2: No, the color of the button doesn’t change, maybe I didn’t concatenate the string correctly.  
Any help is welcome.  
script js:

```auto
 document.querySelector('#btnColor').style.background = "'#"+ app.foregroundColor.rgb.hexValue + "'";

```

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [November 18, 2022, 12:36pm UTC](https://forums.creativeclouddeveloper.com/t/get-code-from-foregroundcolor/5506/4 "2022-11-18T12:36:35Z")

</div>

What do you get in console with this?

```auto
console.log(app.foregroundColor.rgb)

```

---

<div class="post-metadata">

**Author:** ![MalbertCunha](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/malbertcunha/32/2760_2.png) [@MalbertCunha](https://forums.creativeclouddeveloper.com/u/MalbertCunha)\
**Post date:** [November 18, 2022, 12:42pm UTC](https://forums.creativeclouddeveloper.com/t/get-code-from-foregroundcolor/5506/5 "2022-11-18T12:42:47Z")

</div>

> [@Karmalakas](#):
>
> `app.foregroundColor.rgb`

retorna [obteject Obteject]

> **[2022-10-04-0001.png](https://drive.google.com/file/d/1f--74WI2NjtlgSBFmfpo0Aqyz5ofgk_P/view)**
>
> Google Drive file.

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [November 18, 2022, 12:46pm UTC](https://forums.creativeclouddeveloper.com/t/get-code-from-foregroundcolor/5506/6 "2022-11-18T12:46:48Z")

</div>

Don’t `alert`, but `console.log()`  
You should always use Dev Tools for debugging

---

<div class="post-metadata">

**Author:** ![MalbertCunha](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/malbertcunha/32/2760_2.png) [@MalbertCunha](https://forums.creativeclouddeveloper.com/u/MalbertCunha)\
**Post date:** [November 18, 2022, 12:56pm UTC](https://forums.creativeclouddeveloper.com/t/get-code-from-foregroundcolor/5506/7 "2022-11-18T12:56:34Z")

</div>

> [@Karmalakas](#):
>
> `console.log(app.foregroundColor.rgb)`

console.log(app.foregroundColor.rgb)  
I can’t send a photo to this community

> **[001.JPG](https://drive.google.com/file/d/1mI9WBRn5wM5l38KNkEAr6orvQfzE3nJk/view)**
>
> Google Drive file.

 ![Capturdddddar](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/8/8f8526d9f03168ea0bd7a3184e0321c41fe12ec9.jpeg)

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [November 18, 2022, 1:02pm UTC](https://forums.creativeclouddeveloper.com/t/get-code-from-foregroundcolor/5506/8 "2022-11-18T13:02:52Z")

</div>

OK, sounds like a bug. Ping @kerrishotts maybe?

---

<div class="post-metadata">

**Author:** ![MalbertCunha](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/malbertcunha/32/2760_2.png) [@MalbertCunha](https://forums.creativeclouddeveloper.com/u/MalbertCunha)\
**Post date:** [November 18, 2022, 1:11pm UTC](https://forums.creativeclouddeveloper.com/t/get-code-from-foregroundcolor/5506/9 "2022-11-18T13:11:50Z")

</div>

@Karmalakas once I get the code correct, what syntax is used to change the background color of this button document.querySelector(‘#btnColor’).style.background = ???  
I used this, but to no avail!

```auto
document.querySelector('#btnColor').style.background = "'#"+ app.foregroundColor.rgb.hexValue + "'";

```

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [November 18, 2022, 1:38pm UTC](https://forums.creativeclouddeveloper.com/t/get-code-from-foregroundcolor/5506/10 "2022-11-18T13:38:41Z")

</div>

Your `hexValue` already does have `#`, doesn’t it?

---

<div class="post-metadata">

**Author:** ![MalbertCunha](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/malbertcunha/32/2760_2.png) [@MalbertCunha](https://forums.creativeclouddeveloper.com/u/MalbertCunha)\
**Post date:** [November 18, 2022, 1:59pm UTC](https://forums.creativeclouddeveloper.com/t/get-code-from-foregroundcolor/5506/11 "2022-11-18T13:59:52Z")

</div>

Yes, it already has #, + app.foregroundColor.rgb.hexValue in quotes “#cor”; am I wrong?

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [November 18, 2022, 2:21pm UTC](https://forums.creativeclouddeveloper.com/t/get-code-from-foregroundcolor/5506/12 "2022-11-18T14:21:06Z")

</div>

`# + hexValue` makes it `##111111` (note the double `#`)  
As I said - `console` is your friend

Aslso not sure if you need to set bg including quotes like `'#111111'`. I think it should just be `#111111`

---

<div class="post-metadata">

**Author:** ![MalbertCunha](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/malbertcunha/32/2760_2.png) [@MalbertCunha](https://forums.creativeclouddeveloper.com/u/MalbertCunha)\
**Post date:** [November 18, 2022, 3:11pm UTC](https://forums.creativeclouddeveloper.com/t/get-code-from-foregroundcolor/5506/13 "2022-11-18T15:11:21Z")

</div>

I did a test here with a defined color the background changed.

```auto
document.querySelector('#btnColor').style.background = "#33cc66";

```

Theoretically the syntax for my case would be:

```auto
style.background = "'#"+ app.foregroundColor.rgb.hexValue + "'";

```

But it returns an error:

 ![Capturar](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/7/72d177edda77d0a2b69b252c087f14069a6efd13.jpeg)

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [November 18, 2022, 3:16pm UTC](https://forums.creativeclouddeveloper.com/t/get-code-from-foregroundcolor/5506/14 "2022-11-18T15:16:12Z")

</div>

As I said - your

```auto
style.background = "'#"+ app.foregroundColor.rgb.hexValue + "'";

```

Is the same as

```auto
style.background = "'##33cc66'";

```

See the quotes and `#`

It should be just

```auto
style.background = app.foregroundColor.rgb.hexValue;

```

---

<div class="post-metadata">

**Author:** ![MalbertCunha](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/malbertcunha/32/2760_2.png) [@MalbertCunha](https://forums.creativeclouddeveloper.com/u/MalbertCunha)\
**Post date:** [November 18, 2022, 3:51pm UTC](https://forums.creativeclouddeveloper.com/t/get-code-from-foregroundcolor/5506/15 "2022-11-18T15:51:32Z")

</div>

> [@Karmalakas](#):
>
> `style.background = app.foregroundColor.rgb.hexValue;`

> [@Karmalakas](#):
>
> `style.background = app.foregroundColor.rgb.hexValue;`

I’ve done it this way and it didn’t work either:  
document.querySelector(‘#btnColor’).style.background = app.foregroundColor.rgb.hexValue;  
I don’t know if it’s related to the buig corresponding to the topic, but I used the Only web color enabled function but without success.

 ![Capturddddar](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/c/ccef3bd7b6ea0b029f92171d6e11d5036dfdb613.jpeg)

I know this works because I believe you use it yourself in your panels.

 ![Capturar](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/e/ea8757cec21af32e03baa143c4e04315824ef13f.jpeg)

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [November 18, 2022, 5:07pm UTC](https://forums.creativeclouddeveloper.com/t/get-code-from-foregroundcolor/5506/16 "2022-11-18T17:07:31Z")

</div>

In my plugin I only set foreground and background colors, but never read them. I just tried to get them properly and it works only when you just open Ps or reset colors to default. But as soon as you change the color, `RGBColor` is meesed up and no way to get value. There was [a bug reported here months ago](http://forums.creativeclouddeveloper.com/t/forground-color-not-accurate/4472), but nobody saw it (again, ping @kerrishotts). It appears it is set correctly only if you check one of RGB values in the picker before selecting:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/0/00cb58411b8dd654ff6fadc3ecbaa6f8fc534a65.png)

Also, you need to set `backgroundColor` instead of `background`

Having said above, until bug is fixed (hopefully sooner rather than later 🤞), I’d suggest using helper function to convert any other color to hex or just set directly (for example HSB). So you code would be:

```auto
const app = require('photoshop').app
document.querySelector('#btnColor').style.backgroundColor = `hsl(${app.foregroundColor.hsb.hue} ${app.foregroundColor.hsb.saturation}% ${app.foregroundColor.hsb.brightness}%)`;

```

I’d prefer LAB, because lightness and brightness (HSL vs HSB) are a bit different, but seems like LAB in UXP CSS is also not supported 😕

I’ll also ping @amandah here just in case

---

<div class="post-metadata">

**Author:** ![MalbertCunha](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/malbertcunha/32/2760_2.png) [@MalbertCunha](https://forums.creativeclouddeveloper.com/u/MalbertCunha)\
**Post date:** [November 18, 2022, 5:20pm UTC](https://forums.creativeclouddeveloper.com/t/get-code-from-foregroundcolor/5506/17 "2022-11-18T17:20:12Z")

</div>

@Karmalakas It was worth the insistence, now I see that it worked very well. Thank you for taking the time to help me, you saved my day. THANK YOU FOR SHARING YOUR KNOWLEDGE!

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [November 19, 2022, 9:29pm UTC](https://forums.creativeclouddeveloper.com/t/get-code-from-foregroundcolor/5506/18 "2022-11-19T21:29:09Z")

</div>

A post was split to a new topic: [Button color doesn’t change when selected with picker](https://forums.creativeclouddeveloper.com/t/button-color-doesnt-change-when-selected-with-picker/5520)

---

<div class="post-metadata">

**Author:** ![Jarda](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/jarda/32/1909_2.png) [@Jarda](https://forums.creativeclouddeveloper.com/u/Jarda)\
**Post date:** [November 20, 2022, 4:02pm UTC](https://forums.creativeclouddeveloper.com/t/get-code-from-foregroundcolor/5506/19 "2022-11-20T16:02:28Z")

</div>

Stay tuned 4 bug fixes are now in review stage 🙂

1. preventing input out of range values which can result into e.g. invalid hex code… can happen in 32bit color mode and in few other cases
2. fixing the yellow color in CMYK mode
3. fixing foreground and background color when you are not in RGB color mode
4. the possibility of setting background color (now the setter is missing)

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [November 20, 2022, 4:52pm UTC](https://forums.creativeclouddeveloper.com/t/get-code-from-foregroundcolor/5506/20 "2022-11-20T16:52:25Z")

</div>

> [@Jarda](#):
>
> fixing the yellow color in CMYK mode

Also noticed this one while debugging RGB, but honestly, was too lazy to report right away 🙈 😅

[Next page](https://forums.creativeclouddeveloper.com/t/get-code-from-foregroundcolor/5506.md?page=2)