### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [30 November 2023 09:35 UTC](https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306/1 "2023-11-30T09:35:59Z")
Background
Debug has a couple of special tricks:
- When it displays a 6 digit hex code eg #7FFF00, it also shows a little colour swatch.
- When it displays a date or timestamp, clicking on the value cycles through different date representations
etc
Proposal
1. Extend debug to recognise different payloads as colors and show the colour swatch - Hex, RGB, HSL [, HWB, etc]
2. Make the value clickable and cycle between different representations.
Thoughts
Do browsers accept some format properties as either a percentage or a decimal fraction?
Some formats also have a transparency option - HSLA, RGBA HexA. Include or ignore?
Should the string that identifies a payload as a colour require a bracket with no whitespace - try to parse `rgb(` as a color but not `rgb (`?
I guess part 1 would be lighter weight than part 2 since it does not require any color conversion code.
---
### Author:  [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [30 November 2023 11:30 UTC](https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306/2 "2023-11-30T11:30:51Z")
> [@jbudd](#):
>
> Extend debug to recognise different payloads as colors and show the colour swatch - Hex, RGB, HSL [, HWB, etc]
Do you have specific example strings for these formats that we could easily identify?
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [30 November 2023 12:55 UTC](https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306/3 "2023-11-30T12:55:14Z")
There are regular expressions which match color codes. Here is an example flow showing one.
See the function node for notes on my simplified regex.
```auto
[{"id":"6ecfad81901dbc79","type":"tab","label":"Flow 1","disabled":false,"info":"","env":[]},{"id":"906cdb2aa87e6039","type":"group","z":"6ecfad81901dbc79","name":"Not parsed as colours","style":{"label":true},"nodes":["5cb73ec3fab39b5a","a81d7c7a9a8f8f6f","400cc71f2530b523","175725b77648ab3c","0492e6c47b3ca430","8089f8eb2b0b9e86"],"x":374,"y":19,"w":332,"h":242},{"id":"7b7f11c97f380360","type":"group","z":"6ecfad81901dbc79","name":"Parsed as colours","style":{"label":true},"nodes":["dc6f8a787e93e420","d6b28fa128b48f29","40fef6131f5d9471","0492bee66445e317","a6cf107232169557","45a91610e6686564","ee99094e152ffe8e"],"x":34,"y":19,"w":312,"h":282},{"id":"ee99094e152ffe8e","type":"junction","z":"6ecfad81901dbc79","g":"7b7f11c97f380360","x":320,"y":160,"wires":[["fa7c1e96e06b19c7"]]},{"id":"8089f8eb2b0b9e86","type":"junction","z":"6ecfad81901dbc79","g":"906cdb2aa87e6039","x":680,"y":140,"wires":[["e03caf58f2cdea5d"]]},{"id":"e03caf58f2cdea5d","type":"junction","z":"6ecfad81901dbc79","x":660,"y":280,"wires":[["2e265d180cf68b46"]]},{"id":"fa7c1e96e06b19c7","type":"junction","z":"6ecfad81901dbc79","x":340,"y":320,"wires":[["2e265d180cf68b46"]]},{"id":"2e265d180cf68b46","type":"junction","z":"6ecfad81901dbc79","x":400,"y":320,"wires":[["0cdf049b1b5c436f"]]},{"id":"0cdf049b1b5c436f","type":"function","z":"6ecfad81901dbc79","name":"Apply regex","func":"// First example from khalilgharbaoui contribution to https://gist.github.com/olmokramer/82ccce673f86db7cda5e\n// But ^ and $ added\nconst regex = /^(#(?:[0-9a-fA-F]{2}){2,4}$|(#[0-9a-fA-F]{3}$)|(rgb|hsl)a?\\((-?\\d+%?[,\\s]+){2,3}\\s*[\\d\\.]+%?\\)$|black$|silver$|gray$|whitesmoke$|maroon$|red$|purple$|fuchsia$|green$|lime$|olivedrab$|yellow$|navy$|blue$|teal$|aquamarine$|orange$|aliceblue$|antiquewhite$|aqua$|azure$|beige$|bisque$|blanchedalmond$|blueviolet$|brown$|burlywood$|cadetblue$|chartreuse$|chocolate$|coral$|cornflowerblue$|cornsilk$|crimson$|darkblue$|darkcyan$|darkgoldenrod$|darkgray$|darkgreen$|darkgrey$|darkkhaki$|darkmagenta$|darkolivegreen$|darkorange$|darkorchid$|darkred$|darksalmon$|darkseagreen$|darkslateblue$|darkslategray$|darkslategrey$|darkturquoise$|darkviolet$|deeppink$|deepskyblue$|dimgray$|dimgrey$|dodgerblue$|firebrick$|floralwhite$|forestgreen$|gainsboro$|ghostwhite$|goldenrod$|gold$|greenyellow$|grey$|honeydew$|hotpink$|indianred$|indigo$|ivory$|khaki$|lavenderblush$|lavender$|lawngreen$|lemonchiffon$|lightblue$|lightcoral$|lightcyan$|lightgoldenrodyellow$|lightgray$|lightgreen$|lightgrey$|lightpink$|lightsalmon$|lightseagreen$|lightskyblue$|lightslategray$|lightslategrey$|lightsteelblue$|lightyellow$|limegreen$|linen$|mediumaquamarine$|mediumblue$|mediumorchid$|mediumpurple$|mediumseagreen$|mediumslateblue$|mediumspringgreen$|mediumturquoise$|mediumvioletred$|midnightblue$|mintcream$|mistyrose$|moccasin$|navajowhite$|oldlace$|olive$|orangered$|orchid$|palegoldenrod$|palegreen$|paleturquoise$|palevioletred$|papayawhip$|peachpuff$|peru$|pink$|plum$|powderblue$|rosybrown$|royalblue$|saddlebrown$|salmon$|sandybrown$|seagreen$|seashell$|sienna$|skyblue$|slateblue$|slategray$|slategrey$|snow$|springgreen$|steelblue$|tan$|thistle$|tomato$|transparent$|turquoise$|violet$|wheat$|white$|yellowgreen$|rebeccapurple$)$/i\n\n// Second example (mine) has named colours stripped out\n// Also simplified #[0-9a-fA-F] since whole thing is case insensitive\n//const noNamesRegex = /^(#(?:[0-9a-f]{2}){2,4}$|(#[0-9a-f]{3}$)|(rgb|hsl)a?\\((-?\\d+%?[,\\s]+){2,3}\\s*[\\d\\.]+%?\\)$)$/i\nconst noNamesRegex = /^(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\\((-?\\d+%?[,\\s]+){2,3}\\s*[\\d\\.]+%?\\))$/i\n\nconst payloadString = msg.payload.toString()\nif (payloadString.match(noNamesRegex)) { \n msg.payload = msg.payload + \" is a colour\"\n}\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":490,"y":320,"wires":[["6006897f117c106b"]]},{"id":"5cb73ec3fab39b5a","type":"inject","z":"6ecfad81901dbc79","g":"906cdb2aa87e6039","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":480,"y":180,"wires":[["8089f8eb2b0b9e86"]]},{"id":"6006897f117c106b","type":"debug","z":"6ecfad81901dbc79","name":"debug 4","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":640,"y":320,"wires":[]},{"id":"dc6f8a787e93e420","type":"inject","z":"6ecfad81901dbc79","g":"7b7f11c97f380360","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"#005dff","payloadType":"str","x":130,"y":100,"wires":[["ee99094e152ffe8e"]]},{"id":"d6b28fa128b48f29","type":"inject","z":"6ecfad81901dbc79","g":"7b7f11c97f380360","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"hsl(218, 100%, 50%)","payloadType":"str","x":170,"y":180,"wires":[["ee99094e152ffe8e"]]},{"id":"40fef6131f5d9471","type":"inject","z":"6ecfad81901dbc79","g":"7b7f11c97f380360","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"rgb(0, 93, 255)","payloadType":"str","x":160,"y":220,"wires":[["ee99094e152ffe8e"]]},{"id":"a81d7c7a9a8f8f6f","type":"inject","z":"6ecfad81901dbc79","g":"906cdb2aa87e6039","name":"aliceblue","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"aliceblue","payloadType":"str","x":480,"y":220,"wires":[["8089f8eb2b0b9e86"]]},{"id":"0492bee66445e317","type":"inject","z":"6ecfad81901dbc79","g":"7b7f11c97f380360","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"RGBA(0, 93, 255, 0.5)","payloadType":"str","x":180,"y":260,"wires":[["ee99094e152ffe8e"]]},{"id":"400cc71f2530b523","type":"inject","z":"6ecfad81901dbc79","g":"906cdb2aa87e6039","name":"{\"foo\":\"abc\", \"color\":\"#FFFF\"}","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"foo\":\"abc\", \"color\":\"#FFFF\"}","payloadType":"json","x":540,"y":60,"wires":[["8089f8eb2b0b9e86"]]},{"id":"a6cf107232169557","type":"inject","z":"6ecfad81901dbc79","g":"7b7f11c97f380360","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"#FFF","payloadType":"str","x":130,"y":60,"wires":[["ee99094e152ffe8e"]]},{"id":"175725b77648ab3c","type":"inject","z":"6ecfad81901dbc79","g":"906cdb2aa87e6039","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"#7cffe0AAc9a01f","payloadType":"str","x":500,"y":100,"wires":[["8089f8eb2b0b9e86"]]},{"id":"45a91610e6686564","type":"inject","z":"6ecfad81901dbc79","g":"7b7f11c97f380360","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"#7cffe0AA","payloadType":"str","x":140,"y":140,"wires":[["ee99094e152ffe8e"]]},{"id":"0492e6c47b3ca430","type":"inject","z":"6ecfad81901dbc79","g":"906cdb2aa87e6039","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"rgb (0, 93, 255)","payloadType":"str","x":500,"y":140,"wires":[["8089f8eb2b0b9e86"]]}]
```
It recognises as a colour (only complete payload, case insensitive)
- #fff (which the current debug ignores)
- #0a2b3c
- rgb(r, g, b)
- rgba(r, g, b, a)
- hsl(hue, s%, l%)
- hsla(h, s%, l%, a)
It does not recognise as a colour
- Objects
- Timestamps
- rgb (r,g,b) ie a space after RGB
- Named colors
- #FFFFF ie a bad color definition
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [30 November 2023 16:44 UTC](https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306/4 "2023-11-30T16:44:50Z")
Feel free to experiment around here and raise a PR.
>
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [30 November 2023 17:41 UTC](https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306/5 "2023-11-30T17:41:12Z")
To get you moving - a head start on the regex listed from easiest to hardest (slowest to fastest)
> [@jbudd](#):
>
> - #fff (which the current debug ignores)
> - #0a2b3c
spec: `#RGB[A]` or `#RRGGBB[AA]`
regex: `^#[a-f\d]{3}(?:[a-f\d]?|(?:[a-f\d]{3}(?:[a-f\d]{2})?)?)\b$`
[try it out](https://regex101.com/r/iAXlUb/1)
> [@jbudd](#):
>
> - hsl(hue, s%, l%)
> - hsla(h, s%, l%, a)
spec: `hsl[a](H, S, L[, A])` or `hsl[a](H S L[/ A])`
regex: `^hsla?\((?:(-?\d+(?:deg|g?rad|turn)?),\s*((?:\d{1,2}|100)%),\s*((?:\d{1,2}|100)%)(?:,\s*((?:\d{1,2}|100)%|0(?:\.\d+)?|1))?|(-?\d+(?:deg|g?rad|turn)?)\s+((?:\d{1,2}|100)%)\s+((?:\d{1,2}|100)%)(?:\s+((?:\d{1,2}|100)%|0(?:\.\d+)?|1))?)\)$`
[try it out](https://regex101.com/r/bzY1co/1)
> [@jbudd](#):
>
> - rgb(r, g, b)
> - rgba(r, g, b, a)
spec: `rgb[a](R, G, B[, A])` or `rgb[a](R G B[/ A])`
regex: `^rgba?\((?:(25[0-5]|2[0-4]\d|1?\d{1,2}|(?:\d{1,2}|100)%),\s*(25[0-5]|2[0-4]\d|1?\d{1,2}|(?:\d{1,2}|100)%),\s*(25[0-5]|2[0-4]\d|1?\d{1,2}|(?:\d{1,2}|100)%)(?:,\s*((?:\d{1,2}|100)%|0(?:\.\d+)?|1))?|(25[0-5]|2[0-4]\d|1?\d{1,2}|(?:\d{1,2}|100)%)\s+(25[0-5]|2[0-4]\d|1?\d{1,2}|(?:\d{1,2}|100)%)\s+(25[0-5]|2[0-4]\d|1?\d{1,2}|(?:\d{1,2}|100)%)(?:\s+((?:\d{1,2}|100)%|0(?:\.\d+)?|1))?)\)$`
[try it out](https://regex101.com/r/9clVym/1)
Adapted from [this post](https://stackoverflow.com/questions/63856249/regex-for-finding-css-colors-in-strings-including-alpha-values)
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [30 November 2023 17:52 UTC](https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306/6 "2023-11-30T17:52:13Z")
Hah regrex as readable as ever !
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [30 November 2023 17:59 UTC](https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306/7 "2023-11-30T17:59:07Z")
Makes me yearn for MS basic wildcard matching 😃
---
### Author:  [@shrickus](https://discourse.nodered.org/u/shrickus)
#### Post date: [30 November 2023 18:00 UTC](https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306/8 "2023-11-30T18:00:35Z")
> [@Steve-Mcl](#):
>
> a head start on the regex listed from easiest to hardest
Nice list, Steve -- I'm assuming that these should be evaluated as case-insensitive, right?
Also, it seems that the regex should allow an optional space between the function and argument list, or between arguments -- e.g. `rgb ( 10 ,20,30 )` -- since the browser allows this, iirc.
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [30 November 2023 18:04 UTC](https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306/9 "2023-11-30T18:04:36Z")
> [@shrickus](#):
>
> Nice list, Steve -- I'm assuming that these should be evaluated as case-insensitive, right?
Yes (as per CSS guidelines)
So each regex would be `/..regex../i`
> [@shrickus](#):
>
> Also, it seems that the regex should allow an optional space between the function and argument list, or between arguments -- e.g. `rgb ( 10 ,20,30 )` -- since the browser allows this, iirc.
I thought about that, but decided not to the regex is hefty enough IMO.
Easy enough to retro though.
Which makes me wonder, would pure JS be faster 🤔
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [30 November 2023 18:13 UTC](https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306/10 "2023-11-30T18:13:12Z")
It makes me wonder. Would a specific indicator node be better -see other thread about more debug options.
#theeditorisnotadashboard
---
### Author:  [@shrickus](https://discourse.nodered.org/u/shrickus)
#### Post date: [30 November 2023 18:16 UTC](https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306/11 "2023-11-30T18:16:15Z")
> [@Steve-Mcl](#):
>
> but decided not to the regex is hefty enough IMO
Well that is true... adding a bunch of optional whitespace `\s?` syntax everywhere is ugly.
So just a thought -- remove all whitespace before applying the "rbg(...)" and "hsl(...)" regex???
I'm trying to imagine a scenario where that might cause a false-positive, but can't think of one.
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [30 November 2023 18:26 UTC](https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306/12 "2023-11-30T18:26:04Z")
wouldn't you have to first test for starting with rgb or hsl - then remove whitespace - then fully test... ? All getting rather OTT IMHO 🤷♂️
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [30 November 2023 18:30 UTC](https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306/13 "2023-11-30T18:30:37Z")
> [@Steve-Mcl](#):
>
> Makes me yearn for MS basic wildcard matching
Actually makes me long for IBM's REXX language (was also available on Amiga weirdly) which was always excellent at text manipulation. 😀
---
### Author:  [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)
#### Post date: [30 November 2023 18:43 UTC](https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306/14 "2023-11-30T18:43:38Z")
> [@TotallyInformation](#):
>
> Amiga
Those were the days 🤩
---
### Author:  [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)
#### Post date: [30 November 2023 18:46 UTC](https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306/15 "2023-11-30T18:46:44Z")
> [@Sean-McG](#):
>
> Those were the days 🤩
Don't get me started (Have been quite spammy today)
But I often find my self firing up FS-UAE (OSX equivalent to WinUAE).
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [30 November 2023 19:04 UTC](https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306/16 "2023-11-30T19:04:32Z")
ahhh still plenty of love out there for Rexx - [RexxInfo.org - Free Tutorials, Downloads, Tools, Info, more](https://rexxinfo.org/index.html).
Of course [Mike](https://en.wikipedia.org/wiki/Mike_Cowlishaw) used to work at Hursley and helped me on our early Pageprinter project.
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [30 November 2023 19:23 UTC](https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306/17 "2023-11-30T19:23:28Z")
And, of course, the forerunner to HTML was IBM's SGML and I was quite the expert at that since that was how we did word processing back in the day. No WSYIWG back then. 😀
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [30 November 2023 19:36 UTC](https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306/18 "2023-11-30T19:36:29Z")
> [@shrickus](#):
>
> So just a thought -- remove all whitespace before applying the "rbg(...)" and "hsl(...)" regex?
Unfortunately not. Space is a valid separator:
```auto
hsl(123rad 100% 0%)
hsla(123grad, 100%, 0%, 0)
hsla(-123turn 100% 0% 1)
hsla(1 100% 0% 50%)
rgb(0,0,0)
rgb(255,255,255)
rgb(0%, 255, 255)
rgba(0%, 255, 0, 0)
rgb(0 0 0)
rgb(255 255 255)
rgb(0% 255 255)
rgba(0% 25 0 0)
```
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [30 November 2023 19:38 UTC](https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306/19 "2023-11-30T19:38:56Z")
Did you miss one?
```css
hsl(204 89% 55% / 70%)
```
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [30 November 2023 19:57 UTC](https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306/20 "2023-11-30T19:57:30Z")
If space is valid then convert any , / etc between ( and ) to spaces ?
[Next page](https://discourse.nodered.org/t/colour-codes-in-debug-panel/83306.md?page=2)