Generate HEX, JSON and Import Styles to Figma

Effortlessly convert solid-colored shapes to HEX codes, generate stunning color scales, and import/export styles as JSON for seamless collaboration. Crafted with 💗 from Nepal, it’s designed to make your creative journey smoother and more efficient. Try it today and elevate your Figma experience!

Generate HEX Code: Select the solid colored shapes and hit the button to extract color codes just below the shape.

Extract Colors: Select the solid colored shape and hit the button to display the respective color scale from 50,100,200 to 950, from light to dark. You can input the Scale Name for naming the style as a groupGenerate JSON: To generate JSON code in key value pairs, where keys will be the color scales and values will be HEX codesImport JSON Style: To import the extracted colors to the local style in Figma. Importing JSON directly to Figma local styleConstraints: For correct order of color scales, you have to first arrange the shapes from light to dark in ascending order.

Limitations: Generating color scales/weights below the HEX Code.

Usecase: Design system/Style guides