# Use Penpot color picker in Plugin

**URL:** <https://community.penpot.app/t/use-penpot-color-picker-in-plugin/7540>\
**Category:** Ask the community\
**Tags:** libraries-templates, plugin, color-picker\
**Created:** [January 13, 2025, 2:59pm UTC](https://community.penpot.app/t/use-penpot-color-picker-in-plugin/7540 "2025-01-13T14:59:02Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![BDV](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/bdv/32/8012_2.png) [@BDV](https://community.penpot.app/u/BDV)\
**Post date:** [January 13, 2025, 2:59pm UTC](https://community.penpot.app/t/use-penpot-color-picker-in-plugin/7540/1 "2025-01-13T14:59:02Z")

</div>

@Elena_Alcalde_Rueda If you want to use the same color picker like the one used in Penpot in a Plugin.  
Is there a template where you can see how to do it?  
Below the image of the color picker

 ![1541072482](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/6/640054e0538cdf872064f30d944d20d251b35ed7.webp)

---

<div class="post-metadata">

**Author:** ![BDV](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/bdv/32/8012_2.png) [@BDV](https://community.penpot.app/u/BDV)\
**Post date:** [January 16, 2025, 4:24am UTC](https://community.penpot.app/t/use-penpot-color-picker-in-plugin/7540/2 "2025-01-16T04:24:24Z")

</div>

@Paula can you help me with the thing above? Get no response from Elena…

---

<div class="post-metadata">

**Author:** ![carolina.portugal](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/carolina.portugal/32/36_2.png) [@carolina.portugal](https://community.penpot.app/u/carolina.portugal)\
**Post date:** [January 16, 2025, 11:07am UTC](https://community.penpot.app/t/use-penpot-color-picker-in-plugin/7540/3 "2025-01-16T11:07:50Z")

</div>

Hello @BDV, sorry but i don’t understand your request, could you explain more?

---

<div class="post-metadata">

**Author:** ![BDV](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/bdv/32/8012_2.png) [@BDV](https://community.penpot.app/u/BDV)\
**Post date:** [January 16, 2025, 12:41pm UTC](https://community.penpot.app/t/use-penpot-color-picker-in-plugin/7540/4 "2025-01-16T12:41:26Z")

</div>

@carolina.portugal What I mean is, when you create your own penpot plugin, you can use [templates](https://github.com/penpot/plugin-examples) as a starting point. To me, it seems useful should a template exist where the Penpot default colour picker is used. So that you can use the same colour picker as in Penpot when creating a plugin. Only I can’t find this template directly. So the question is, is there a plugin template that uses the Penpot colour picker? If not, is it possible to create a template. If you need any further explanation please feel free to ask.

---

<div class="post-metadata">

**Author:** ![malliaridis](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/malliaridis/32/6866_2.png) [@malliaridis](https://community.penpot.app/u/malliaridis)\
**Post date:** [January 19, 2025, 10:43pm UTC](https://community.penpot.app/t/use-penpot-color-picker-in-plugin/7540/5 "2025-01-19T22:43:02Z")

</div>

What you are probably looking for is not a “template”, but input styles for the color input field, as provided by [penpot/plugin-styles](https://www.npmjs.com/package/@penpot/plugin-styles) (like for text input fields, see [here](https://penpot-plugins-styles.pages.dev/)).

From what I could find, there is no such styled color input field yet. I personally am interested in one as well, and for the time being I styled it myself. See the color picker component in [color-picker](https://github.com/malliaridis/penpot-plugin-material3-theme-builder/blob/5c9b08750e946d4faadb05353351201cfe227e75/src/components/color-picker).

Not the perfect solution, but good enough to work with. 🙂

---

<div class="post-metadata">

**Author:** ![BDV](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/bdv/32/8012_2.png) [@BDV](https://community.penpot.app/u/BDV)\
**Post date:** [January 20, 2025, 3:01am UTC](https://community.penpot.app/t/use-penpot-color-picker-in-plugin/7540/6 "2025-01-20T03:01:57Z")

</div>

@malliaridis myself rather think that it is a template, but it is true that it would be useful if the colour input field could be found in the Penpot plugin styles.

The reason why I think it is a template is the following:

- I don’t just want the input styles for the colour input field, I want the styles to rebuild the entire Penpot colour picker as shown in the first post. So it can be used in a plugin.
- In the image of the Penpot Colour picker, number 1 is a colour picker, it would be useful if we could use the underlying code so that it is possible to manually pick a colour from the worksheet.
- The same as above applies to recently chosen colours, choosing colour, …

In other words, you are able to use in a plugin identically the same colour picker currently used in Penpot.

---

<div class="post-metadata">

**Author:** ![BDV](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/bdv/32/8012_2.png) [@BDV](https://community.penpot.app/u/BDV)\
**Post date:** [January 21, 2025, 6:17pm UTC](https://community.penpot.app/t/use-penpot-color-picker-in-plugin/7540/7 "2025-01-21T18:17:14Z")

</div>

@carolina.portugal Any chance to get an update on this topic?
