# New Plugin: Color styles to JSON file **URL:** \ **Category:** Product updates\ **Tags:** tokens, design-tokens\ **Created:** [April 10, 2025, 7:53am UTC](https://community.penpot.app/t/new-plugin-color-styles-to-json-file/8417 "2025-04-10T07:53:47Z")\ **Posts on this page:** 3\ **Page:** 1
**Author:** ![natacha](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/natacha/32/44_2.png) [@natacha](https://community.penpot.app/u/natacha)\ **Post date:** [April 10, 2025, 7:53am UTC](https://community.penpot.app/t/new-plugin-color-styles-to-json-file/8417/1 "2025-04-10T07:53:47Z")
Hey! We’d love to share with you the plugin we’ve developed to migrate your current **Color Styles** to **Tokens** easily. ![image](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/a/aee31c166b5d2c151c93adf4e04fa64501ab48b1.png) **What does this plugin do?** It converts the color styles you’ve already created in Penpot into a JSON file compatible with Design Tokens. Then, you can import this file into the Tokens tab to replicate the same structure as your styles. **Things to keep in mind:** - If your styles are grouped, those groups will be turned into token sets. - It works with solid colors and colors with opacity, but not with images or gradients (those aren’t supported by tokens yet). - Keep in mind that styles only store raw values, while tokens can also store references to other existing colors, so you will be able to create those references once imported. - This file gives you a solid starting point for your color system - no need to recreate everything manually. **Plugin page:** > **[Penpot | Plugins](https://penpot.app/penpothub/plugins/colors_styles_to_JSON_file)** > > Build, share and use plugins to enhance your design workflow. **Install URL:** [https://colors-to-tokens-plugin.pages.dev/assets/manifest.json](https://colors-to-tokens-plugin.pages.dev/assets/manifest.json) ![img](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/7/7d4b548aaabb16652c45a93b561d16a82570747d.webp) ---
**Author:** ![Louis](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/louis/32/10600_2.png) [@Louis](https://community.penpot.app/u/Louis)\ **Post date:** [April 10, 2025, 10:00am UTC](https://community.penpot.app/t/new-plugin-color-styles-to-json-file/8417/2 "2025-04-10T10:00:18Z")
This is great! Just to ensure I got it right, when importing a json file it will replace the current tokens in the penpot file correct? So if we want to simply add these generated colors to our existing tokens, we should copy and paste the content into our json at the right place correct? ---
**Author:** ![natacha](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/natacha/32/44_2.png) [@natacha](https://community.penpot.app/u/natacha)\ **Post date:** [April 10, 2025, 10:26am UTC](https://community.penpot.app/t/new-plugin-color-styles-to-json-file/8417/3 "2025-04-10T10:26:35Z")
> [@Louis](#): > > Just to ensure I got it right, when importing a json file it will replace the current tokens in the penpot file correct? Right, currently importing a new JSON will override the existing sets, tokens, and themes. > [@Louis](#): > > So if we want to simply add these generated colors to our existing tokens, we should copy and paste the content into our json at the right place correct? Right, the best approach here is: - First, export the tokens you’ve already created in the Tokens tab - Export your styles using the plugin - Merge or copy these new tokens into the original JSON This way, you’ll keep your sets, themes, and tokens when reimporting. If you’ve already applied tokens in your designs and those tokens still exist (with the same name), everything will work as expected, since the information about applied tokens is still stored in Penpot. hope I’m explaining this clearly! Let me know if it helps!