# Dashboard themes. Colour names

**URL:** <https://discourse.nodered.org/t/dashboard-themes-colour-names/30154>\
**Category:** Dashboard\
**Created:** [15 July 2020 21:44 UTC](https://discourse.nodered.org/t/dashboard-themes-colour-names/30154 "2020-07-15T21:44:16Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [15 July 2020 21:44 UTC](https://discourse.nodered.org/t/dashboard-themes-colour-names/30154/1 "2020-07-15T21:44:16Z")

</div>

Say I am using the `dark` theme.

The background colour is ...... what I call grey.

But that is a different _grey_ to what I get when I use the colour name grey.

If I want things that match the background of the dark theme, how do I find the name of the colour used? Or at a push: The RGB value?  
It would be nice if it was shown to the person somewhere in the edit window.

Going there I just see the theme selector and it shows `dark`, but no colours listed.

---

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [15 July 2020 21:59 UTC](https://discourse.nodered.org/t/dashboard-themes-colour-names/30154/2 "2020-07-15T21:59:30Z")

</div>

To get really specific colors use HTML hex color values, or RGB values. There is a wide variance on what 'named' colors are defined as, across various environments, browsers, etc. But HEX or RGB should improve how tight the color matching is.

Use a color picker....  
[https://html-color-codes.info/colors-from-image/](https://html-color-codes.info/colors-from-image/)

You can screen capture the dark theme, isolate the color, then feed image file of the color sample to the above web site, should get you to or very close to the HEX or RGB values.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [15 July 2020 22:06 UTC](https://discourse.nodered.org/t/dashboard-themes-colour-names/30154/3 "2020-07-15T22:06:07Z")

</div>

Thanks.  
(extra characters to meet the needed 9 character minimum size)

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [16 July 2020 23:06 UTC](https://discourse.nodered.org/t/dashboard-themes-colour-names/30154/4 "2020-07-16T23:06:15Z")

</div>

> [@Trying\_to\_learn](#):
>
> how do I find the name of the colour used?

Dev tools (but scanning github would work too).

Dark theme:

```auto
:root {
    --nr-dashboard-pageBackgroundColor: #111111;
    --nr-dashboard-pageTitlebarBackgroundColor: #097479;
    --nr-dashboard-groupTextColor: #0eb8c0;
    --nr-dashboard-groupBackgroundColor: #333333;
    --nr-dashboard-groupBorderColor: #555555;
    --nr-dashboard-widgetTextColor: #eeeeee;
    --nr-dashboard-widgetBackgroundColor: #097479;
    --nr-dashboard-widgetBorderColor: #333333;
    --nr-dashboard-widgetColor: #097479;
    --nr-dashboard-widgetBgndColor: #333333;
}

```

Light theme:

```auto
:root {
    --nr-dashboard-pageBackgroundColor: #fafafa;
    --nr-dashboard-pageTitlebarBackgroundColor: #0094CE;
    --nr-dashboard-groupTextColor: #1bbfff;
    --nr-dashboard-groupBackgroundColor: #ffffff;
    --nr-dashboard-groupBorderColor: #ffffff;
    --nr-dashboard-widgetTextColor: #111111;
    --nr-dashboard-widgetBackgroundColor: #0094ce;
    --nr-dashboard-widgetBorderColor: #ffffff;
    --nr-dashboard-widgetColor: #0094ce;
    --nr-dashboard-widgetBgndColor: #ffffff;
}

```

---

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [17 July 2020 12:28 UTC](https://discourse.nodered.org/t/dashboard-themes-colour-names/30154/5 "2020-07-17T12:28:19Z")

</div>

Now that is just sneaky... looking at the code! LOL

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [17 July 2020 12:34 UTC](https://discourse.nodered.org/t/dashboard-themes-colour-names/30154/6 "2020-07-17T12:34:13Z")

</div>

yeah - anyone would think this is open-source... pah.