Tribute to the The Great Wave: A color palette based on an old Japanese painting

The Great Wave Color Palette

After years of admiring this print by the legendary Japanese artist, Hokusai, I’ve realized the colors are just as dramatic as the composition. So I decided to extract a few hues and create a color palette.

I chose colors from the boats, the sky and, of course, the waves.

Color Palette based onThe Great Wave Off Kanagawa by Hokusai
For you web designers out there, here is the HTML hex code for each color from top to bottom:
  • #c1a06e – dark tan
  • #d9d1ba – light tan
  • #82b0b2 – light blue
  • #346b84 – medium blue
  • #1a3657 – dark blue

As with all my color palettes you can find this one on

Haunted by a legend


The Great Wave Off Kanagawa by Hokusai is probably my favorite piece of fine art. I caught glimpses of it growing up in American culture, but didn’t know anything about the work until I studied it in art school.

Turns out the iconic scene is actually a woodblock print and not a painting, and its part of a series based on that little mountain you can see in the background. For some reason I fell in love with the piece in college when I found a huge poster print version for sale on a table piled with other pop art and cultural icons. From then on, the famous painting followed my through life…

  • I proudly displayed it in my room during college.
  • Then I hung it over my desk when I got an office job.
  • At one point, the image was my desktop background.
  • A coworker and good friend bought me a sketchbook with the painting printed on the front.
  • After getting married I brought it home and managed to hang it over our bed… briefly. Something about the imminent death of those sailors didn’t sit well with the wife as a pre-bedtime meditation.
  • Until I get my home office situated the historic image sulks in my closet. Nevertheless, it lives on as my current desktop background.
  • And finally, I sold my old poster at a garage sale while raising funds to start a business. Someday we’ll meet again Hokusai.
Experiments Inspirations

Old-School Dark Color Palette: Sportomatic


Cruising through I found an old poster of a Porsche 911 “Sportomatic” at the Nurburgring in 1967.

I was drawn to the green monochrome photo and the overall color scheme. The green and orange reminded me of old video game cartridge labels.


The Porsche poster’s dark background and muted colors are a theme I’ve been noticing a lot lately. This increased awareness started after I switched the color scheme of my code editor to a more aesthetically pleasing and much easier to read format.

Coda color scheme

The New Color Palette: Sportomatic

I decided it was time to give in to the Universe and document this theme with a new color palette. I give you, Sportomatic:

To download this color palette head over to Sportomatic’s page on They provide every format you could possibly want. Feel free to use it on any project, personal or commercial. I’d love to hear about what you do with it and I would be glad to link to your work.

Sportomatic in use

Here is a pattern I created on ColorLovers to see the new color palette in action:

Retro pattern and color scheme

Experiments Inspirations

Mid-Century Modern Color Palette: Modern Hero Suit

Inspired by the hero graphic on for The Colbert Report (as of 4/12/11), the color scheme really connected with me.


Calm, powerful, and bold. I had to create a color palette in tribute. Enjoy.
Color Palette: Modern Hero Suit, mid-century



Fitts Architects Website Design Process

fitts architects office building

Fitts Architects in Tuscaloosa, Alabama hired me to redesign and rebuild their website. Here is the story behind the project and the process we went through to polish their brand on the internet.

Respect at first sight

In college I lived within 100 yards of the Fitts Architects office. Every time I drove by I would think to myself, “I really like the look of that building.”

The simple modern lines resonated with me. The design stands in stark contrast to the Classical, Victorian, and Early 2oth Century Style homes that surround it. I respected their boldness.

Fitts Architects office building front steps

A few years later I drove by and thought it would be awesome to have them as a client. I sent a cold email to the owner of Fitts Architects… Fitts himself.

I simply told him I was a fan of their work and that if they ever needed help with their website or other graphic design services I happened to be skilled in those areas.

Fitts Architects metal sign on brick wall

To my surprise he was very gracious and told me to come by the office. Several meetings later,  we signed a contract and I was officially the web designer for one of my local design heroes!

The Design Process

Here is a look inside the process I used to go from concept to finished product.

Phase 1: Set Goals

The first step involved meeting with the client to figure out the purpose behind the website. What goals were they trying to accomplish with this project?

  1. Basically, they wanted an updated version of their current website that was easy to navigate and elegantly designed.
  2. The design and functionality of the original website lacked the sense of high quality professionalism the Fitts brand stands for.
  3. However, there was a certain simplicity and elegance about the original site that the client wanted to carry through to the new design.

