# Colour codes in debug panel

**URL:** <https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306>\
**Category:** Feature Requests\
**Created:** [30 November 2023 09:35 UTC](https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306 "2023-11-30T09:35:59Z")\
**Posts on this page:** 3\
**Page:** 2

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [30 November 2023 20:15 UTC](https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306/21 "2023-11-30T20:15:10Z")

</div>

OK I just got home and am overwhelmed by so many responses from all you grown-ups. and none of them (not in plain text anyway) say "Don't be silly"

@Steve-Mcl thanks for the example regexes. But did you notice that I posted one that is rather shorter and covers all of the formats I showed?

```auto
/^(#(?:[0-9a-f]{2}){2,4}$|(#[0-9a-f]{3}$)|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\)$)$/i

```

I did not write this expression and I have not yet fully determined the meaning of each character but it seems to be

- The beginning of the string
- followed by # followed by 3 or 4 hex pairs (optionally in brackets?)
- OR hsl or rgb, optionally followed by a, followed by 3 or 4 numbers in brackets, optionally with a % sign
- followed by the end of the string.
- All case insensitive.

I am pretty sure that many of the $ signs within the regex can be removed since I added one globally.

In my test, on my computer, the bit to allow optional space after the key letters - `RGBA (....` didn't work.

It is definitely not a **complete** regex since it seems to just passively accept % signs.  
I don't think this matters though.  
If my msg.payload looks sufficiently like a colour code, why not try and use it to colour a swatch?  
It's exactly what debug currently does with a payload that is the name of one of my dairy herd "#Deb004".

> [@shrickus](#):
>
> So just a thought -- remove all whitespace before applying the "rbg(...)" and "hsl(...)" regex?

I don't think replacing commas, slashes and spaces is a good idea - take the regex offering the best compromise between length, clarity and completeness. Whatever the payload contains as a color code can be used **unchanged** to style the swatch.  
That's just speculation. I don't know how it's currently done.

@dceejay thanks for the pointer to the relevant bit of code.  
I have never modified a real application in javascript nor a github based application. (plenty in other languages).  
It is pretty intimidating but I will explore and see if I can work out how to change the code to do this.  
Is there any way to make a local copy of this part of the code and override the real version locally?

---

<div class="post-metadata">

**Author:** ![garynl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/garynl/32/95490_2.png) [@garynl](https://discourse.nodered.org/u/garynl)\
**Post date:** [2 December 2023 08:51 UTC](https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306/22 "2023-12-02T08:51:09Z")

</div>

Hmm, I colour blind. I suppose I will just manage as I always have to do.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [31 January 2024 08:52 UTC](https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306/23 "2024-01-31T08:52:04Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.

[Previous page](https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306.md?page=1)