# Can ColourSelector show its current colour, or get a LookAndFeel?

**URL:** <https://forum.juce.com/t/can-colourselector-show-its-current-colour-or-get-a-lookandfeel/28694>\
**Category:** General JUCE discussion\
**Created:** [July 24, 2018, 11:12am UTC](https://forum.juce.com/t/can-colourselector-show-its-current-colour-or-get-a-lookandfeel/28694 "2018-07-24T11:12:21Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![stijnfrishert](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/stijnfrishert/32/15727_2.png) [@stijnfrishert](https://forum.juce.com/u/stijnfrishert)\
**Post date:** [July 24, 2018, 11:12am UTC](https://forum.juce.com/t/can-colourselector-show-its-current-colour-or-get-a-lookandfeel/28694/1 "2018-07-24T11:12:21Z")

</div>

Hi Juce team,

I was wondering if it were possible to expand on ColourSelector. I would love for it to show me the currently selected colour over the hue and colour space gradients. Right now when I open my colour selector with a given colour, I have no idea “where” that is, which makes picking a new colour really hard.

Another solution would be to open up ColourSelector for its own LookAndFeelMethods too. That way I could do this myself.

~ Stijn  
Moditone

---

<div class="post-metadata">

**Author:** ![ImJimmi](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/imjimmi/32/10843_2.png) [@ImJimmi](https://forum.juce.com/u/ImJimmi)\
**Post date:** [July 24, 2018, 12:00pm UTC](https://forum.juce.com/t/can-colourselector-show-its-current-colour-or-get-a-lookandfeel/28694/2 "2018-07-24T12:00:35Z")

</div>

If ColourSelector doesn’t have any LookAndFeel methods you could just create a new class that inherits from ColourSelector and override its paint() method?

---

<div class="post-metadata">

**Author:** ![stijnfrishert](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/stijnfrishert/32/15727_2.png) [@stijnfrishert](https://forum.juce.com/u/stijnfrishert)\
**Post date:** [July 24, 2018, 2:11pm UTC](https://forum.juce.com/t/can-colourselector-show-its-current-colour-or-get-a-lookandfeel/28694/3 "2018-07-24T14:11:30Z")

</div>

You couldn’t, because ColourSelector uses all kinds of subclasses and internal state I would need access to. More importantly, that’s not how JUCE is set up, the LookAndFeel basically exists for this.

---

<div class="post-metadata">

**Author:** ![ImJimmi](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/imjimmi/32/10843_2.png) [@ImJimmi](https://forum.juce.com/u/ImJimmi)\
**Post date:** [July 24, 2018, 2:42pm UTC](https://forum.juce.com/t/can-colourselector-show-its-current-colour-or-get-a-lookandfeel/28694/4 "2018-07-24T14:42:20Z")

</div>

Okay I hadn’t looked in detail at the ColourSelector class before… you’re right it does have 10 or so subclasses… which i guess is the same reason there’s no L&F methods for ColourSelector because you’d need to have 6 methods for each of the GUI parts of the selector.

But if you really need a solution there’d be no harm in taking a copy of juce\_ColourSelector.h/.cpp and just rewriting all the painting methods. More of a work around than a solution but if it works what’s the harm?

---

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [July 25, 2018, 12:17am UTC](https://forum.juce.com/t/can-colourselector-show-its-current-colour-or-get-a-lookandfeel/28694/5 "2018-07-25T00:17:47Z")

</div>

Can you show a picture of the current ColourSelector and add some annotations to it showing what you want it to display that its not displaying?

---

<div class="post-metadata">

**Author:** ![stijnfrishert](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/stijnfrishert/32/15727_2.png) [@stijnfrishert](https://forum.juce.com/u/stijnfrishert)\
**Post date:** [July 26, 2018, 8:56am UTC](https://forum.juce.com/t/can-colourselector-show-its-current-colour-or-get-a-lookandfeel/28694/6 "2018-07-26T08:56:41Z")

</div>

So here’s a screenshot of the colour picker of Affinity Photo (sure Photoshop basically looks the same). As you can see, on top of the hue slider as well as the colour space square, there’s two circles denoting where the hue and saturation+brightness of the currently selected colour are.

![image](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/9/9c65c29a0ab6d3f058a66d7c27b99cdf90f561f1.jpg)

To contrast, below is the colour picker of our own product, using JUCE’s ColourSelector. Whenever I open the picker it looks like this, _not_ showing me what the currently set colour is. That way it’s really hard to find a colour that is “close to the one I already have”. Something that a colour picker if very often used for.

![image](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/7/7c51b63c0b033c41be7b5981b275193843c3c7e0.jpg)

Sure, I could write my own colour picker component, or hack away at JUCE’s one, but this seems like such a common use case for colour pickers that I’m actually surprised JUCE’s doesn’t behave like this.

---

<div class="post-metadata">

**Author:** ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://forum.juce.com/u/jules)\
**Post date:** [July 26, 2018, 9:11am UTC](https://forum.juce.com/t/can-colourselector-show-its-current-colour-or-get-a-lookandfeel/28694/7 "2018-07-26T09:11:43Z")

</div>

> [@stijnfrishert](#):
>
> I’m actually surprised JUCE’s doesn’t behave like this.

Um… that’s exactly how the JUCE colour selector _does_ behave!

I’ve no idea how you mangled it so that it behaves differently in your own software, but try any demo app (e.g. in the demo runner under DialogsDemo, click CalloutBox) and you’ll see it working like you describe.

---

<div class="post-metadata">

**Author:** ![daniel](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/daniel/32/790_2.png) [@daniel](https://forum.juce.com/u/daniel)\
**Post date:** [July 26, 2018, 9:13am UTC](https://forum.juce.com/t/can-colourselector-show-its-current-colour-or-get-a-lookandfeel/28694/8 "2018-07-26T09:13:31Z")

</div>

Did you by chance forget to set a colour, by calling [ColourSelector::setCurrentColour()](https://docs.juce.com/develop/classColourSelector.html#a38aaf19f67b6c6f32628c4e71b3e6b25)?  
I just tried here on Mac, and it works, if I do that:

 ![33%20(3)](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/2/2f6c2a53fa9f9f003fdd321be4cc70efb271c234.png)

---

<div class="post-metadata">

**Author:** ![stijnfrishert](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/stijnfrishert/32/15727_2.png) [@stijnfrishert](https://forum.juce.com/u/stijnfrishert)\
**Post date:** [July 26, 2018, 9:25am UTC](https://forum.juce.com/t/can-colourselector-show-its-current-colour-or-get-a-lookandfeel/28694/9 "2018-07-26T09:25:49Z")

</div>

@jules Well, that explains the surprise! I haven’t actually touched the selector itself in anyway, just instantiated it and added it to the component structure. I’ll take a look at it today, really curious as to why it’s behaving differently now.

@daniel Yeah, I am calling `setCurrentColour()`, so that couldn’t be it. I’ll report back when I get some more information.

---

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [July 26, 2018, 10:06am UTC](https://forum.juce.com/t/can-colourselector-show-its-current-colour-or-get-a-lookandfeel/28694/10 "2018-07-26T10:06:01Z")

</div>

maybe share the code for how you’re calling it?

---

<div class="post-metadata">

**Author:** ![stijnfrishert](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/stijnfrishert/32/15727_2.png) [@stijnfrishert](https://forum.juce.com/u/stijnfrishert)\
**Post date:** [July 26, 2018, 10:28am UTC](https://forum.juce.com/t/can-colourselector-show-its-current-colour-or-get-a-lookandfeel/28694/11 "2018-07-26T10:28:40Z")

</div>

Sure! It’s all wrapped in a custom component:

```
class Selector :
    public juce::Component,
    public juce::ChangeListener
{
public:
    Selector(const juce::Colour& colour);
        
public:
    std::function<void(const juce::Colour&)> onChange;
        
private:
    // ChangeListener
    void changeListenerCallback(juce::ChangeBroadcaster* source) final;
        
    // Component
    void resized() final;
    
private:
    juce::ColourSelector selector;
};

Selector::Selector(const juce::Colour& colour) :
    selector(juce::ColourSelector::showColourspace | juce::ColourSelector::showAlphaChannel, 0, 0)
{
    selector.setCurrentColour(colour);
    selector.addChangeListener(this);
    addAndMakeVisible(selector);
    
    setSize(200, 200);
}

void Selector::changeListenerCallback(juce::ChangeBroadcaster* source)
{
    if (onChange)
        onChange(selector.getCurrentColour());
}

void Selector::resized()
{
    selector.setBounds(getLocalBounds());
}

```

Which is then shown using a callout box:

```
void MyComponent::mouseDown(const juce::MouseEvent& event)
{
    selector = new Selector(colour);
    selector->onChange = [&](auto& c){ /* ... */ };
    juce::CallOutBox::launchAsynchronously(selector, getScreenBounds(), nullptr);
}
```

---

<div class="post-metadata">

**Author:** ![stijnfrishert](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/stijnfrishert/32/15727_2.png) [@stijnfrishert](https://forum.juce.com/u/stijnfrishert)\
**Post date:** [July 26, 2018, 10:34am UTC](https://forum.juce.com/t/can-colourselector-show-its-current-colour-or-get-a-lookandfeel/28694/12 "2018-07-26T10:34:19Z")

</div>

So apparently, the `ColourSpaceMarker` component has a width and height of 0 (after addAndMakeVisible() and setBounds ofc). Its position does seem to make sense, but obviously with a zero size they won’t show.

Investigating further…

[EDIT]

AHA! I’ve set the `edgeGap` and `gapAroundColourSpaceComponent` to 0, which is also used to compute the marker sizes. Not something that’s clear from the documentation at all. And frankly I’d like those gaps to stay at 0 and still have my markers, but I understand why it works like this (the gaps are need to cover the marker outside the colour space).

---

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [July 26, 2018, 10:45am UTC](https://forum.juce.com/t/can-colourselector-show-its-current-colour-or-get-a-lookandfeel/28694/13 "2018-07-26T10:45:55Z")

</div>

why not try something simple like this:

```auto
void Foo::colorSelectorHelper(juce::StringRef name, juce::Colour currentColor)
{
    ColourSelector* cs = new ColourSelector();
    cs->setName( name );
    cs->setCurrentColour( currentColor );
    cs->addChangeListener(changeListener);
    cs->setColour(ColourSelector::backgroundColourId, Colours::transparentBlack);
    cs->setSize(300, 400);
    CallOutBox::launchAsynchronously(cs, changeListener->getScreenBounds(), nullptr);
}

void Bar::changeListenerCallback(ChangeBroadcaster* source)
{
    /* pass Color message where it needs to go*/
    if (ColourSelector* cs = dynamic_cast <ColourSelector*> (source))
    {
        const String& name = cs->getName();
        if (name == ColorPickerTypes::NoteOnColor)
        {
            doSomethingWithColor( cs->getCurrentColour() );
        }

```

don’t forget to setSize() your ColorSelector before you launch it.

---

<div class="post-metadata">

**Author:** ![stijnfrishert](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/stijnfrishert/32/15727_2.png) [@stijnfrishert](https://forum.juce.com/u/stijnfrishert)\
**Post date:** [July 26, 2018, 10:47am UTC](https://forum.juce.com/t/can-colourselector-show-its-current-colour-or-get-a-lookandfeel/28694/14 "2018-07-26T10:47:18Z")

</div>

Because I’d like to add more than just the `juce::ColourSelector` to the contents of the callout box later, specific to our application. 🙂

---

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [July 26, 2018, 10:52am UTC](https://forum.juce.com/t/can-colourselector-show-its-current-colour-or-get-a-lookandfeel/28694/15 "2018-07-26T10:52:33Z")

</div>

ok, but why not just test using that ^ approach first to get the `o` to appear for the color you’re passing in. or even do Daniel’s test in MainContentComponent to verify you’re getting the correct default behavior to begin with.

---

<div class="post-metadata">

**Author:** ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://forum.juce.com/u/jules)\
**Post date:** [July 26, 2018, 11:04am UTC](https://forum.juce.com/t/can-colourselector-show-its-current-colour-or-get-a-lookandfeel/28694/16 "2018-07-26T11:04:14Z")

</div>

> [@stijnfrishert](#):
>
> AHA! I’ve set the `edgeGap` and `gapAroundColourSpaceComponent` to 0, which is also used to compute the marker sizes. Not something that’s clear from the documentation at all. And frankly I’d like those gaps to stay at 0 and still have my markers, but I understand why it works like this (the gaps are need to cover the marker outside the colour space)

Thanks - it does seem a bit silly that it’s not smarter about their size - it should at least give them a minimum size! I’ll sort that out and push something to develop shortly…

---

<div class="post-metadata">

**Author:** ![stijnfrishert](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/stijnfrishert/32/15727_2.png) [@stijnfrishert](https://forum.juce.com/u/stijnfrishert)\
**Post date:** [July 26, 2018, 11:22am UTC](https://forum.juce.com/t/can-colourselector-show-its-current-colour-or-get-a-lookandfeel/28694/17 "2018-07-26T11:22:26Z")

</div>

Great! Thanks, Jules. 🙂

---

<div class="post-metadata">

**Author:** ![Stela09](https://avatars.discourse-cdn.com/v4/letter/s/f1d935/32.png) [@Stela09](https://forum.juce.com/u/Stela09)\
**Post date:** [January 12, 2026, 7:43am UTC](https://forum.juce.com/t/can-colourselector-show-its-current-colour-or-get-a-lookandfeel/28694/18 "2026-01-12T07:43:11Z")

</div>

I ran into the same issue with the LookAndFeel not updating the preview correctly. It’s definitely a bit of a headache when you’re trying to sync custom UI colors. Usually, while I’m still tweaking the visual side of things and don’t want to keep recompiling to see color shifts, I just use [https://colorpickerimage.org/](https://colorpickerimage.org/) to quickly grab the hex values from my design mockups and plug them into the code manually. It’s a handy shortcut while wrestling with the JUCE classes.