Fitts Architects original website

Considering their goals for the functionality and design of the new site I moved on to the next phase.

Phase 2: Get Exposed

Exposure to as much information about the client’s business, competition and industry at large is critical. I began scouring the internet for the websites of other modern architecture firms, taking note of how they solved similar problems to what my client faced.

Then I collected benchmarks, including  local competitors and global peer, and sent them to Fitts. He reviewed them and sent me valuable feedback and his vision for their new website. I’ve found several benefits of involving the client in the research process:

  1. Helps them compare their current site to others in their industry, reinforcing their need for my services.
  2. Helped answer questions that I never thought to ask by getting their feedback on the design, features, and functionality of other websites.
  3. Keeps the client and I in an ongoing conversation about their website throughout the project.

Phase 3: Find the concept

Phase three is basically visual brainstorming. With information from my research fresh on my mind I take out my sketch book and a mechanical pencil, or an ink pen depending on my mood, and spend at least an hour sketching out everything that comes to mind.

The goal here is not to create perfectly rendered illustrations, but to sift through the ideas that started to form during the first 2 phases. Sometimes I’ll draw random stuff to help kick-start my creative juices.

The Fitts sketches above include random lines, logo ideas, and even a sketch of their building – none of which were part of the website design I was hired to create. You might think this is a waste of time, but while exploring ideas like this I uncover valuable perspective and unexpected inspiration.

Until I have a strong conviction about a specific idea I keep scribbling. I think finding the right idea, or concept, is the most critical step in the design process. I’m a firm believer in pencils before pixels.

Phase 4: Mock it up

With sketches in hand I start bringing my favorite concept to life in Photoshop, or Illustrator. Depending on the project I may show the client some of my sketches to make sure we’re on the same page.

Fitts Architects Website Re-Design: Concept 1

The first concept I created for Fitts Architects strongly resembled their business card at the time. The header section shares the same logo placement and color scheme as their cards. My attempt to create consistency among their existing branding materials was rejected in the end.

After reviewing Concept 1 the client stressed how much they enjoyed the simplicity of the current website and wanted to see something in that direction. Happily trying to please the client, I presented Concept 2:

Fitts Architects Website Re-Design: Concept 2

Another meeting, another concept down. Concept 2 didn’t quite hit the mark either. They offered some more ideas, including the integration of a new gold-ish color into the design. I obliged and presented Concept 3:

Fitts Architects Website Re-Design: Concept 3

When this third concept failed to excite the client I got worried. Were they going to fire me? Not quite. The project continued but with some unexpected twists.

At the meeting to discuss the third concept pictured above, the client had literally built their own concept for what they thought the site should look like using construction paper and previous concepts I sent them. This was a first in my experience as a designer.

Client concept for

They wanted the logo bigger and suggested the use of some decorative colors and shapes in a kind of modern art/abstract way. Architects are fellow creatives, so I understand the urge to just show me what they wanted. Still, this was one of the more awkward moments of my career. Dutifully, I agreed to digitize their mock-up:

Fitts Architects Website Re-Design: Concept 4

While presenting their idea to them, I suggested they give me one more chance to take their design and add my own styling to it. They easily agreed and I breathed.

This time, I wasn’t holding back. I axed the color, and made the shapes more of a subtle accent than a feature. For the logo I recreated their metal sign. The photos are the main feature of the site so I didn’t want random design elements to compete visually. The work is what the client wanted to feature. This design would do that.

I felt good about Concept 5. I sent the email with the concept attached and hoped for the best.

Fitts Architects Website Re-Design: Concept 5

With a simple, “That looks great!” the design was approved.

After building the site with HTML, CSS, Javascript and WordPress, the new site was launched: Fitts Architects Website

Experiments Inspirations

Retro Vintage Color Palette: Vinyl Polaroid

As seen on

All the faded luminescence of photographs from the 60s, 70s, and 80s expressed in a simple swath of muted hues. I created this mellow palette on after being inspired by this beautiful photo of a woman flipping her hair:
woman flipping hair with vintage color scheme

COLOURlovers is a great place to find inspiration. I visit the site often when deciding on color schemes for my design projects.