What I Learned from Making CoolHue and Getting 1000+ Upvotes on Product Hunt

I used to believe that knowing the latest technologies was essential to build something thousands of developers or designers can use. After building and launching CoolHue, I realized that that doesn’t have to be the case. Sometimes, all it takes is the desire to tackle a common problem and a passion for designing simple solutions.

TL;DR

• The idea for CoolHue came about as I was working on a project and needed to use the same set of color gradients over and over.
• I built CoolHue using simple technologies (HTML, CSS, and some JavaScript) to automate this process.
• Seeing CoolHue’s huge success, including getting 1000+ upvotes on Product Hunt, I realized that, often, the technology doesn’t play a major role. What tech you use isn't what will make your project successful. What’s important is how your project solves a problem.

My Background & the Problem I Wanted to Solve

I am a UI/UX Designer, and my background is in designing user interfaces for eCommerce and SAAS-driven applications. I’ve been working at Webkul for the past four years. There, I curate well-designed user interfaces to create better web and mobile product experiences.

It was during a project at my full-time job that I came up with an idea that, at the time, was solely meant to help me do my job faster. I was revamping the entire UI for one of our apps, UVdesk, to have better aesthetics and be structured using a modular approach.

The app had several standard features, including a set of icons, illustrations for empty states, banners, and different user level panels. For each section, I used gradients of colors to create a seamless experience and better user interaction. I had to create and manage the gradients both when I was designing and when I was developing the product. I kept using the same colors and gradients for different sets of illustrations, buttons, and other UI elements within the project. That’s when I decided to make life easier for myself.

Enter: CoolHue

CoolHue is a website that has a set of 30 hand-picked color gradients — everything from sunset orange to deep blues and indigos. You can copy the CSS code for any gradient or download it as an image in PNG format. You can also grab the palette in .sketch or .grd (Photoshop) format.

You can also get CoolHue’s code from Github, open the HTML file, and update the JavaScript object to create your very own collection of gradients on the go.

    <!--Paper-->
    <div class="ch-paper">
        <script>
            var colorData = [
                ["#FDEB71", "#F8D800"],
                ["#ABDCFF", "#0396FF"],
                ["#FEB692", "#EA5455"],
                ["#CE9FFC", "#7367F0"],
                ["#90F7EC", "#32CCBC"],
                ["#FFF6B7", "#F6416C"],
             ];
        </script>
    </div>
    <!--//Paper-->

Once you open the code with your browser after editing, it will show the collection of gradients that you picked. After creating your palette, you can use the same gradient as many times as you want. You don’t need to worry about the code or color scheme every time you use them in one of your designs. That saves you time by cutting out the cumbersome step of continually checking back to see if the colors and code are uniform for all your web elements. By saving time, it also maximizes your efforts when you are doing quick prototypes, thereby increasing your creativity and productivity.

At the time, I was the sole person working on CoolHue as a side project from my day job. I didn’t have any ambition to create the next big web app at all. CoolHue’s creation happened organically and almost accidentally.

Launching CoolHue

When my project at UVDesk wrapped up, I thought to myself: if this color website helped me, it may help other designers and developers as well. I’ve been a part of the open source community for years, and I’ve always loved its sharing mentality. So I decided to share the project with the community.

Like the creation of the website, its launch was simple. I put the project on GitHub, launched it on Product Hunt, and posted a link to the website on Hacker News. The only outlets I contacted were Hey Designer and Freebiesbug, which agreed to feature it. The community became interested and began to use it, comment on it, upvote it, and share it. CoolHue quickly became the most upvoted project launched on June 18th on Product Hunt. Four weeks later, it had racked up more than a thousand upvotes.

The most pleasantly surprising thing happened one day after the launch. I read a lot of newsletters about the industry to keep up with changes. Imagine my surprise when I opened up my email and saw CoolHue in the Web Designer News newsletter. Even though I had not reached out to them to let them know about my project, they featured it as one of their top picks at #3.

I was blown away by how quickly and positively people responded to this project. What was so unexpected to me was that the developer and the designer community immediately took to it. They seemed to love it. In addition to the positive response on Product Hunt, users on Hacker News were also all abuzz talking about it.

If If I were to do it again, I would not have made the first iteration with static HTML. I would have used JSObject. But somehow, I still feel I made the right decision at the time. After all, my goal wasn’t to provide a finished, polished new product. I was just sharing something that had been useful to me and might help other developers and designers.

The Future

One of my goals is to make CoolHue even more accessible to a wider range of users. I realized that in its current form, CoolHue’s interface may be too intimidating for people who aren’t familiar with CSS or JS.

In the next iteration, I plan to provide an optional graphical interface on the front-end, so that people can choose colors to create their own collection — one for which they would not need to touch the code. This goal might take some time because I am busy with projects at UVDesk. But now that I know how helpful CoolHue has been to so many people, I have the motivation to give it my best shot as soon as possible.

Main Takeaways

Among the lessons I learned while making this product, the main one was about the importance of making something useful.

CoolHue is a small project. It took me about 3 to 4 days to put it together as a side project before I decided to launch it. I actually did not face any major technical issues, except for minor bugs that I fixed. This is quite exceptional for something that’s popularly used. The reason is that CoolHue solves a common problem. That's the basic thing and probably the main reason why people loved it.

Developers and designers love elegant solutions that make life slightly easier for them. CoolHue is a simple idea made with simple technologies — HTML, CSS, and a bit of JavaScript. But it fills a need that the community has.

We know that there are a sea of websites that offer the HTML codes for colors. Those tend to have dozens of solid colors, which can seem overwhelming. They also tend not to have dynamic behavior, unlike CoolHue. CoolHue is different in that it offers a few gradients — just 30. They are beautiful, clean, and modern. And on top of that, you can customize the palette.

There is also a beauty in using gradients as opposed to solid colors. As one user on HackerNews wrote:

I'd guess any gradient is a soothing thing to look at contrasted with sharp edges, which would signify danger or at least potential of physical damage. And they're very natural colors, as are found in sunsets, plants, vistas of the forest--all non-threatening and putting the mind at ease.

Before making CoolHue, I believed that knowing hot technologies, like Angular, Backbone, or Vue.js, was necessary in order for the magic to happen. Now I know that the technology doesn’t have to play a major role. It’s how you solve the problem that plays the biggest role. Technology doesn’t have to be complex in order to work. It’s here to make things easier. CoolHue was made with the simplest technologies, but it solved a problem others had. It made their lives easier, in a simple, elegant way.

The key is solving a problem. Whatever code we write is just to support that plan.