# Looking for a p5.js Color Chooser widget

**URL:** <https://discourse.processing.org/t/looking-for-a-p5-js-color-chooser-widget/6868>\
**Category:** Libraries\
**Created:** [December 24, 2018, 6:32am UTC](https://discourse.processing.org/t/looking-for-a-p5-js-color-chooser-widget/6868 "2018-12-24T06:32:56Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![grege2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/grege2/32/3069_2.png) [@grege2](https://discourse.processing.org/u/grege2)\
**Post date:** [December 24, 2018, 6:32am UTC](https://discourse.processing.org/t/looking-for-a-p5-js-color-chooser-widget/6868/1 "2018-12-24T06:32:56Z")

</div>

Hi all,

Happy Christmas Eve ! Coding away on Christmas Eve, sad eh? But it’s actually a great time to make some progress on hobbies. Got the day off, everything is ready for Christmas.

Anyone know a Color Chooser in JavaScript for p5.js ? Happy to hack some code that’s not quite ready, or convert something from Java, maybe the JColorChooser widget. think my preference would be something like the Mac color chooser from TextEdit, the “Spectrum” option, with colors laid out so you can choose H,S,B all off the same palette. Image below …

Thanks ! Have a great Christmas.

 ![spectrum](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5eb7ae0f73b94f41ddefdaafbadccef8ea78a5cf.png)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 24, 2018, 7:20am UTC](https://discourse.processing.org/t/looking-for-a-p5-js-color-chooser-widget/6868/2 "2018-12-24T07:20:11Z")

</div>

> **[DatGuiTest](http://bl.ocks.org/GoSubRoutine/861b48f0b0118219c6a7cdd28309ee62)**
>
> GoSubRoutine’s Block 861b48f0b0118219c6a7cdd28309ee62

---

<div class="post-metadata">

**Author:** ![figraham](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/figraham/32/4161_2.png) [@figraham](https://discourse.processing.org/u/figraham)\
**Post date:** [December 24, 2018, 7:25am UTC](https://discourse.processing.org/t/looking-for-a-p5-js-color-chooser-widget/6868/3 "2018-12-24T07:25:10Z")

</div>

[Tanvi Kumar has added it the p5 library](https://github.com/processing/p5.js/pull/3089). I couldn’t find it in the documentation but just use `createColorPicker()` and you should get a button. I copy and pasted the example from the source code into [a sketch](https://editor.p5js.org/figraham/sketches/SJ9vUWAeV). I’ll look into why it’s not in the documentation.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 24, 2018, 7:32am UTC](https://discourse.processing.org/t/looking-for-a-p5-js-color-chooser-widget/6868/4 "2018-12-24T07:32:02Z")

</div>

> [@figraham](#):
>
> I couldn’t find it in the documentation but just use `createColorPicker()` and you should get a button.

Nice, I didn’t know about that 1! However as you have stated, it’s not in the reference yet! 😳

---

<div class="post-metadata">

**Author:** ![figraham](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/figraham/32/4161_2.png) [@figraham](https://discourse.processing.org/u/figraham)\
**Post date:** [December 24, 2018, 7:38am UTC](https://discourse.processing.org/t/looking-for-a-p5-js-color-chooser-widget/6868/5 "2018-12-24T07:38:49Z")

</div>

I’m not sure why it’s not showing up. It’s part of the p5.dom but the screenshot I saw shows the link as being somewhere else in the reference. [https://cdn-images-1.medium.com/max/1200/0\*5AoWN3onIwiOCie4](https://cdn-images-1.medium.com/max/1200/0*5AoWN3onIwiOCie4). I went there and got nothing so I searched the site for it and only one sketch from the web editor came up. I’m working on an issue for it unless someone can find it.

---

<div class="post-metadata">

**Author:** ![figraham](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/figraham/32/4161_2.png) [@figraham](https://discourse.processing.org/u/figraham)\
**Post date:** [December 24, 2018, 8:11am UTC](https://discourse.processing.org/t/looking-for-a-p5-js-color-chooser-widget/6868/6 "2018-12-24T08:11:58Z")

</div>

I created an issue about this on the p5 repo. [https://github.com/processing/p5.js/issues/3422](https://github.com/processing/p5.js/issues/3422)

---

<div class="post-metadata">

**Author:** ![grege2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/grege2/32/3069_2.png) [@grege2](https://discourse.processing.org/u/grege2)\
**Post date:** [December 24, 2018, 10:12am UTC](https://discourse.processing.org/t/looking-for-a-p5-js-color-chooser-widget/6868/7 "2018-12-24T10:12:14Z")

</div>

Thanks everyone. Great to see it’s already in there. I have it working in my code. I’m on Mac obviously. Looks like it invokes a native Mac color chooser, in fact the one I asked for. I tried it on Windows 7 and it invoked a similar native Windows color chooser. As several have mentioned, strange it’s not documented, for such a useful widget. Ciao e Buon Natale.