HTML Color Codes

Dixon and Moe talk about growing their project to $1300/mo by focusing on great design, using open-source tools, and finding solid distribution channels.

Hey guys! Tell us about yourselves, and what you're working on.

Our side project, HTML Color Codes, is a reference website to easily find HTML hex color codes using a color picker or color chart like Material Design. Color Codes is technically very similar to a whole bunch of other web tools out there, but — and this is important — its differentiator is an intense focus on design.

HTML Color Codes Website Screenshot

But backing up a bit, we're Dixon & Moe, a pair of best friends (now a team of 4) who graduated from MIT with degrees in architecture. Although steeped in a lengthy and painfully rigorous architectural education (8 years, but who's counting), we both from an early age became interested in technology by building jQuery and a few (dare we say it...) Flash websites to showcase our architectural work.

Seduced by the speed and feedback of building websites, and the simple (but irresistible) motivation to start our own company, we set out to build a design and development agency in San Francisco.

How'd you get started with your business?

When we started Dixon & Moe we truthfully didn't have a lot of direction or money. Luckily, with a bit of persistence and cold emailing, we were able to land a few freelance projects to help us pay the bills. Quickly learning how client-focused freelancing can be (and the ups and downs that go along with it), we began exploring alternatives to client work, a move that took us down the rabbit hole of digital products and influencers that many Indie Hackers interviews have mentioned before (37signals, Patio11, Wildbit, NeedWant).

Screenshot of HTMLArrows.com

Getting started as freelance designer/developers we tended to use a lot of free tools on the web (we still do), some of which were just terribly designed, or dated to the late-90s era. During a lull in client work we decided to rebuild one of our most frequented sites, an HTML symbol code resource for cool things like these ☃☂. We took two weeks and launched htmlarrows.com, and with a little marketing effort less than two months later landed at #1 on Google for the search term "html arrows". It was incredibly gratifying that design was a relevant metric, but for us the experiment had been proven. It was time to test a larger idea.

While researching keywords for HTML Arrows we came across another keyword, one with even greater potential: "html color codes." As designers (who use Sketch and other software with built in color tools) we were a little taken aback at the keyword's popularity, but with nearly 5,000 searches per day we just couldn't resist.

After some preliminary research we discovered htmlcolorcodes.com was unused (how perfect was that), and negotiated to buy the domain from the owner for only $600! To us that was a huge score since the incumbent had html-color-codes.info (what really??).

It took us two months this time to launch Color Codes, with many, many UI critiques and design charrettes; we really wanted to create an app-level user experience and hyper-refined the site to feel robust and look incredible. The open-source community provided much of the technical foundation for the website, for which we are eternally grateful and openly acknowledge in website's footer.

How were you able to clear out two months to build and launch the project? And was it funded entirely by your agency work?

As a pair working together, one of us would pay the bills by working on freelance projects while the other was full-time making sure the product was as high quality as possible. To collaborate, we would have weekly critiques about everything from font options to animation timings, but for the most part we worked independently.

Since freelancing can be a bit of a rollercoaster work-wise, it was less about us finding time and more making sure we could productively fill the lulls we encountered. We started Color Codes during some down time between client projects, and in total it took two months of design and dev time for one person and another equally intense two weeks for a huge marketing push by both of us.

The great thing about building web tools is that much of the work is upfront. While we've pushed tweaks and copy over time, for the most part the project is completely passive. The last push to the site was in April 2016 over 6 months ago.

Tech Stack: Middleman, ColorJoe, and ColorHarmony

We also thought ahead about the ideal tech stack and what it would look like to support a project that we wanted to minimally maintain. For us the obvious choice was a static site generator, and as Rubyists we stuck with our go to money tool Middleman. For hosting we are partial to AWS, so we went with S3 and Cloudfront (read: dirt cheap). Outside of Google Adsense, the site is blazing fast which also really helps with our ranking.

But we'd also be remiss to not acknowledge that we're standing on the shoulders of open-source giants. The functional parts of Color Codes rely primarily on ColorJoe.js by Juho Vepsäläinen but also have features using ColorHarmony.js by skratchdot, and One Color by the folks at one.com. Subsequently, we've been able to provide Juho with design support as a contribution to his open-source work, but we know there's much more to do.

How have you grown Color Codes?

One of the biggest challenges we faced building Color Codes was how to get it to rank in Google. A large part of Google's ranking algorithm depends on a website's backlinks, i.e. the reputation of the sites linking back to your website. Organic traffic was the key to keeping Color Codes completely passive, so we needed to figure out a method to build the site's backlink profile.

Design Loop: Award Loop (Awwwards, CSS Design Awards, and Site Inspire), News Loop (Hacker News, Designer News, Reddit, and Product Hunt), and Social Loop (Twitter, Facebook, Google Plus, and Pinterest)

Our approach was twofold, but relied on having a really well designed product. First, with some legwork we built what we called the "Design Loop", a long list of distribution channels that cater towards design, web tools, and digital products, and to these we submitted Color Codes in rapid fire succession. It can be difficult to put a price tag on good design, but in this case we used the number of backlinks accrued as our metric, and the extra time spent on design definitely paid off.

Traffic Growth Chart: September 2015 - December 2016

The second part of our strategy was more organic, but could be thought of as the "stickiness" of our product. Building a better experience for our users made them excited, and through sharing on social media, email, or simply returning to the site time-after-time, we've been able to continue the site's growth through network effects largely attributed to the design of the product.

