Built a Simple Color Palette Generator as a Coding Newbie—Check Out ColorSynth.

Sep 16 (edited) in 🤙 Digital Product Creators

Hey everyone,

I wanted to share a small project I worked on over the weekend. As someone who’s relatively new to coding, I challenged myself to build a simple tool that could be useful for designers and anyone working with colors.

🔹Introducing ColorSynth 🎨

ColorSynth is a straightforward app that generates harmonious color palettes from a single base color. The idea came from wanting an easy way to create color schemes without getting bogged down in complex software.

🔹What Can ColorSynth Do?

• Generate color palettes from one hex code: Just input a color, and it creates a palette based on different harmony principles.

• Explore various color harmonies: Choose from Analogous, Complementary, Triadic, and more.

• Accessibility information: It provides contrast ratios to help ensure your colors are readable.

• Easy copying: Quickly copy color codes for your projects.

• Download options: Save your palettes as PNG or SVG images.

• Randomize feature: Get new color ideas with a click.

🔹How I Built It

I used Cursor.com to assemble the app without diving deep into code. Deploying it with v0 and Vercel made getting it online pretty straightforward.

🔹Tech Used

• Next.js: For the app framework.

• Tailwind CSS: For styling.

• Framer Motion: For some basic animations.

• Chroma.js: For handling color calculations.

🔹Challenges Faced

Deciding which features to include was a bit of a balancing act. To make the app truly responsive, I had to dig into the code and manually adjust things like widths, column sizes, and gaps. Even with no-code tools, sometimes you need to tweak things under the hood.

🔹What I Learned

This project showed me that you don’t need to be a coding expert to create something useful. With accessible tools and a bit of tinkering, you can bring your ideas to life. It also gave me insight into the nuances of web development and responsiveness.

🔹Check It Out

Feel free to try out ColorSynth. I’d love to hear your thoughts and any feedback you might have to help improve it.

Thanks for reading, and let me know if you have any feedback/suggestions!

5 comments