# Color Picker Attribute sync with Gutenberg Color Palette

**URL:** <https://forum.pinegrow.com/t/color-picker-attribute-sync-with-gutenberg-color-palette/7841>\
**Category:** Styling (CSS)\
**Tags:** gutenberg\
**Created:** [March 20, 2023, 7:40pm UTC](https://forum.pinegrow.com/t/color-picker-attribute-sync-with-gutenberg-color-palette/7841 "2023-03-20T19:40:53Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Patrick\_Z](https://avatars.discourse-cdn.com/v4/letter/p/b487fb/32.png) [@Patrick\_Z](https://forum.pinegrow.com/u/Patrick_Z)\
**Post date:** [March 20, 2023, 7:40pm UTC](https://forum.pinegrow.com/t/color-picker-attribute-sync-with-gutenberg-color-palette/7841/1 "2023-03-20T19:40:53Z")

</div>

Hey, everybody,  
how can I synchronise the colour palette from Gutenberg with the colourpicker (from an attribute)?

 ![colourpicker sync](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/0/0a0a96b3aba1bd74a8a7b898c0065d76501fd36e.jpeg)

It would be so good if this could somehow work out!

Best and thank you  
Patrick

---

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [March 22, 2023, 7:42pm UTC](https://forum.pinegrow.com/t/color-picker-attribute-sync-with-gutenberg-color-palette/7841/2 "2023-03-22T19:42:20Z")

</div>

As much as I’d love to see this, I doubt Pinegrow will be able to solve the issue anytime soon. In fact, even the most prominent themes and block plugins struggle with managing color and typography across the theme, front-end, and Gutenberg editor. This is one of those areas where WordPress is a giant mess, and it’s only getting worse with the uptake of theme.json.

If you are creating a theme using Pinegrow, then there are some things you can do by enqueuing block assets (see [Matthias Altmann’s excellent article](https://www.altmann.de/en/blog-en/code-snippet-oxygen-colors-in-gutenberg/) for Oxygen as inspiration), but things aren’t quite as straightforward if you are just making blocks.

What I end up doing, is manually creating a theme.json file with my site colors, typography, and other styles based on the CSS I’m using in Pinegrow. It’s a manual step, but it gets the job done.

---

<div class="post-metadata">

**Author:** ![Patrick\_Z](https://avatars.discourse-cdn.com/v4/letter/p/b487fb/32.png) [@Patrick\_Z](https://forum.pinegrow.com/u/Patrick_Z)\
**Post date:** [March 24, 2023, 1:19pm UTC](https://forum.pinegrow.com/t/color-picker-attribute-sync-with-gutenberg-color-palette/7841/3 "2023-03-24T13:19:58Z")

</div>

Hey Adam,  
thank’s for your answer!

Jepp, at the moment it’s a mess …

My workflow:

1. ACF Options page with colour and typo settings
2. functions.php add\_theme\_support('editor-color-palette’array(…) to get these colours in gutenberg
3. On ACF Option Safe =\> scssphp to compile sass on the server

The question is:  
How do I get this or other colours into the Pinegrow attribute colour picker?  
It is the integrated colour picker of Pinegrow itself! You can see it in the attached image from my original post.

Is there a function or something to archive this?

---

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [March 24, 2023, 3:57pm UTC](https://forum.pinegrow.com/t/color-picker-attribute-sync-with-gutenberg-color-palette/7841/4 "2023-03-24T15:57:51Z")

</div>

Your workflow sounds pretty solid. Now, getting those colors into the PG color picker is probably something that @matjaz would need to add as an enhancement since I don’t think we have the ability to modify the controls in pg-blocks-controls.js.

It’s probably worth adding a [feature request](https://forum.pinegrow.com/c/feature-request/23), especially since I suspect he’ll need to touch that code to account for theme.json and FSE in the semi-near future.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/7/7f444c8f547b675579dbc64e04466dd3c10b3ca0.png)

---

<div class="post-metadata">

**Author:** ![Patrick\_Z](https://avatars.discourse-cdn.com/v4/letter/p/b487fb/32.png) [@Patrick\_Z](https://forum.pinegrow.com/u/Patrick_Z)\
**Post date:** [March 28, 2023, 5:38pm UTC](https://forum.pinegrow.com/t/color-picker-attribute-sync-with-gutenberg-color-palette/7841/5 "2023-03-28T17:38:59Z")

</div>

Hey Adam,  
thanks, i’ve added a feature request 🙂

> [@Match Gutenberg colour palette with Pinegrow Colour Picker](https://forum.pinegrow.com/t/match-gutenberg-colour-palette-with-pinegrow-colour-picker/7871):
>
> Description: At the moment, the Gutenberg Colours palette is not displayed in Pinegrow’s colour picker. Here is my topic for more infos: [https://forum.pinegrow.com/t/color-picker-attribute-sync-with-gutenberg-color-palette/7841](https://forum.pinegrow.com/t/color-picker-attribute-sync-with-gutenberg-color-palette/7841) Problem: If a customer has set a Gutenberg colour palette and then wants to add a color to a button (created with Pinegrow) he must enter a HEX-Value. Most of the time the customer doesn’t know the HEX value or it is quite error-prone. Expectation: It should be pos…
