Built a Simple Color Palette Generator as a Coding Newbie—Check Out ColorSynth.
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.