Like we mentioned before, there were tens if not hundreds of other websites doing, for all intents and purposes, exactly the same thing we were with Color Codes, except we designed a better experience.

What's the story behind your revenue?

Since low maintenance was a priority, we decided—after some heated debate—to go with Google Adsense. Part of our strategy all along was to build, grow and then monetize the website, and even during the project's design phase we thought through the layouts and user experience with and without advertising. This has been instrumental in maintaining its success so far, since the ads were not simply an after thought, they were baked into the design from the beginning.

Revenue Growth Chart: March - November 2016

Initially the returns were pretty low, but over time the revenue has become a bit more respectable. We're now banking $1,300/mo completely passively; we can't retire yet but it's definitely a start. We know there are a lot of other possibilities for monetization, however, we just haven't had any time to experiment further.

What are your goals for the future?

As much as we love that sweet, sweet passive income, we're onto other things. We've been soliciting offers to sell Color Codes to folks who know how to take a website that does nearly a million pageviews per month and properly monetize it.

Our focus for the new year is a return to our roots and grow our SaaS product Monograph which focuses on the architecture industry (and just reached $350/mo). If we can't find a buyer for Color Codes we're happy to keep the passive income train going and use the funds to support more of our time building Monograph.

If you had to start over, what would you do differently?

Starting out with Color Codes we had to answer a fundamental question: do we create a unique brand or do we take a very targeted route and use the exact match (or something close to it) domain, name and keywords. We chose the latter, but this approach has been an intermittent topic throughout the site's lifetime.

If we were to do it again, we'd probably ask a slightly different question: do we want to build a brand or a standalone product? Although not mutually exclusive, the thought process and sequence is different for each. In the case of Color Codes, we built a standalone product (first), with a very focused app and identity. While this has worked out really well for the areas we originally targeted, it also has limited our ability (and desire) to expand the product beyond its initial market. Doing it again we might choose, for example, to develop a set of free prototyping tools for web designers with color codes being the pilot product or feature, and a roadmap of additional products that also fell under the brand. As it stands now, Color Codes is a web color tool— in name, identity, and function, and that's that.

A second practice we should have implemented (in retrospect) is to set simple timelines and an hourly "budget." We haven't noticed many Indie Hackers interviews that mention hours worked, but that was something we did a decent job tracking. However, we should have figured out what the eventual payback would need to be to offset those hours, i.e. as a cost-benefit comparison to pounding the pavement looking for more clients.

Ultimately we spent about 9 weeks on the project which, based on our freelancing rate at the time, comes out to around $36,000. At our current $1,300/mo profit that will take about 28 months to pay back. Keep in mind, however, we've also landed client work through the project, so it's not an exact 1:1 relationship, but more of a heuristic to gauge our efforts.

What tools have been helpful with getting Color Codes to where it is today?

There were a number of free tools we used during the development of Color Codes, many of them useful for tracking SEO impact and keywords. Google's Keyword Planner Tool was foundational for discovering the "html color codes" keyword in the first place, and helpful in establishing follow-on and long tail keywords we could also target. The tool does require a credit card (although they won't charge you) but is well worth it!

Google Analytics is probably table stakes at this point, but in addition to user growth we found it useful to track the backlinks we would get from other websites (via the Acquisition > Medium tab). Google Webmaster Tools is another resource we used heavily early on to track keywords we ranked for but potentially could optimize better. Google also has other tools like the Structured Data Testing Tool for validating Schema.org markup (which if you're not using yet you should definitely start).

Revenue Growth Chart: March - November 2016

SEO resources are a dime a dozen—there are so many out there. And since it's essentially a meta-game for sites like Moz and Backlinko to rank for these keywords, you can find some really detailed posts on building backlinks, content, and keyword strategies.

What advice do you have for aspiring indie hackers?

Start small.

Amy Hoy and Jason Fried have already described this in detail, but when you're just getting started make sure you get a few small wins under your belt. Building momentum and learning to generate revenue aren't necessarily natural if you're from a maker background, but starting with a simple monetizable project creates the product habit. We genuinely wish we had this advice earlier in our lives, and we believe it would have helped with the fact that...

Entrepreneurship isn't for everyone.

Color Codes is our 5th attempt at a digital product, and definitely the most successful thus far. While of course the common refrain from the other 4 projects is that we "learned so much along the way", we do wish we made more inroads on "building something people want." With that said, it's always going to be hard. Entrepreneurship, especially in the beginning, is a grind, and building products is more a lifestyle than it is a job. But if you enjoy it, man, it's a great lifestyle!

Build on your background (a.k.a. the world needs more design).

More advice specifically for design hackers out there, but look at industries and areas that aren't being talked about and aren't very sexy. There are so many underserved markets that desperately need design (open-source projects, bootstrapped companies, free resource sites). When you find an area that could use some help, look for projects or products that already have a proven track record and demand, and try to understand how you can provide a better experience through design. There were 20+ other sites out there doing exactly what Color Codes does, but we were able to emerge from the noise by pushing design.

Where can we go to learn more?

If you're ever in the Bay Area, swing by our office to share a beer and talk shop. Also, as an agency we love meeting and working with other bootstrapped founders — feel free to reach out for design feedback, SEO advice, or a solid IPA recommendation (inbox is always open: moe@dixonandmoe.com)

Subscribe for new interviews every week! 🤗

Courtland here! I regularly interview the indie hackers behind profitable apps and side projects like HTML Color Codes. Enter your email below, and I'll send you new interviews when they're out. Feel free to unsubscribe whenever you want.

Share this interview:

Loading comments...